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

Labels: bug, frontend, Stellar Wave, critical

The token picker in stream creation only shows which token is selected visually, so a screen-reader user can't tell what they've picked and can create a stream in the wrong asset.

In frontend/src/components/stream-creation/TokenStep.tsx:31-66, each token is a plain button and the selected state is conveyed purely through border color and a decorative check SVG. There's no role=radio/aria-checked, no aria-pressed, and the group has no role=radiogroup. Nothing reaches assistive tech. Picking the wrong asset here means the stream moves the wrong token, which is why this is marked critical.

What the fix has to hold to

  • Each token option exposes its selected state to assistive tech (role=radio + aria-checked, or aria-pressed on the buttons)
  • The container is a role=radiogroup with an accessible group label
  • Selecting a token is announced as checked/selected

Done when

  • Selection state exposed on each option
  • Container is a labelled radiogroup
  • Validation error associated with the group via aria-describedby
  • lint + typecheck + tests green

Where to start
All in TokenStep.tsx. Out of scope: TemplateStep card styling and arrow-key navigation between options (that can be a follow-up). Small change.

Metadata

Metadata

Assignees

Labels

GrantFox OSSIssue tracked in GrantFox OSSMaybe RewardedIssue may be eligible for a GrantFox rewardOfficial Campaign | FWC26Campaign: Official Campaign | FWC26Stellar WaveIssues in the Stellar wave programbugSomething isn't workingcriticalfrontendFrontend related tasks

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions