Skip to content

feat(a11y): add automated axe checks for Dashboard, Bridges, Watchlist - #32

Merged
Meshmulla merged 1 commit into
stellar-kracken:mainfrom
starfishkrq:feat/axe-accessibility-checks-27
Aug 29, 2026
Merged

feat(a11y): add automated axe checks for Dashboard, Bridges, Watchlist#32
Meshmulla merged 1 commit into
stellar-kracken:mainfrom
starfishkrq:feat/axe-accessibility-checks-27

Conversation

@starfishkrq

Copy link
Copy Markdown
Contributor

Closes #27

  • Wire vitest-axe toHaveNoViolations matcher into shared test setup (src/test/setup.ts)
  • Add TypeScript augmentation for toHaveNoViolations across the suite (src/test/vitest-axe.d.ts)
  • Add axe assertions for the four highest-traffic pages:
    • src/pages/Dashboard.a11y.test.tsx — mocks all heavy sub-components/hooks, 15s timeout for complex page scan
    • src/pages/Bridges.a11y.test.tsx — mocks hooks and store selectors, verifies rendered bridge grid
    • src/pages/Watchlist.a11y.test.tsx — covers empty state and populated state
    • src/pages/Alerts.a11y.test.tsx — covers loaded and loading states via useIncidentFeed mock
  • Fix axe violations surfaced on first pass:
    • src/components/alerts/CompactAlertList.tsx: promote role=table to role=grid, add role=columnheader/gridcell to all header/data cells, add aria-sort to column headers, add aria-label to sort buttons, mark decorative SVG arrows aria-hidden
    • src/components/BridgeStatusCard.tsx: replace h3 with p to remove heading-order violation inside card
  • All four pages pass toHaveNoViolations with no suppressions
  • Tests run automatically under the existing Unit tests CI step

…t, Alerts (stellar-kracken#27)

- Wire vitest-axe toHaveNoViolations matcher into shared test setup (src/test/setup.ts)
- Add TypeScript augmentation for toHaveNoViolations across the suite (src/test/vitest-axe.d.ts)
- Add axe assertions for the four highest-traffic pages:
  - src/pages/Dashboard.a11y.test.tsx — mocks all heavy sub-components/hooks, 15s timeout for complex page scan
  - src/pages/Bridges.a11y.test.tsx — mocks hooks and store selectors, verifies rendered bridge grid
  - src/pages/Watchlist.a11y.test.tsx — covers empty state and populated state
  - src/pages/Alerts.a11y.test.tsx — covers loaded and loading states via useIncidentFeed mock
- Fix axe violations surfaced on first pass:
  - src/components/alerts/CompactAlertList.tsx: promote role=table to role=grid, add role=columnheader/gridcell to all header/data cells, add aria-sort to column headers, add aria-label to sort buttons, mark decorative SVG arrows aria-hidden
  - src/components/BridgeStatusCard.tsx: replace h3 with p to remove heading-order violation inside card
- All four pages pass toHaveNoViolations with no suppressions
- Tests run automatically under the existing Unit tests CI step
@Meshmulla
Meshmulla merged commit 0be13f6 into stellar-kracken:main Aug 29, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add automated accessibility (axe) checks and run them in CI

2 participants