Skip to content

[Frontend] TokenStep token cards convey selection only visually - no radio/aria-checked semantics #859

Description

@grantfox-oss

Telegram (ask questions / claim the issue here first): https://t.me/+DOylgFv1jyJlNzM0

Why this matters

frontend/src/components/stream-creation/TokenStep.tsx:31-66 - each token is a plain button whose selected state is shown only via border color + a decorative check SVG. There is no role=radio/aria-checked or aria-pressed, and the group has no role=radiogroup. A screen-reader user cannot tell which token is currently selected, so they can submit a stream in the wrong asset.

Acceptance criteria

  • Token options expose selected state to assistive tech (role=radio + aria-checked, or aria-pressed on the buttons)
  • The container uses role=radiogroup with an accessible group label
  • Selecting a token is announced as checked/selected by screen readers
  • Validation error is associated with the group via aria-describedby

Files to touch

  • frontend/src/components/stream-creation/TokenStep.tsx

Out of scope

  • TemplateStep card styling
  • Keyboard arrow-key navigation between options

Metadata

Metadata

Assignees

Labels

Stellar WaveIssues in the Stellar wave programbugSomething isn't workingcriticalfrontendFrontend related tasks

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions