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() { {t('notepadTitle')} - + {saved ? t('notepadSaved') : t('notepadSave')} 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 ? {item.username} : null} {revealed ? item.password : '••••••••'} - setRevealed(r => !r)} style={s.eyeBtn}> + 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 }} + >