From 2f0ad7ce56582d31a23ed78ee82e63b94429ed3c Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 22 Feb 2026 09:09:27 +0000
Subject: [PATCH] feat(ui): Add aria-labels to navigation links

- Adds aria-label to DashboardNav items for better screen reader support
- Adds aria-label to MobileNav items for better screen reader support
- Improves accessibility of icon-only navigation elements

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

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..89ddea7
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2025-05-23 - Accessibility in Mobile Navigation
+**Learning:** Mobile navigation components often rely solely on icons for visual simplicity, which can leave screen reader users without any context. In this project, `MobileNav` and `DashboardNav` (on mobile) had no text content for links.
+**Action:** When creating or reviewing mobile-first navigation, always ensure `aria-label` is present on icon-only interactive elements.
diff --git a/src/components/dashboard-nav.tsx b/src/components/dashboard-nav.tsx
index 6c4c4b3..6783984 100644
--- a/src/components/dashboard-nav.tsx
+++ b/src/components/dashboard-nav.tsx
@@ -49,6 +49,7 @@ export function DashboardNav() {
             variant="ghost"
             size="sm"
             asChild
+            aria-label={item.label}
             className={cn(
               "relative transition-all duration-300",
               isActive
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 */}