Skip to content

Icon-only buttons have no accessible name and status dots are colour-only #430

Description

@charlesrhoward

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

  1. Add an aria-label describing the action to each button ("Copy code", "Scroll to bottom", and so on).
  2. 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.
  3. Add a DialogTitle (visually hidden is fine) to the flow-run-details dialog.

Exit criteria

  • Playwright spec tests/e2e/a11y-names.spec.ts: on /control and the workspace page, assert getByRole("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.
  • Running the app with axe DevTools on /control and 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 test pass.

https://claude.ai/code/session_01SQ4nS96XYRztd5w9QkubPf

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Hygiene, coverage, performance, accessibility.a11yAccessibility.ux

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions