Skip to content

Add role="status" and aria-live to Spinner so loading states are announced to screen readers #123

Description

@Jagadeeshftw

📌 Description

Spinner (src/components/Spinner.tsx) renders a spinning glyph and a text label but exposes no ARIA semantics, so screen-reader users get no announcement when a panel (e.g. AnchorDetail, SettlementDetail, PoolsPanel) switches into a loading state. The spinning span is already aria-hidden, but the wrapping element carries no role or live-region attribute.

🧩 Requirements and context

  • Add role="status" and aria-live="polite" to Spinner's root element so its label text is announced when it mounts.
  • Keep the visual aria-hidden spinner glyph unchanged.
  • Do not change Spinner's props API (label).

🛠️ Suggested execution

  • Update src/components/Spinner.tsx to add role="status" and aria-live="polite" to the wrapping div.
  • Extend src/components/Spinner.test.tsx to assert the role/aria-live attributes are present and the label text is queryable via getByRole("status").
  • Spot-check that pages embedding Spinner (e.g. src/app/anchors/loading.tsx) don't end up with duplicate/competing live regions.

✅ Acceptance criteria

  • Spinner's root element has role="status" and aria-live="polite".
  • A screen reader announces the label text when Spinner mounts.
  • Existing visual rendering and props are unchanged.

🔒 Security notes

No new attack surface; purely an accessibility fix.

📋 Guidelines

  • Minimum 95% test coverage
  • Clear documentation
  • Timeframe: 96 hours

Metadata

Metadata

Assignees

Labels

GrantFox OSSIssue tracked in GrantFox OSSMaybe RewardedIssue may be eligible for a GrantFox rewardOfficial Campaign | FWC26Campaign: Official Campaign | FWC26accessibilityAccessibility (WCAG)bugSomething isn't working

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions