From db2b50ee08ab793a7b61346fb04d44c1ff128e7c Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 22 Apr 2026 01:31:45 +0000
Subject: [PATCH] feat(a11y): add aria labels to icon-only buttons in phonebook

Co-authored-by: TargetMisser <52361977+TargetMisser@users.noreply.github.com>
---
 .jules/palette.md               | 3 +++
 src/i18n/translations.ts        | 2 ++
 src/screens/PhonebookScreen.tsx | 8 ++++----
 3 files changed, 9 insertions(+), 4 deletions(-)
 create mode 100644 .jules/palette.md

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