diff --git a/.jules/palette.md b/.jules/palette.md new file mode 100644 index 0000000..51d6cc8 --- /dev/null +++ b/.jules/palette.md @@ -0,0 +1,3 @@ +## 2024-04-18 - Icon-Only Button Accessibility +**Learning:** React Native's `` 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. diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts index 8ccd1e2..a6a16f3 100644 --- a/src/i18n/translations.ts +++ b/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', diff --git a/src/screens/NotepadScreen.tsx b/src/screens/NotepadScreen.tsx index 9114a9e..1d738a0 100644 --- a/src/screens/NotepadScreen.tsx +++ b/src/screens/NotepadScreen.tsx @@ -109,7 +109,7 @@ export default function NotepadScreen() { {t('notepadTitle')} - + {contact.number} {!!contact.note && {contact.note}} - + - onEdit(contact)}> + onEdit(contact)} accessible accessibilityRole="button" accessibilityLabel={t('contactEdit')}> - +