From e9eb39b15ba03dc17a5825a8489775d131efbdc9 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 8 Mar 2026 08:59:18 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20ARIA=20labels?=
 =?UTF-8?q?=20to=20responsive=20navigation=20links?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added `aria-label` to `<Link>` elements in `DashboardNav` (`src/components/dashboard-nav.tsx`)
- Added `aria-label` to `<Link>` elements in `MobileNav` (`src/components/mobile-nav.tsx`)
- Created a new entry in `.Jules/palette.md` documenting this accessibility learning.

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..ab8892a
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-05-22 - Responsive Navigations and Accessibility
+**Learning:** When navigation components like `DashboardNav` hide text labels on mobile using `hidden md:inline` or when `MobileNav` uses purely visual icons without text, screen readers lose the context of the link if no accessible name is provided.
+**Action:** Always add `aria-label` to link elements in responsive navigation bars to ensure accessibility across all screen sizes.
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 */}