From 2bfdc7a1715731c5cbc1b680b96a720a6942eeb0 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 23 Apr 2026 19:05:20 +0000
Subject: [PATCH] feat(ux): Add aria-labels to icon-only buttons in AppShell

Co-authored-by: artosien <65523959+artosien@users.noreply.github.com>
---
 .Jules/palette.md                   | 1 +
 src/components/layout/app-shell.tsx | 7 ++++---
 2 files changed, 5 insertions(+), 3 deletions(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..5fb8e43
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1 @@
+## 2024-05-24 - Accessibility: ARIA Labels on Navigation Shell\n**Learning:** The global navigation shell contained several icon-only buttons (menu, notifications, dynamic mobile actions) missing screen reader context.\n**Action:** Always verify icon-only buttons have descriptive aria-labels, especially in high-visibility core layout components.
diff --git a/src/components/layout/app-shell.tsx b/src/components/layout/app-shell.tsx
index c6a1b0f..06198c9 100644
--- a/src/components/layout/app-shell.tsx
+++ b/src/components/layout/app-shell.tsx
@@ -212,13 +212,13 @@ export function AppShell({ children }: { children: React.ReactNode }) {
             <span>Lottoping</span>
           </div>
           <div className="flex items-center gap-1.5">
-            <Button variant="ghost" size="icon" className="rounded-full h-10 w-10 relative" onClick={() => setIsAlertsOpen(true)}>
+            <Button variant="ghost" size="icon" className="rounded-full h-10 w-10 relative" onClick={() => setIsAlertsOpen(true)} aria-label="Open alerts">
               <Bell className="w-5 h-5 text-primary" />
               <span className="absolute top-2.5 right-2.5 w-2 h-2 rounded-full bg-secondary border-2 border-white dark:border-black" />
             </Button>
             <Sheet>
               <SheetTrigger asChild>
-                <Button variant="ghost" size="icon" className="rounded-full h-10 w-10">
+                <Button variant="ghost" size="icon" className="rounded-full h-10 w-10" aria-label="Open menu">
                   <Menu className="w-6 h-6 text-primary" />
                 </Button>
               </SheetTrigger>
@@ -298,6 +298,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {
               key={i} 
               onClick={item.action}
               className="flex flex-col items-center justify-center -mt-12 bg-primary w-16 h-16 rounded-full border-4 border-white dark:border-black shadow-2xl transition-transform active:scale-90"
+              aria-label={item.label}
             >
               <item.icon className="w-8 h-8 text-white" />
             </button>
@@ -341,7 +342,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {
           <div className="h-full flex flex-col bg-card">
             <div className="p-6 border-b flex items-center justify-between bg-primary/5">
               <SheetTitle className="text-xl font-black text-primary">Entry Wallet</SheetTitle>
-              <Button variant="ghost" size="icon" onClick={() => setIsTicketsOpen(false)}><X className="w-5 h-5" /></Button>
+              <Button variant="ghost" size="icon" onClick={() => setIsTicketsOpen(false)} aria-label="Close wallet"><X className="w-5 h-5" /></Button>
             </div>
             <ScrollArea className="flex-1 p-6"><TicketList /></ScrollArea>
           </div>