From 471cecbef4dc17eb9e17150675c4439e8cb96170 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Fri, 6 Mar 2026 09:07:39 +0000 Subject: [PATCH] feat(a11y): add dynamic aria-label to notification bell Co-authored-by: vireapp <260846454+vireapp@users.noreply.github.com> --- .Jules/palette.md | 3 +++ notification_bell_screenshot.png | Bin 0 -> 7202 bytes .../notifications/notification-bell.tsx | 1 + 3 files changed, 4 insertions(+) create mode 100644 .Jules/palette.md create mode 100644 notification_bell_screenshot.png diff --git a/.Jules/palette.md b/.Jules/palette.md new file mode 100644 index 0000000..aa970af --- /dev/null +++ b/.Jules/palette.md @@ -0,0 +1,3 @@ +## 2025-02-23 - Dynamic ARIA Labels on Icon-only Buttons +**Learning:** Icon-only interactive elements like notification bells often lack context-aware ARIA attributes. A static `aria-label="Notifications"` does not communicate crucial dynamic state (e.g., whether there are unread notifications) to assistive technologies. +**Action:** When creating or updating icon-only buttons that convey state visually (e.g., with a badge or unread count), ensure the `aria-label` dynamically reflects that state (e.g., `"Notifications, 3 unread"` instead of just `"Notifications"`). diff --git a/notification_bell_screenshot.png b/notification_bell_screenshot.png new file mode 100644 index 0000000000000000000000000000000000000000..86e36301cb4b773ab05387d9db3e4c2ee200b256 GIT binary patch literal 7202 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 0 ? `Notifications, ${count} unread` : "Notifications"} > {count > 0 && (