From 683bfa6185e841bc95ec516c49b216daad4ce077 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 28 Apr 2026 01:29:56 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20accessibility?=
 =?UTF-8?q?=20props=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             | 4 ++++
 src/components/DrawerMenu.tsx | 9 ++++++++-
 src/i18n/translations.ts      | 4 ++--
 src/screens/NotepadScreen.tsx | 9 ++++++++-
 4 files changed, 22 insertions(+), 4 deletions(-)
 create mode 100644 .jules/palette.md

diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 0000000..4134255
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,4 @@
+## 2024-05-16 - Add Accessible Props to Icon-Only Touchables
+
+**Learning:** When using React Native `<TouchableOpacity>` for icon-only buttons, screen readers cannot interpret their function, and small touch targets reduce usability.
+**Action:** Always include `accessible={true}`, `accessibilityRole="button"`, a descriptive `accessibilityLabel` using `t()`, and a `hitSlop` prop to enlarge the touchable area for better usability and screen reader support.
diff --git a/src/components/DrawerMenu.tsx b/src/components/DrawerMenu.tsx
index 551ff5d..e857293 100644
--- a/src/components/DrawerMenu.tsx
+++ b/src/components/DrawerMenu.tsx
@@ -106,7 +106,14 @@ export default function DrawerMenu({ visible, onClose, onSelect }: Props) {
               style={styles.headerGradient}
             >
               <AeroStaffLogo variant="large" monochrome />
-              <TouchableOpacity onPress={onClose} style={styles.closeIconBtn}>
+              <TouchableOpacity
+                onPress={onClose}
+                style={styles.closeIconBtn}
+                accessible={true}
+                accessibilityRole="button"
+                accessibilityLabel={t('close')}
+                hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+              >
                 <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 e8c19ad..ff0e12a 100644
--- a/src/i18n/translations.ts
+++ b/src/i18n/translations.ts
@@ -7,7 +7,7 @@ const it = {
   overlayNotepad: 'Blocco Note', overlayPhonebook: 'Rubrica', overlayPasswords: 'Password',
   overlayManuals: 'Manuali DCS', overlaySettings: 'Impostazioni',
   // Common
-  cancel: 'Annulla', save: 'Salva', delete: 'Elimina', error: 'Errore',
+  cancel: 'Annulla', close: 'Chiudi', save: 'Salva', delete: 'Elimina', error: 'Errore',
   confirm: 'Conferma', ok: 'OK', add: 'Aggiungi',
   profileTitle: 'Profili aeroporto',
   profileSubtitle: 'Salva aeroporto e compagnie diverse, poi cambia profilo con un tap.',
@@ -192,7 +192,7 @@ const en: typeof it = {
   overlayNotepad: 'Notepad', overlayPhonebook: 'Phonebook', overlayPasswords: 'Password',
   overlayManuals: 'DCS Manuals', overlaySettings: 'Settings',
   // Common
-  cancel: 'Cancel', save: 'Save', delete: 'Delete', error: 'Error',
+  cancel: 'Cancel', close: 'Close', save: 'Save', delete: 'Delete', error: 'Error',
   confirm: 'Confirm', ok: 'OK', add: 'Add',
   profileTitle: 'Airport profiles',
   profileSubtitle: 'Save different airports and airline sets, then switch profiles with one tap.',
diff --git a/src/screens/NotepadScreen.tsx b/src/screens/NotepadScreen.tsx
index 9114a9e..2fab6b9 100644
--- a/src/screens/NotepadScreen.tsx
+++ b/src/screens/NotepadScreen.tsx
@@ -109,7 +109,14 @@ export default function NotepadScreen() {
           <Text style={s.title}>{t('notepadTitle')}</Text>
         </View>
         <View style={s.actions}>
-          <TouchableOpacity onPress={clear} style={s.iconBtn}>
+          <TouchableOpacity
+            onPress={clear}
+            style={s.iconBtn}
+            accessible={true}
+            accessibilityRole="button"
+            accessibilityLabel={t('notepadClearTitle')}
+            hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+          >
             <MaterialIcons name="delete-outline" size={22} color="#EF4444" />
           </TouchableOpacity>
           <TouchableOpacity