📌 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
🔒 Security notes
No new attack surface; purely an accessibility fix.
📋 Guidelines
- Minimum 95% test coverage
- Clear documentation
- Timeframe: 96 hours
📌 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 spinningspanis alreadyaria-hidden, but the wrapping element carries noroleor live-region attribute.🧩 Requirements and context
role="status"andaria-live="polite"to Spinner's root element so itslabeltext is announced when it mounts.aria-hiddenspinner glyph unchanged.label).🛠️ Suggested execution
src/components/Spinner.tsxto addrole="status"andaria-live="polite"to the wrappingdiv.src/components/Spinner.test.tsxto assert the role/aria-live attributes are present and the label text is queryable viagetByRole("status").Spinner(e.g.src/app/anchors/loading.tsx) don't end up with duplicate/competing live regions.✅ Acceptance criteria
role="status"andaria-live="polite".🔒 Security notes
No new attack surface; purely an accessibility fix.
📋 Guidelines