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

Added `accessible`, `accessibilityRole`, `accessibilityLabel`, and `accessibilityState` attributes to interactive icon-only buttons in the Password and Notepad screens to improve screen reader compatibility and usability.

Co-authored-by: TargetMisser <52361977+TargetMisser@users.noreply.github.com>
---
 .jules/palette.md              |  3 +++
 src/screens/NotepadScreen.tsx  | 13 ++++++++++++-
 src/screens/PasswordScreen.tsx |  9 ++++++++-
 3 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 .jules/palette.md

diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 0000000..64ed795
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-04-29 - Improve Accessible Controls for Password and Notepad screens
+**Learning:** Icon-only buttons or those with disabled states must have clear accessibility attributes to remain understandable by screen readers and usable without a pointer. Adding disabled prop to disabled icon button, adding accessibilityState, and adding accessibilityRole improves accessibility significantly.
+**Action:** Always wrap interactive icon elements in a standard TouchableOpacity that specifies accessible, accessibilityRole="button", accessibilityLabel, and hitSlop for a larger tap target. If it's disabled, set the accessibilityState appropriately.
diff --git a/src/screens/NotepadScreen.tsx b/src/screens/NotepadScreen.tsx
index 9114a9e..aa70e7f 100644
--- a/src/screens/NotepadScreen.tsx
+++ b/src/screens/NotepadScreen.tsx
@@ -109,12 +109,23 @@ 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={true}
+            accessibilityRole="button"
+            accessibilityLabel={t('notepadClearTitle')}
+            hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+          >
             <MaterialIcons name="delete-outline" size={22} color="#EF4444" />
           </TouchableOpacity>
           <TouchableOpacity
             onPress={save}
             style={[s.saveBtn, saved && s.saveBtnDim]}
+            disabled={saved}
+            accessible={true}
+            accessibilityRole="button"
+            accessibilityState={{ disabled: saved }}
           >
             <MaterialIcons name="save" size={18} color="#fff" />
             <Text style={s.saveTxt}>{saved ? t('notepadSaved') : t('notepadSave')}</Text>
diff --git a/src/screens/PasswordScreen.tsx b/src/screens/PasswordScreen.tsx
index a9611d8..835e021 100644
--- a/src/screens/PasswordScreen.tsx
+++ b/src/screens/PasswordScreen.tsx
@@ -136,7 +136,14 @@ function PasswordRowComponent({ item, onEdit, onDelete }: { item: PasswordEntry;
         {item.username ? <Text style={s.username}>{item.username}</Text> : null}
         <View style={s.pwRow}>
           <Text style={s.pw}>{revealed ? item.password : '••••••••'}</Text>
-          <TouchableOpacity onPress={() => setRevealed(r => !r)} style={s.eyeBtn}>
+          <TouchableOpacity
+            onPress={() => setRevealed(r => !r)}
+            style={s.eyeBtn}
+            accessible={true}
+            accessibilityRole="button"
+            accessibilityLabel={revealed ? 'Nascondi password' : 'Mostra password'}
+            hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+          >
             <MaterialIcons name={revealed ? 'visibility-off' : 'visibility'} size={16} color={colors.textSub} />
           </TouchableOpacity>
         </View>