diff --git a/.Jules/palette.md b/.Jules/palette.md new file mode 100644 index 0000000..d6cdb4a --- /dev/null +++ b/.Jules/palette.md @@ -0,0 +1,9 @@ +# Palette's Journal + +## 2024-05-22 - [Initial Setup] +**Learning:** This journal was missing, so I created it to track critical UX/accessibility learnings. +**Action:** Ensure this file is checked before starting work in the future. + +## 2024-05-22 - [Dynamic State Labels] +**Learning:** Dynamic state indicators (like notification badges or status dots) often lack accessible text equivalents in this codebase, relying solely on visual cues (colors/dots). +**Action:** Always check icon-only buttons for `aria-label` and ensure the label reflects the *current state* (e.g., "Notifications, 3 unread") rather than just the static name ("Notifications"). diff --git a/src/components/notifications/notification-bell.tsx b/src/components/notifications/notification-bell.tsx index 318e870..9b4ea47 100644 --- a/src/components/notifications/notification-bell.tsx +++ b/src/components/notifications/notification-bell.tsx @@ -82,10 +82,14 @@ export function NotificationBell() { variant="ghost" size="icon" className="relative text-foreground/70 hover:text-foreground hover:bg-accent/10" + aria-label={count > 0 ? `Notifications, ${count} unread` : "Notifications"} > - +