From 36eccb7b542288cbbf65be045f197305138bd00a Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 23 May 2026 09:53:13 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20accessibility?=
 =?UTF-8?q?=20props=20to=20icon-only=20buttons=20in=20AppHeader?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What: Added `accessibilityRole`, `accessibilityLabel`, and `accessibilityHint` props to all icon-only `Pressable` and `TouchableOpacity` action buttons (Notifications, Settings, Logout, Back) in the `AppHeader` component.
🎯 Why: Icon-only buttons without these attributes are completely inaccessible to screen reader users as they provide no context about their function.
♿ Accessibility: Ensures that screen readers can correctly identify these controls as buttons and announce their purpose to users.

Co-authored-by: mknoufi <209227354+mknoufi@users.noreply.github.com>
---
 frontend/src/components/AppHeader.tsx | 33 ++++++++++++++++++++++++---
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/AppHeader.tsx b/frontend/src/components/AppHeader.tsx
index 617793b14..3d618fab9 100644
--- a/frontend/src/components/AppHeader.tsx
+++ b/frontend/src/components/AppHeader.tsx
@@ -101,17 +101,34 @@ export function AppHeader({
 
           {/* RIGHT: Actions */}
           <View style={styles.actions}>
-            <Pressable onPress={handleNotifications} style={styles.iconButton} hitSlop={10}>
+            <Pressable
+              onPress={handleNotifications}
+              style={styles.iconButton}
+              hitSlop={10}
+              accessibilityRole="button"
+              accessibilityLabel="Notifications"
+              accessibilityHint="Double tap to open notifications"
+            >
               <Ionicons name="notifications-outline" size={20} color={COLORS.TEXT_SECONDARY} />
               <View style={styles.badgeDot} />
             </Pressable>
-            <Pressable onPress={handleSettings} style={styles.iconButton} hitSlop={10}>
+            <Pressable
+              onPress={handleSettings}
+              style={styles.iconButton}
+              hitSlop={10}
+              accessibilityRole="button"
+              accessibilityLabel="Settings"
+              accessibilityHint="Double tap to open settings"
+            >
               <Ionicons name="settings-outline" size={20} color={COLORS.TEXT_SECONDARY} />
             </Pressable>
             <Pressable
               onPress={handleLogout}
               style={[styles.iconButton, { borderColor: COLORS.ERROR }]}
               hitSlop={10}
+              accessibilityRole="button"
+              accessibilityLabel="Logout"
+              accessibilityHint="Double tap to logout of your account"
             >
               <Ionicons name="power-outline" size={20} color={COLORS.ERROR} />
             </Pressable>
@@ -124,6 +141,9 @@ export function AppHeader({
               <TouchableOpacity
                 onPress={() => navigation.goBack()}
                 style={styles.backBtn}
+                accessibilityRole="button"
+                accessibilityLabel="Go back"
+                accessibilityHint="Double tap to return to the previous screen"
               >
                 <Ionicons name="arrow-back" size={24} color={COLORS.TEXT_PRIMARY} />
                 <Text style={styles.backText}>Back</Text>
@@ -136,7 +156,14 @@ export function AppHeader({
           </View>
           {/* Notifications on sub-screens */}
           <View style={styles.actions}>
-            <Pressable onPress={handleNotifications} style={styles.iconButton} hitSlop={10}>
+            <Pressable
+              onPress={handleNotifications}
+              style={styles.iconButton}
+              hitSlop={10}
+              accessibilityRole="button"
+              accessibilityLabel="Notifications"
+              accessibilityHint="Double tap to open notifications"
+            >
               <Ionicons name="notifications-outline" size={20} color={COLORS.TEXT_SECONDARY} />
               <View style={styles.badgeDot} />
             </Pressable>