From ea9e9e30b955bac11c9a8ee529def72a0c149723 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 18 Apr 2026 01:38:15 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20accessibility?=
 =?UTF-8?q?=20to=20icon=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added accessible, accessibilityRole="button", and accessibilityLabel props to the Notepad clear button and the Phonebook contact action buttons.
- Updated the translation file with new keys `contactCall` and `contactEdit` for screen reader localization.

Co-authored-by: TargetMisser <52361977+TargetMisser@users.noreply.github.com>
---
 .jules/palette.md               | 3 +++
 src/i18n/translations.ts        | 2 ++
 src/screens/NotepadScreen.tsx   | 2 +-
 src/screens/PhonebookScreen.tsx | 6 +++---
 4 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..51d6cc8
--- /dev/null
+++ b/.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.
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() {
           <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
diff --git a/src/screens/PhonebookScreen.tsx b/src/screens/PhonebookScreen.tsx
index 1884348..6f4680d 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 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>