Accessibility pass #28

New issue

Open

opened 2026-04-19 07:23:34 +00:00 by forgejo-lila · 0 comments

forgejo-lila commented

2026-04-19 07:23:34 +00:00

Owner

Context

The quiz UI has not been audited for accessibility. Keyboard users and screen reader users may not be able to use the app effectively.

What to do

Audit and fix accessibility across the quiz flow.

Files to change

apps/web/src/components/game/OptionButton.tsx — ARIA labels, focus visibility, keyboard selection (Enter/Space).
apps/web/src/components/game/QuestionCard.tsx — ARIA live regions for screen readers.
apps/web/src/components/game/GameSetup.tsx — labeled form controls, keyboard navigation.
apps/web/src/components/game/ScoreScreen.tsx — announce score to screen readers.
apps/web/src/routes/login.tsx — keyboard accessible buttons.

Acceptance criteria

All interactive elements reachable via keyboard (Tab, Enter, Space, Escape)
Focus managed during quiz flow
All buttons and form controls have accessible names
New questions and results announced via ARIA live regions
No critical issues in axe DevTools or Lighthouse accessibility audit

Notes

shadcn/ui components are generally accessible out of the box but custom components need manual attention. The submit-before-send flow needs clear focus indication.

## Context The quiz UI has not been audited for accessibility. Keyboard users and screen reader users may not be able to use the app effectively. ## What to do Audit and fix accessibility across the quiz flow. ## Files to change - `apps/web/src/components/game/OptionButton.tsx` — ARIA labels, focus visibility, keyboard selection (Enter/Space). - `apps/web/src/components/game/QuestionCard.tsx` — ARIA live regions for screen readers. - `apps/web/src/components/game/GameSetup.tsx` — labeled form controls, keyboard navigation. - `apps/web/src/components/game/ScoreScreen.tsx` — announce score to screen readers. - `apps/web/src/routes/login.tsx` — keyboard accessible buttons. ## Acceptance criteria - All interactive elements reachable via keyboard (Tab, Enter, Space, Escape) - Focus managed during quiz flow - All buttons and form controls have accessible names - New questions and results announced via ARIA live regions - No critical issues in axe DevTools or Lighthouse accessibility audit ## Notes shadcn/ui components are generally accessible out of the box but custom components need manual attention. The submit-before-send flow needs clear focus indication.