Skip to content

[Frontend] Button loading state lacks aria-busy and accessible spinner label #569

Description

@ogazboiz

Telegram: https://t.me/+DOylgFv1jyJlNzM0

Why this matters

The shared Button (frontend/src/components/ui/Button.tsx) shows a spinner SVG when loading is true, but the button gets no aria-busy="true" and the spinner has no accessible name. Screen-reader users get no indication the action is in progress; the disabled state is conveyed but not the "loading" semantics. This affects every loading button in the app (create, withdraw, top-up, cancel).

Acceptance criteria

  • Set aria-busy={loading} on the button
  • Mark the spinner aria-hidden="true" and add an accessible loading indicator (e.g. visually-hidden "Loading" text) when loading
  • No visual regression

Files to touch

  • frontend/src/components/ui/Button.tsx

Out of scope

  • Per-button copy changes.

Metadata

Metadata

Assignees

Labels

Stellar WaveIssues in the Stellar wave programfrontendFrontend related tasksgood first issueGood for newcomersuiUser interface refinement

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions