From e8912bcb0c5b9ffeb9ed931b1948a26fe3684f3f Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Fri, 12 Jun 2026 05:43:17 +0000 Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20aria-contro?= =?UTF-8?q?ls=20to=20collapsible=20table=20groups?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit **What:** Added `aria-controls` attributes to the group toggle buttons in the `ActorTable` and `UsecaseTable` components, matching the toggled content's `id`. Added a `.Jules/palette.md` journal entry with this learning. **Why:** Screen reader users will now be able to explicitly understand which element is being expanded or collapsed when interacting with the group headers. **Accessibility:** Improved screen reader context for collapsible table groups. --- .Jules/palette.md | 3 +++ apps/app/app/components/ActorTable.tsx | 4 +++- apps/app/app/components/UsecaseTable.tsx | 4 +++- 3 files changed, 9 insertions(+), 2 deletions(-) create mode 100644 .Jules/palette.md diff --git a/.Jules/palette.md b/.Jules/palette.md new file mode 100644 index 00000000..1529a303 --- /dev/null +++ b/.Jules/palette.md @@ -0,0 +1,3 @@ +## 2024-05-24 - Group Toggle Accessibility +**Learning:** Found collapsible elements (like ``) in tables that lacked the `aria-controls` attribute on their respective `