From e3bca6c5a8097be5e96394352015fed10c35aeba Mon Sep 17 00:00:00 2001
From: Neil <4138956+nwparker@users.noreply.github.com>
Date: Sat, 10 Oct 2026 00:34:54 -0700
Subject: [PATCH] fix(a11y): name Agent Dashboard column regions (#26865)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Name Agent Dashboard columns using their translated visible headings.

Co-authored-by: Matheus Breguêz <matbrgz@gmail.com>
---
 .../AgentKanbanBoard.test.tsx                 | 23 +++++++++++++++++++
 .../dashboard-popout/AgentKanbanBoard.tsx     |  9 ++++++--
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/renderer/src/components/dashboard-popout/AgentKanbanBoard.test.tsx b/src/renderer/src/components/dashboard-popout/AgentKanbanBoard.test.tsx
index 173a1346d34..80eb86f1691 100644
--- a/src/renderer/src/components/dashboard-popout/AgentKanbanBoard.test.tsx
+++ b/src/renderer/src/components/dashboard-popout/AgentKanbanBoard.test.tsx
@@ -127,6 +127,29 @@ describe('AgentKanbanBoard', () => {
     expect(screen.getByText('Needs You')).toBeInTheDocument()
   })
 
+  it('names the visible column regions and keeps cards inside their region', () => {
+    renderBoard([card({ bucket: 'attention', worktreeName: 'needs-review' })])
+
+    expect(
+      screen.getAllByRole('region').map((region) => region.getAttribute('aria-label'))
+    ).toEqual(['Needs You', 'Working', 'Done'])
+    expect(
+      within(screen.getByRole('region', { name: 'Needs You' })).getByText('needs-review')
+    ).toBeInTheDocument()
+    expect(screen.queryByRole('region', { name: 'Idle' })).not.toBeInTheDocument()
+  })
+
+  it('uses the visible translated names for all regions when idle agents are shown', async () => {
+    await i18n.changeLanguage('zh')
+    renderBoard([], { showIdle: true })
+
+    expect(screen.getAllByRole('region')).toHaveLength(4)
+    for (const name of ['需要你', '工作中', '已完成', '空闲']) {
+      const region = screen.getByRole('region', { name })
+      expect(within(region).getByText(name)).toBeInTheDocument()
+    }
+  })
+
   it('offers project filters without agent-state map filters', async () => {
     renderBoard([card({ paneKey: 'busy' })])
 
diff --git a/src/renderer/src/components/dashboard-popout/AgentKanbanBoard.tsx b/src/renderer/src/components/dashboard-popout/AgentKanbanBoard.tsx
index 067ed2a2136..cc1669e0ca2 100644
--- a/src/renderer/src/components/dashboard-popout/AgentKanbanBoard.tsx
+++ b/src/renderer/src/components/dashboard-popout/AgentKanbanBoard.tsx
@@ -80,13 +80,18 @@ function KanbanColumn({
   now: number
   onOpenTerminal: (card: DashboardCard) => void
 }): React.JSX.Element {
+  const label = bucketLabel(bucket)
+
   return (
     // Why: attention no longer tints the whole column — the cards inside carry
     // their own state color, so a column border would double-signal it.
-    <section className="flex min-w-[264px] flex-1 flex-col rounded-xl border border-border/60 bg-muted/30">
+    <section
+      aria-label={label}
+      className="flex min-w-[264px] flex-1 flex-col rounded-xl border border-border/60 bg-muted/30"
+    >
       <header className="flex items-center gap-2 px-3 py-2">
         <span className="text-[11px] font-semibold uppercase tracking-[0.05em] text-muted-foreground">
-          {bucketLabel(bucket)}
+          {label}
         </span>
         <span className="ml-auto rounded-full bg-background px-1.5 text-[11px] tabular-nums text-muted-foreground">
           {cards.length}