🎨 Palette: Add ARIA labels to responsive navigation links

.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.

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")}
               />

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 */}