From 0e7725e33003af79e12dc329e42388c6deecd6e3 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Thu, 15 Oct 2026 06:03:30 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20`aria-current`?= =?UTF-8?q?=20to=20active=20thread=20selection?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 💡 What: Added `aria-current="true"` to active navigation items in ThreadSidebar. 🎯 Why: Screen readers now announce which thread or team is currently selected, not just sighted users. ♿ Accessibility: Improved semantic state for list navigation. Co-authored-by: bobdivx <6737167+bobdivx@users.noreply.github.com> --- .Jules/palette.md | 4 ++++ apps/web/src/components/chat/ThreadSidebar.tsx | 2 ++ 2 files changed, 6 insertions(+) diff --git a/.Jules/palette.md b/.Jules/palette.md index af7c5c8332..811f24d7d5 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -1 +1,5 @@ ## 2025-05-24 - Accessibility improvements in Toast component\n**Learning:** The Toast component used an icon-only button without an ARIA label. Added an aria-label with the translation 'Fermer', matching other close buttons in the app.\n**Action:** When adding close buttons, ensure they have proper aria-labels in French ('Fermer') to match the app's language. + +## 2024-06-25 - Sidebar list navigation accessibility +**Learning:** Found that list-style navigation items (like the `ThreadSidebar`) used conditional background colors to indicate active states (`bg-[var(--color-accent-soft)]`), but completely lacked programmatic indicators for screen readers. This pattern is likely present in other custom sidebar lists. +**Action:** Always add `aria-current="true"` (or `"page"` if it's a full page navigation) alongside visual "active" states in list selections to ensure state is announced to screen readers. diff --git a/apps/web/src/components/chat/ThreadSidebar.tsx b/apps/web/src/components/chat/ThreadSidebar.tsx index 67ababe676..6591db0e40 100644 --- a/apps/web/src/components/chat/ThreadSidebar.tsx +++ b/apps/web/src/components/chat/ThreadSidebar.tsx @@ -30,6 +30,7 @@ export function ThreadSidebar({ rows, selected, onSelect, error, creating, busy,