🎨 Palette: Add accessibility labels to icon-only buttons

.jules/palette.md

@@ -0,0 +1,3 @@
+## 2024-04-18 - Icon-Only Button Accessibility
+**Learning:** React Native's `<TouchableOpacity>` components wrapping icons (like MaterialIcons) do not have inherent screen-reader descriptions, making them entirely opaque to visually impaired users unless explicitly annotated.
+**Action:** When adding or reviewing icon-only buttons, always apply `accessible`, `accessibilityRole="button"`, and a localized `accessibilityLabel` to the wrapper component to ensure screen-reader compatibility.

src/i18n/translations.ts

@@ -115,6 +115,7 @@ const it = {
   contactCatLabel: 'Categoria', contactNoteLabel: 'Nota (opzionale)',
   contactNotePh: 'es. Solo orario ufficio, interno 3...',
   contactErrReqTitle: 'Campi obbligatori', contactErrReqMsg: 'Nome e numero sono obbligatori.',
+  contactCall: 'Chiama', contactEdit: 'Modifica',
   contactDeleteTitle: 'Elimina contatto', contactDeleteConfirm: 'Elimina',
   contactEmptyTitle: 'Rubrica vuota',
   contactEmptyHint: 'Tocca "Aggiungi" per inserire il primo contatto',
@@ -273,6 +274,7 @@ const en: typeof it = {
   contactCatLabel: 'Category', contactNoteLabel: 'Note (optional)',
   contactNotePh: 'e.g. Office hours only, ext. 3...',
   contactErrReqTitle: 'Required fields', contactErrReqMsg: 'Name and number are required.',
+  contactCall: 'Call', contactEdit: 'Edit',
   contactDeleteTitle: 'Delete contact', contactDeleteConfirm: 'Delete',
   contactEmptyTitle: 'Empty phonebook',
   contactEmptyHint: 'Tap "Add" to insert the first contact',

src/screens/NotepadScreen.tsx

@@ -109,7 +109,7 @@ 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 accessibilityRole="button" accessibilityLabel={t('notepadClearTitle')}>
             <MaterialIcons name="delete-outline" size={22} color="#EF4444" />
           </TouchableOpacity>
           <TouchableOpacity

src/screens/PhonebookScreen.tsx

@@ -273,13 +273,13 @@ function ContactRowComponent({ contact, onEdit, onDelete }: ContactRowProps) {
         <Text style={rowStyles.number} numberOfLines={1}>{contact.number}</Text>
         {!!contact.note && <Text style={rowStyles.note}>{contact.note}</Text>}
       </View>
-      <TouchableOpacity style={[rowStyles.callBtn, { backgroundColor: color }]} onPress={call}>
+      <TouchableOpacity style={[rowStyles.callBtn, { backgroundColor: color }]} onPress={call} accessible accessibilityRole="button" accessibilityLabel={t('contactCall')}>
         <MaterialIcons name="call" size={18} color="#fff" />
       </TouchableOpacity>
-      <TouchableOpacity style={rowStyles.editBtn} onPress={() => onEdit(contact)}>
+      <TouchableOpacity style={rowStyles.editBtn} onPress={() => onEdit(contact)} accessible accessibilityRole="button" accessibilityLabel={t('contactEdit')}>
         <MaterialIcons name="edit" size={18} color={colors.textSub} />
       </TouchableOpacity>
-      <TouchableOpacity style={rowStyles.editBtn} onPress={confirmDelete}>
+      <TouchableOpacity style={rowStyles.editBtn} onPress={confirmDelete} accessible accessibilityRole="button" accessibilityLabel={t('contactDeleteConfirm')}>
         <MaterialIcons name="delete-outline" size={18} color="#EF4444" />
       </TouchableOpacity>
     </View>