🎨 Palette: Enhance NotepadScreen UX and Accessibility

.jules/palette.md

@@ -0,0 +1,7 @@
+## 2024-04-24 - Screen Reader Labels for Icon-Only Buttons
+**Learning:** The React Native `TouchableOpacity` components in this codebase frequently omit `accessibilityRole="button"` and `accessibilityLabel` when used as icon-only buttons (like the clear and save buttons in `NotepadScreen`).
+**Action:** Always verify icon-only buttons have an `accessibilityLabel` using the translation hook (`t()`) and `accessibilityRole="button"` for better screen reader support.
+
+## 2024-04-24 - Disabled States for Actions
+**Learning:** Inactive actions (like trying to clear an already empty notepad, or saving an already saved notepad) still accepted touch events, which could confuse screen readers or cause unintended logic.
+**Action:** Always add the `disabled` prop to `TouchableOpacity` when the action is no longer relevant, and lower the `opacity` or update styling to provide clear visual feedback to sighted users.

src/screens/NotepadScreen.tsx

@@ -109,12 +109,16 @@ 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, text.length === 0 && { opacity: 0.4 }]} disabled={text.length === 0} accessible accessibilityRole="button" accessibilityLabel={t('notepadClearTitle')}>
             <MaterialIcons name="delete-outline" size={22} color="#EF4444" />
           </TouchableOpacity>
           <TouchableOpacity
             onPress={save}
             style={[s.saveBtn, saved && s.saveBtnDim]}
+            disabled={saved}
+            accessible
+            accessibilityRole="button"
+            accessibilityLabel={saved ? t('notepadSaved') : t('notepadSave')}
           >
             <MaterialIcons name="save" size={18} color="#fff" />
             <Text style={s.saveTxt}>{saved ? t('notepadSaved') : t('notepadSave')}</Text>