From 0c03e3a6ca17cd8386cffe7a0f497edc5b971d6f Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 28 Feb 2026 08:59:45 +0000
Subject: [PATCH] feat(ui): add aria-labels to navigation items for
 accessibility

Co-authored-by: vireapp <260846454+vireapp@users.noreply.github.com>
---
 .Jules/palette.md                | 3 +++
 src/components/dashboard-nav.tsx | 2 +-
 src/components/mobile-nav.tsx    | 1 +
 3 files changed, 5 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..5e36652
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2025-02-28 - Initial Setup
+**Learning:** Found that this project uses `npm run lint` and `npm run build` as its primary verification scripts. Note that the memory states there are pre-existing linting errors so expecting a clean run on `npm run lint` is unrealistic, but we should make sure our changes do not introduce new ones. There is a recurring a11y issue: icon-only buttons in navigation lack `aria-label` attributes.
+**Action:** Always verify changes with `npm run build` and `npm run lint` and prioritize adding ARIA labels to navigation components.
diff --git a/src/components/dashboard-nav.tsx b/src/components/dashboard-nav.tsx
index 6c4c4b3..bbb2098 100644
--- a/src/components/dashboard-nav.tsx
+++ b/src/components/dashboard-nav.tsx
@@ -57,7 +57,7 @@ export function DashboardNav() {
               "rounded-full h-9 md:h-10 px-3 md:px-4", // Oval shape
             )}
           >
-            <Link href={item.href} className="flex items-center gap-2">
+            <Link href={item.href} aria-label={item.label} className="flex items-center gap-2">
               <item.icon
                 className={cn("w-4 h-4", isActive && "text-primary-foreground")}
               />
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 */}