developer/galaxy-game
1
1
Fork 0
Code Issues Pull Requests Actions Packages Releases Wiki Activity

feat(ui): accessibility pass — WCAG 2.2 AA (F2) #27

Merged
developer merged 3 commits from feature/ui-finalize-f2-a11y into development 2026-05-22 06:43:40 +00:00
Conversation 0 Commits 3 Files Changed 29
+572 -58
developer commented 2026-05-22 06:25:29 +00:00
Owner
Copy Link
Copy Source

F2 — Accessibility (WCAG 2.2 AA)

Brings login, lobby, and the in-game shell to WCAG 2.2 AA, with an
automated axe gate over every top-level view. From ui/PLAN-finalize.md F2.

What changed

  • Primitives (ui/frontend/src/lib/a11y/ + base.css): .sr-only,
    .skip-link, the trapFocus action (modal focus trap + restore), the
    restoreFocus action (menu focus restore), and the --color-focus
    visible focus ring.
  • In-game shell: skip link + focusable main landmark; WAI-ARIA
    sidebar tabs (roving tabindex, arrow/Home/End keys, tabpanel
    wiring); menu Escape + focus-restore on account / view / turn-navigator
    / map-toggles / mobile-more; mail compose as a role="dialog" modal
    with a focus trap and Escape.
  • login / lobby / lobby-create: skip link + main, field labels,
    role="alert" / role="status" live regions.
  • Map canvas: aria-label naming it a visual overview; all its data
    (planets, ship groups, routes) is reachable by keyboard via the sidebar
    inspector and the tables view (accessible alternative — in-canvas
    keyboard navigation is deferred to ROADMAP.md).

Gates (new, chromium-desktop only)

  • tests/e2e/a11y-axe.spec.ts — @axe-core/playwright scans login,
    lobby, lobby/create, and the in-game map / report / mail / battle /
    science-designer / table for WCAG 2.2 AA violations. Zero violations.
  • tests/e2e/a11y-keyboard.spec.ts — skip link, menu Escape+restore,
    sidebar tab arrow roving.

Docs

ui/docs/a11y.md (+ index entry). Marks F1 and F2 done in
ui/PLAN-finalize.md.

Verification

pnpm check 0/0; pnpm test 735 passing; the two a11y specs pass
locally on chromium-desktop (12/12). Adds the @axe-core/playwright
dev dependency.

🤖 Generated with Claude Code

## F2 — Accessibility (WCAG 2.2 AA) Brings login, lobby, and the in-game shell to WCAG 2.2 AA, with an automated axe gate over every top-level view. From `ui/PLAN-finalize.md` F2. ### What changed - **Primitives** (`ui/frontend/src/lib/a11y/` + `base.css`): `.sr-only`, `.skip-link`, the `trapFocus` action (modal focus trap + restore), the `restoreFocus` action (menu focus restore), and the `--color-focus` visible focus ring. - **In-game shell**: skip link + focusable `main` landmark; WAI-ARIA sidebar tabs (roving `tabindex`, arrow/Home/End keys, `tabpanel` wiring); menu Escape + focus-restore on account / view / turn-navigator / map-toggles / mobile-more; mail compose as a `role="dialog"` modal with a focus trap and Escape. - **login / lobby / lobby-create**: skip link + `main`, field labels, `role="alert"` / `role="status"` live regions. - **Map canvas**: `aria-label` naming it a visual overview; all its data (planets, ship groups, routes) is reachable by keyboard via the sidebar inspector and the tables view (accessible alternative — in-canvas keyboard navigation is deferred to `ROADMAP.md`). ### Gates (new, chromium-desktop only) - `tests/e2e/a11y-axe.spec.ts` — `@axe-core/playwright` scans login, lobby, lobby/create, and the in-game map / report / mail / battle / science-designer / table for WCAG 2.2 AA violations. **Zero violations.** - `tests/e2e/a11y-keyboard.spec.ts` — skip link, menu Escape+restore, sidebar tab arrow roving. ### Docs `ui/docs/a11y.md` (+ index entry). Marks F1 and F2 done in `ui/PLAN-finalize.md`. ### Verification `pnpm check` 0/0; `pnpm test` 735 passing; the two a11y specs pass locally on chromium-desktop (12/12). Adds the `@axe-core/playwright` dev dependency. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
developer added 1 commit 2026-05-22 06:25:29 +00:00
feat(ui): accessibility pass — WCAG 2.2 AA for login/lobby/shell (F2)
Tests · UI / test (push) Waiting to run
Details
Tests · UI / test (pull_request) Successful in 2m9s
Details
642c5b7322 
Add the a11y foundation and bring login, lobby, and the in-game shell to
WCAG 2.2 AA:

- Primitives: .sr-only + .skip-link (base.css), trapFocus (modal focus
  trap + restore) and restoreFocus (menu focus restore) actions, the
  --color-focus visible ring.
- In-game shell: skip link + focusable main landmark; WAI-ARIA sidebar
  tabs (roving tabindex, arrow/Home/End, tabpanel wiring); menu Escape +
  focus restore (account / view / turn-navigator / map-toggles /
  bottom-tabs); mail compose as a role=dialog modal with a focus trap.
- login / lobby / lobby-create: skip link + main landmark, field labels,
  role=alert / role=status live regions.
- Map canvas: aria-label naming it a visual overview, with its data
  reachable by keyboard via the sidebar inspector and tables (accessible
  alternative; in-canvas keyboard nav deferred).

Gates (chromium-desktop): tests/e2e/a11y-axe.spec.ts scans every
top-level view for WCAG 2.2 AA violations (zero); a11y-keyboard.spec.ts
covers the skip link, menu Escape+restore, and tab roving. Adds
@axe-core/playwright. Docs: ui/docs/a11y.md (+ index). Marks F1 and F2
done in ui/PLAN-finalize.md.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
developer added 1 commit 2026-05-22 06:36:19 +00:00
feat(ui): default theme to system (follow OS light/dark)
Tests · UI / test (push) Has been cancelled
Details
Tests · UI / test (pull_request) Failing after 2m7s
Details
e193f3ca88 
Light has been signed off, so the theme store's default choice is now
`system` (it was `dark` during the incremental migration). This matches
the app.html pre-paint guard, which already resolved an unset choice via
prefers-color-scheme — removing the brief boot-time mismatch where the
store re-pinned dark. Users still pin light/dark via the account-menu
picker. Updates the store default + its test and the design-system /
finalize-plan docs.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
developer added 1 commit 2026-05-22 06:40:40 +00:00
fix(ui): darken light-theme danger to meet AA contrast
Tests · UI / test (push) Has been cancelled
Details
Tests · UI / test (pull_request) Successful in 2m33s
Details
70f2973396 
With the default theme now following the OS, Playwright renders the light
theme, where the previous light `--color-danger` (#c84d4d, ~3.9:1 on a
near-white surface) failed WCAG 1.4.3 on error text — caught by the axe
scan of the science designer's empty-name error. Darken light
`--color-danger` to #c0392b (~5.5:1 on white; white-on-danger fills stay
≥5:1). Dark theme unchanged.
developer merged commit c56050f5dd into development 2026-05-22 06:43:40 +00:00
developer deleted branch feature/ui-finalize-f2-a11y 2026-05-22 06:43:40 +00:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
Clear labels
Compat/Breaking
Breaking change that won't be backward compatible
 Kind/Bug
Something is not working
 Kind/Documentation
Documentation changes
 Kind/Enhancement
Improve existing functionality
 Kind/Feature
New functionality
 Kind/Question
Any question is not related to feature or fix
 Kind/Security
This is security issue
 Kind/Testing
Issue or pull request related to testing
Priority
Critical
1
The priority is critical
Priority
High
2
The priority is high
Priority
Low
4
The priority is low
Priority
Medium
3
The priority is medium
Reviewed
Confirmed
1
Issue has been confirmed
Reviewed
Duplicate
2
This issue or pull request already exists
Reviewed
Invalid
3
Invalid issue
Reviewed
Won't Fix
3
This issue won't be fixed
Status
Abandoned
3
Somebody has started to work on this but abandoned work
Status
Blocked
1
Something is blocking this issue or pull request
Status
Need More Info
2
Feedback is required to reproduce issue or to continue work
claude
blocked
Blocked by Claude - awaiting answer
claude
done
Issue was completed by Claude
claude
in-review
Claude awaits review on PR
claude
skipped
Issue skipped/closed by Claude due to opener's decision
claude
working
Taken by Claude for work
ready
Ready to be taken for work
No Label
Milestone
No items
No Milestone
Assignees
Clear assignees
owner (Ilia) developer
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: developer/galaxy-game#27
Delete Branch "feature/ui-finalize-f2-a11y"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?