From 064eb9b0c6158c6b792c7c355a42a1a6963f7957 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 27 Apr 2026 01:10:50 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20accessibili?=
 =?UTF-8?q?ty=20and=20UX=20of=20NotepadScreen=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added missing accessibility properties (accessible, accessibilityRole, accessibilityLabel) and hitSlop to the icon-only delete button in NotepadScreen to make it usable with screen readers and easier to tap.

Also disabled the save button when the state is already saved and correctly passed the accessibilityState to assistive technologies.

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

diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 0000000..b6f5501
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,3 @@
+## 2026-04-27 - Added accessibility props to clear notes button in NotepadScreen
+**Learning:** Icon-only buttons often lack accessible properties and proper hitSlops making them difficult to interact with on touch screens and completely invisible or undescriptive to screen readers.
+**Action:** Add `accessible`, `accessibilityRole`, `accessibilityLabel`, and `hitSlop` to all icon-only `TouchableOpacity` components.
diff --git a/src/screens/NotepadScreen.tsx b/src/screens/NotepadScreen.tsx
index 9114a9e..717eaa2 100644
--- a/src/screens/NotepadScreen.tsx
+++ b/src/screens/NotepadScreen.tsx
@@ -109,12 +109,21 @@ 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')}
+            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}
+            accessibilityState={{ disabled: saved }}
           >
             <MaterialIcons name="save" size={18} color="#fff" />
             <Text style={s.saveTxt}>{saved ? t('notepadSaved') : t('notepadSave')}</Text>