🎨 Palette: [UX improvement] Add accessibility labels to icon-only buttons

.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.

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>
         )}

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>

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',