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 `