From 17f3b5c6203c7312559106c2266a8cbd31fc6ddf Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 25 Feb 2026 08:50:08 +0000
Subject: [PATCH] feat: add aria-labels to mobile navigation and header buttons

Added `aria-label` attributes to `MobileNav` links and `DashboardLayout` header buttons to improve accessibility for screen reader users. This addresses the issue where icon-only buttons lacked accessible names.

Co-authored-by: vireapp <260846454+vireapp@users.noreply.github.com>
---
 .Jules/palette.md             | 3 +++
 src/app/dashboard/layout.tsx  | 2 ++
 src/components/mobile-nav.tsx | 1 +
 3 files changed, 6 insertions(+)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..cea7de7
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2026-02-25 - Icon-Only Navigation Accessibility
+**Learning:** The `MobileNav` component used `Link` with only icons and decorative elements, relying on visual cues (color/icon) but lacking accessible names. This renders the primary navigation unusable for screen reader users on mobile. Similar pattern found in `DashboardLayout` header buttons which used `title` but lacked `aria-label`.
+**Action:** Always verify icon-only interactive elements (links/buttons) have `aria-label` or `sr-only` text, especially in critical navigation components.
diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx
index 4384c4c..2ce0955 100644
--- a/src/app/dashboard/layout.tsx
+++ b/src/app/dashboard/layout.tsx
@@ -73,6 +73,7 @@ export default async function DashboardLayout({
                                     size="icon"
                                     asChild
                                     title="Settings"
+                                    aria-label="Settings"
                                     className="hover:bg-muted hover:text-foreground rounded-full w-9 h-9 md:w-10 md:h-10"
                                 >
                                     <Link href="/dashboard/settings">
@@ -92,6 +93,7 @@ export default async function DashboardLayout({
                                         size="icon"
                                         type="submit"
                                         title="Logout"
+                                        aria-label="Logout"
                                         className="hover:bg-red-500/20 hover:text-red-400 rounded-full transition-colors w-9 h-9 md:w-10 md:h-10"
                                     >
                                         <LogOut className="w-5 h-5 md:w-4 md:h-4" />
diff --git a/src/components/mobile-nav.tsx b/src/components/mobile-nav.tsx
index 3640418..adbd331 100644
--- a/src/components/mobile-nav.tsx
+++ b/src/components/mobile-nav.tsx
@@ -56,6 +56,7 @@ export function MobileNav() {
               <Link
                 key={item.href}
                 href={item.href}
+                aria-label={item.title}
                 className="relative flex flex-col items-center justify-center w-12 h-12 sm:w-14 sm:h-14 rounded-xl"
               >
                 {/* Active Background Pill */}