From 98fbd7594f94caace0618821aede84b82bbc16b7 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sat, 13 Jun 2026 05:49:39 +0000
Subject: [PATCH 1/4] fix(accessibility): add aria-controls to collapsible
 table groups

Linked the toggle button to the expanding/collapsing tbody region with an `id` and `aria-controls` for both UsecaseTable and ActorTable components.
---
 .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..374fb2ac
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-05-24 - Accessibility for Collapsible Table Groupings
+**Learning:** Collapsible table groupings (`tbody` rows expanding/collapsing on toggle) were missing `aria-controls` bindings to screen readers, preventing them from understanding the relationship between the toggle and the controlled content.
+**Action:** When implementing expand/collapse functionalities, always add an `id` to the controlled region (like `tbody`) and link it back to the toggle button via `aria-controls`, in addition to `aria-expanded`.
diff --git a/apps/app/app/components/ActorTable.tsx b/apps/app/app/components/ActorTable.tsx
index 1cc5a5d0..3306fc40 100644
--- a/apps/app/app/components/ActorTable.tsx
+++ b/apps/app/app/components/ActorTable.tsx
@@ -148,14 +148,16 @@ export function ActorTable({
         ) : (
           groups.map(([type, items]) => {
             const isOpen = !collapsed.has(type);
+            const groupId = `actor-group-${type}`;
             return (
-              <tbody key={type}>
+              <tbody key={type} id={groupId}>
                 <tr className="border-t border-border bg-muted/30">
                   <td colSpan={COLUMN_COUNT} className="py-1.5 pr-3 pl-4">
                     <button
                       type="button"
                       onClick={() => toggle(type)}
                       aria-expanded={isOpen}
+                      aria-controls={groupId}
                       className="inline-flex items-center gap-2 rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
                     >
                       <ChevronRight
diff --git a/apps/app/app/components/UsecaseTable.tsx b/apps/app/app/components/UsecaseTable.tsx
index d8cf56a4..a7a1a124 100644
--- a/apps/app/app/components/UsecaseTable.tsx
+++ b/apps/app/app/components/UsecaseTable.tsx
@@ -193,14 +193,16 @@ export function UsecaseTable({
         ) : (
           groups.map(([level, items]) => {
             const isOpen = !collapsed.has(level);
+            const groupId = `usecase-group-${level}`;
             return (
-              <tbody key={level}>
+              <tbody key={level} id={groupId}>
                 <tr className="border-t border-border bg-muted/30">
                   <td colSpan={COLUMN_COUNT} className="py-1.5 pr-3 pl-4">
                     <button
                       type="button"
                       onClick={() => toggle(level)}
                       aria-expanded={isOpen}
+                      aria-controls={groupId}
                       className="inline-flex items-center gap-2 rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
                     >
                       <ChevronRight

From dec0eaba66b95c9830b3339b7cff6bfbbcc13ffe Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sat, 13 Jun 2026 06:15:17 +0000
Subject: [PATCH 2/4] fix(accessibility): fix test failing due to ai-guide
 update

Updated test expectation in `apps/cli/tests/e2e-cli/UC-033.test.ts` to match the newly updated text in `apps/api/src/application/ai-guide.ts`.
---
 apps/cli/tests/e2e-cli/UC-033.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/cli/tests/e2e-cli/UC-033.test.ts b/apps/cli/tests/e2e-cli/UC-033.test.ts
index 3c91fbd3..91f0d004 100644
--- a/apps/cli/tests/e2e-cli/UC-033.test.ts
+++ b/apps/cli/tests/e2e-cli/UC-033.test.ts
@@ -27,7 +27,7 @@ describe("UC-033 CLI - Learn how to use vspec", () => {
       );
       expect(result.stdout).toContain("vspec usecase add-stakeholder");
       expect(result.stdout).toContain("Existing use case edits");
-      expect(result.stdout).toContain("`vspec step add` appends");
+      expect(result.stdout).toContain("Use `vspec step add --at <n>` to insert a new step");
       expect(result.stdout).toContain(
         "vspec scenario add POCKET-001 --type EXTENSION --at 2a"
       );

From 93b5c0d950fc28b1bb17ac160f22ce3d663ac90c Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sat, 13 Jun 2026 06:31:03 +0000
Subject: [PATCH 3/4] fix(accessibility): add aria-controls to collapsible
 table groups and fix test

Added aria-controls to UsecaseTable and ActorTable collapsible groups.
Updated test expectation in apps/cli/tests/e2e-cli/UC-033.test.ts to match the newly updated text in apps/api/src/application/ai-guide.ts.
---
 .jules/palette.md                     | 1 +
 apps/cli/tests/e2e-cli/UC-033.test.ts | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/.jules/palette.md b/.jules/palette.md
index 374fb2ac..b3a74c43 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -1,3 +1,4 @@
 ## 2024-05-24 - Accessibility for Collapsible Table Groupings
+
 **Learning:** Collapsible table groupings (`tbody` rows expanding/collapsing on toggle) were missing `aria-controls` bindings to screen readers, preventing them from understanding the relationship between the toggle and the controlled content.
 **Action:** When implementing expand/collapse functionalities, always add an `id` to the controlled region (like `tbody`) and link it back to the toggle button via `aria-controls`, in addition to `aria-expanded`.
diff --git a/apps/cli/tests/e2e-cli/UC-033.test.ts b/apps/cli/tests/e2e-cli/UC-033.test.ts
index 91f0d004..e363c5b6 100644
--- a/apps/cli/tests/e2e-cli/UC-033.test.ts
+++ b/apps/cli/tests/e2e-cli/UC-033.test.ts
@@ -27,7 +27,9 @@ describe("UC-033 CLI - Learn how to use vspec", () => {
       );
       expect(result.stdout).toContain("vspec usecase add-stakeholder");
       expect(result.stdout).toContain("Existing use case edits");
-      expect(result.stdout).toContain("Use `vspec step add --at <n>` to insert a new step");
+      expect(result.stdout).toContain(
+        "Use `vspec step add --at <n>` to insert a new step"
+      );
       expect(result.stdout).toContain(
         "vspec scenario add POCKET-001 --type EXTENSION --at 2a"
       );

From a8e0ec6b86d6f077d6980050665a06a88a20bca6 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sat, 13 Jun 2026 06:54:06 +0000
Subject: [PATCH 4/4] fix(accessibility): add aria-controls to collapsible
 table groups and fix test

Added aria-controls to UsecaseTable and ActorTable collapsible groups.
Updated test expectation in apps/cli/tests/e2e-cli/UC-033.test.ts to match the newly updated text in apps/api/src/application/ai-guide.ts.