MotirBuilding in public
MOTIR · moooon
onMotir
You’re viewing a public project. Anyone can view it — no account needed. Sign in to submit, upvote, or comment on requests.View-only — you can’t edit work items
MOTIR-57

1.5.5 Accessibility audit + keyboard-navigation tests + axe-core CI integration

Done
Description

Estimate: 20m · Depends on: 1.5.4

Lock in the accessibility properties of the shell before any Epic-2-7 surfaces inherit them. Two layers of coverage:

  • Automated axe-core in Playwright: install @axe-core/playwright; add a new spec tests/e2e/shell-a11y.spec.ts that visits each shell-bearing route (/dashboard, /issues, /boards, /reports, /settings/workspace, /settings/project, /tokens) and runs axe.analyze() with the default WCAG 2.1 AA ruleset. Zero violations expected. Any violation present is either fixed in this Subtask or marked as a finding with an explicit ignore.
  • Keyboard-only navigation spec: tests/e2e/shell-keyboard.spec.ts drives the shell with keyboard only (no page.click). Sequence: load dashboard → tab through to skip-link → activate skip-link → tab into main → press ⌘K → palette opens → type "iss" → ↓ to first match → ↵ → URL is /issues → press ⌘\ → sidebar collapses → press ? → cheatsheet opens → esc closes. Every focusable interactive element must be reachable via tab; visible focus ring (the existing 1.0.5 :focus-visible ring) must paint on each.
  • aria assertions: assert aria-current="page" on the active sidebar item; aria-label on the navigation regions (top-nav, sidebar); aria-expanded on the sidebar collapse toggle; aria-modal="true" on the cmd-k Dialog. Playwright's role + aria-* selectors are the right tool.
  • Manual-audit log: produce a short docs/a11y/shell-audit.md documenting the manual checks performed (screen-reader smoke with VoiceOver / NVDA on the cheatsheet + palette; tested breakpoints; color contrast spot-checks via the design-system tokens). Future a11y Subtasks for Epic-2-7 surfaces extend this file.

CI wiring: the new specs run in the existing E2E job (pnpm test:e2e + the docker-compose Postgres). Axe results are attached to the Playwright HTML report; on failure, CI surfaces the rule + the element selector that violated it.

Acceptance criteria

  • @axe-core/playwright is a dev dependency.
  • tests/e2e/shell-a11y.spec.ts visits ≥6 shell-bearing routes and asserts zero axe violations on each (WCAG 2.1 AA).
  • tests/e2e/shell-keyboard.spec.ts drives the full keyboard-only sequence above with no page.click / page.tap calls.
  • aria-assertions in both specs: aria-current="page" on active sidebar item; aria-labels on nav regions; aria-expanded on collapse toggle; aria-modal="true" on cmd-k Dialog.
  • docs/a11y/shell-audit.md exists with a manual-audit log entry for 1.5.5.
  • Both new specs run in CI (the existing E2E job picks them up via glob); on failure CI report surfaces violating rule + selector.
  • All quality gates green; no regressions in the existing E2E suite.

Context refs

  • tests/e2e/multi-tenant-isolation.spec.ts + tests/e2e/projects-flow.spec.ts — existing Playwright patterns to mirror
  • tests/e2e/_helpers/db-reset.ts — the reset helper
  • app/(authed)/layout.tsx + components/ui/AppLayout.tsx + Sidebar.tsx + CommandPalette.tsx — the system under test
  • Playwright axe-core docs — integration pattern
Status
Done
Type
Sub-task