Problem
Twelve icon-only buttons have no aria-label, title or visually hidden text. Screen readers announce them as "button". Several status indicators are a coloured dot with no text alternative. One dialog has no title.
Where
Buttons (line numbers approximate, search for the icon-only <button or <Button nearby):
components/ai-elements/code-block.tsx:504 (copy)
components/ai-elements/terminal.tsx:150,179
components/ai-elements/conversation.tsx:92,160 (scroll to bottom)
components/ai-elements/commit.tsx:261
components/ai-elements/queue.tsx:132
components/ai-elements/stack-trace.tsx:356
components/ai-elements/environment-variables.tsx:305
components/panes/flows-pane/inspector-start.tsx:198
components/ui/sidebar.tsx:213
components/ui/calendar.tsx:188
Colour-only status:
components/command-palette.tsx:318,336 (green dot for running)
components/sandbox-chip.tsx:19-20
components/chat/mcp-status-button.tsx:16-23
Dialog:
components/panes/flow-run-details.tsx renders DialogContent without a DialogTitle.
Fix
- Add an
aria-label describing the action to each button ("Copy code", "Scroll to bottom", and so on).
- Give each status dot a sibling
<span className="sr-only">Running</span> or an aria-label on the dot, and add role="status" where the state changes live.
- Add a
DialogTitle (visually hidden is fine) to the flow-run-details dialog.
Exit criteria
https://claude.ai/code/session_01SQ4nS96XYRztd5w9QkubPf
Problem
Twelve icon-only buttons have no
aria-label,titleor visually hidden text. Screen readers announce them as "button". Several status indicators are a coloured dot with no text alternative. One dialog has no title.Where
Buttons (line numbers approximate, search for the icon-only
<buttonor<Buttonnearby):components/ai-elements/code-block.tsx:504(copy)components/ai-elements/terminal.tsx:150,179components/ai-elements/conversation.tsx:92,160(scroll to bottom)components/ai-elements/commit.tsx:261components/ai-elements/queue.tsx:132components/ai-elements/stack-trace.tsx:356components/ai-elements/environment-variables.tsx:305components/panes/flows-pane/inspector-start.tsx:198components/ui/sidebar.tsx:213components/ui/calendar.tsx:188Colour-only status:
components/command-palette.tsx:318,336(green dot for running)components/sandbox-chip.tsx:19-20components/chat/mcp-status-button.tsx:16-23Dialog:
components/panes/flow-run-details.tsxrendersDialogContentwithout aDialogTitle.Fix
aria-labeldescribing the action to each button ("Copy code", "Scroll to bottom", and so on).<span className="sr-only">Running</span>or anaria-labelon the dot, and addrole="status"where the state changes live.DialogTitle(visually hidden is fine) to the flow-run-details dialog.Exit criteria
tests/e2e/a11y-names.spec.ts: on/controland the workspace page, assertgetByRole("button", { name: "Copy code" })(and one name per fixed component that renders there) resolves, and assert the running-sandbox indicator has an accessible status text./controland the workspace page reports zero "Buttons must have discernible text" and zero "Dialog must have a title" violations. Post the summary in the PR.pnpm lint,pnpm typecheck,pnpm testpass.https://claude.ai/code/session_01SQ4nS96XYRztd5w9QkubPf