🎨 Palette: Add ARIA labels to phonebook icon buttons

.jules/palette.md

@@ -0,0 +1,3 @@
+## 2024-04-22 - Missing ARIA labels on icon-only buttons
+**Learning:** React Native icon-only buttons (`TouchableOpacity` wrapping a `MaterialIcons`) often lack context for screen readers, leading to poor accessibility.
+**Action:** Always add `accessible={true}`, `accessibilityRole="button"`, and a descriptive `accessibilityLabel` (localized via `t()`) to all icon-only interactive elements.

src/i18n/translations.ts

@@ -119,6 +119,7 @@ const it = {
   contactEmptyTitle: 'Rubrica vuota',
   contactEmptyHint: 'Tocca "Aggiungi" per inserire il primo contatto',
   contactNoResults: 'Nessun risultato',
+  contactCall: 'Chiama', contactEditBtn: 'Modifica', contactDeleteBtn: 'Elimina', contactClearSearch: 'Cancella ricerca',
   // Password
   passwordTitle: 'Password', passwordAdd: 'Aggiungi',
   passwordModalNew: 'Nuova voce', passwordModalEdit: 'Modifica voce',
@@ -277,6 +278,7 @@ const en: typeof it = {
   contactEmptyTitle: 'Empty phonebook',
   contactEmptyHint: 'Tap "Add" to insert the first contact',
   contactNoResults: 'No results',
+  contactCall: 'Call', contactEditBtn: 'Edit', contactDeleteBtn: 'Delete', contactClearSearch: 'Clear search',
   // Password
   passwordTitle: 'Password', passwordAdd: 'Add',
   passwordModalNew: 'New entry', passwordModalEdit: 'Edit entry',

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={true} accessibilityRole="button" accessibilityLabel={`${t('contactCall')} ${contact.name}`}>
         <MaterialIcons name="call" size={18} color="#fff" />
       </TouchableOpacity>
-      <TouchableOpacity style={rowStyles.editBtn} onPress={() => onEdit(contact)}>
+      <TouchableOpacity style={rowStyles.editBtn} onPress={() => onEdit(contact)} accessible={true} accessibilityRole="button" accessibilityLabel={`${t('contactEditBtn')} ${contact.name}`}>
         <MaterialIcons name="edit" size={18} color={colors.textSub} />
       </TouchableOpacity>
-      <TouchableOpacity style={rowStyles.editBtn} onPress={confirmDelete}>
+      <TouchableOpacity style={rowStyles.editBtn} onPress={confirmDelete} accessible={true} accessibilityRole="button" accessibilityLabel={`${t('contactDeleteBtn')} ${contact.name}`}>
         <MaterialIcons name="delete-outline" size={18} color="#EF4444" />
       </TouchableOpacity>
     </View>
@@ -421,7 +421,7 @@ export default function PhonebookScreen() {
           autoCorrect={false}
         />
         {!!search && (
-          <TouchableOpacity onPress={() => setSearch('')}>
+          <TouchableOpacity onPress={() => setSearch('')} accessible={true} accessibilityRole="button" accessibilityLabel={t('contactClearSearch')}>
             <MaterialIcons name="close" size={18} color={colors.textSub} />
           </TouchableOpacity>
         )}