From 4e6ea0b0dba96a60b070dbffbd2c60f1abb59b48 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 21 Apr 2026 01:18:11 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20[UX=20improvement]=20?=
 =?UTF-8?q?Add=20accessibility=20labels=20to=20icon-only=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: TargetMisser <52361977+TargetMisser@users.noreply.github.com>
---
 .jules/palette.md             | 3 +++
 App.tsx                       | 4 ++--
 src/components/DrawerMenu.tsx | 2 +-
 src/i18n/translations.ts      | 2 ++
 4 files changed, 8 insertions(+), 3 deletions(-)
 create mode 100644 .jules/palette.md

diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 0000000..d9f5ac6
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-05-15 - React Native Icon-Only Buttons Accessibility
+**Learning:** React Native's `<TouchableOpacity>` doesn't automatically act as a button with an implicit accessible name when it only contains an icon. It needs explicit `accessible={true}`, `accessibilityRole="button"`, and a localized `accessibilityLabel`.
+**Action:** Always add ARIA-equivalent accessibility props (`accessible={true}`, `accessibilityRole="button"`, `accessibilityLabel="..."`) to icon-only buttons in React Native.
diff --git a/App.tsx b/App.tsx
index 63cdb27..efe4ca2 100644
--- a/App.tsx
+++ b/App.tsx
@@ -193,11 +193,11 @@ function AppInner() {
       >
         <View style={[StyleSheet.absoluteFill, { backgroundColor: colors.appBar }]} />
         {overlay ? (
-          <TouchableOpacity onPress={handleBack} style={styles.iconBtn}>
+          <TouchableOpacity accessible={true} accessibilityRole="button" accessibilityLabel={t('appBarBack')} onPress={handleBack} style={styles.iconBtn}>
             <MaterialIcons name="arrow-back" size={22} color={colors.primaryDark} />
           </TouchableOpacity>
         ) : (
-          <TouchableOpacity onPress={() => setDrawerOpen(true)} style={styles.iconBtn}>
+          <TouchableOpacity accessible={true} accessibilityRole="button" accessibilityLabel={t('appBarMenu')} onPress={() => setDrawerOpen(true)} style={styles.iconBtn}>
             <MaterialIcons name="menu" size={24} color={colors.primaryDark} />
           </TouchableOpacity>
         )}
diff --git a/src/components/DrawerMenu.tsx b/src/components/DrawerMenu.tsx
index e22e073..795315a 100644
--- a/src/components/DrawerMenu.tsx
+++ b/src/components/DrawerMenu.tsx
@@ -84,7 +84,7 @@ export default function DrawerMenu({ visible, onClose, onSelect }: Props) {
               style={styles.headerGradient}
             >
               <AeroStaffLogo variant="large" monochrome />
-              <TouchableOpacity onPress={onClose} style={styles.closeIconBtn}>
+              <TouchableOpacity accessible={true} accessibilityRole="button" accessibilityLabel={t('drawerClose')} onPress={onClose} style={styles.closeIconBtn}>
                 <MaterialIcons name="close" size={20} color="rgba(255,255,255,0.7)" />
               </TouchableOpacity>
             </LinearGradient>
diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts
index 8ccd1e2..e75e8e9 100644
--- a/src/i18n/translations.ts
+++ b/src/i18n/translations.ts
@@ -138,6 +138,7 @@ const it = {
   pinVerifyErr: 'Impossibile verificare il PIN. Riprova.',
   pinAccessEnable: 'Attiva protezione PIN', pinAccessDisable: 'Disattiva protezione PIN',
   // DrawerMenu
+  appBarBack: 'Indietro', appBarMenu: 'Menu', drawerClose: 'Chiudi menu',
   drawerNotepadTitle: 'Blocco Note',
   drawerNotepadSub: 'Note personali',
   drawerPhonebookTitle: 'Rubrica',
@@ -295,6 +296,7 @@ const en: typeof it = {
   pinDisableBtn: 'Disable', pinErrMsg: 'Could not set PIN. Try again.',
   pinVerifyErr: 'Could not verify PIN. Try again.',
   pinAccessEnable: 'Enable PIN protection', pinAccessDisable: 'Disable PIN protection',
+  appBarBack: 'Back', appBarMenu: 'Menu', drawerClose: 'Close menu',
   // DrawerMenu
   drawerNotepadTitle: 'Notepad',
   drawerNotepadSub: 'Personal notes',