diff --git a/.jules/palette.md b/.jules/palette.md new file mode 100644 index 0000000..83e0695 --- /dev/null +++ b/.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. diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts index 8ccd1e2..68d018d 100644 --- a/src/i18n/translations.ts +++ b/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', diff --git a/src/screens/PhonebookScreen.tsx b/src/screens/PhonebookScreen.tsx index 1884348..2f17447 100644 --- a/src/screens/PhonebookScreen.tsx +++ b/src/screens/PhonebookScreen.tsx @@ -273,13 +273,13 @@ function ContactRowComponent({ contact, onEdit, onDelete }: ContactRowProps) { {contact.number} {!!contact.note && {contact.note}} - + - onEdit(contact)}> + onEdit(contact)} accessible={true} accessibilityRole="button" accessibilityLabel={`${t('contactEditBtn')} ${contact.name}`}> - + @@ -421,7 +421,7 @@ export default function PhonebookScreen() { autoCorrect={false} /> {!!search && ( - setSearch('')}> + setSearch('')} accessible={true} accessibilityRole="button" accessibilityLabel={t('contactClearSearch')}> )}