AZ-011 — Responsive accessibility gate

Status

In progress

Context

Read README and testing/CI/DoD. Feature tasks already test mobile and desktop in the same Playwright specs and add lower-level tests immediately. This task consolidates browser accessibility checks across the completed shell, auth/settings/recovery and developer console; it must not replace existing feature acceptance tests or weaken 100% coverage.

Goal

Add a maintainable blocking responsive/accessibility baseline and a small documented manual review protocol for usability that automated WCAG checks cannot establish.

Requirements

• Add compatible @axe-core/playwright to existing tests/e2e workspace, following Playwright accessibility guidance. Reuse Chromium desktop and mobile projects; do not add another browser/test runner solely for axe. Scan meaningful ready states with WCAG A/AA tags and require no detected violations, with narrowly explained exceptions only for a real proven tool limitation, never blanket disables.
• Cover Home, protected Settings, login, forgot/reset states, and enabled-local Mocking Bird; scan drawer open and closed and representative field validation/notification states. Observe correct state before scanning; do not scan a loading shell instead of the intended form/page. Reset scans use a valid synthetic token lifecycle without leaking credentials into reports.
• Keep mobile 360×800 touch and desktop 1280×800 behavior projects in both Playwright configs. Add focused 320px reflow and 768×1024 tablet boundary/resize checks where meaningful, without duplicating every business journey across a four-viewport/full-browser matrix. Test no document horizontal overflow, main/nav scrolling reachability, drawer breakpoint transition, action availability and long localized labels. Include at least one Swedish long-copy/theme variant.
• Test real keyboard focus: skip link, menu toggle → drawer, Tab traversal/Escape restoration, active page semantics, route-heading focus, login/settings invalid field focus and snackbar dismissal. Touch target assertions use bounding boxes for representative interactive controls; avoid fragile pixel-perfect screenshots or internal class-name assertions.
• Run scans in light/dark where contrast changes materially, with system appearance resolution tested at lower levels. Respect reduced motion and test navigation remains functional. Do not assert full WCAG compliance or equate axe success with phone/keyboard usability.
• Test per-case users/preferences and query state independently across projects. Developer tool tests use explicit local-only configuration; normal production absence remains covered by earlier negative tests. No E2E route mocking for auth/backend/database; mock only external email.
• Keep checks inside pnpm e2e:docker and canonical pnpm validate:docker so existing validate-docker blocks PRs. Do not introduce a redundant E2E job. Keep bounded readiness, no fixed sleeps/flaky retries, and existing failure-only artifact semantics. Enable useful failure diagnostics only with safe synthetic data and redaction; do not add success artifacts unless the CI artifact contract is explicitly updated with meaningful purpose.
• Fix accessibility/responsive defects found in the planned surfaces within this task at the smallest appropriate layer. Add low-level regression tests when a defect is reproducible there; don't bypass checks to avoid a discovered failure. Do not redesign domain functionality.

Non-goals

No full compliance certification, outsourced audit, desktop-first redesign, arbitrary coverage change, screenshot-baseline platform, Lighthouse score threshold, or all-device/all-browser matrix.

Implementation guidance

Place small axe/navigation helpers in the existing e2e responsibility and share behavioral specs between dev/Docker configs. Prefer role/name locators, real focus and bounding-box behavior; RTL does not validate CSS reflow/contrast. Limit helper scope to actual repeated checks instead of a generic accessibility framework. Components use MUI semantics correctly; a MUI component alone does not guarantee correct labeling/focus/contrast in the application.

Acceptance criteria

• Representative ready states have zero detected automated WCAG A/AA violations in blocking CI.
• Mobile/drawer, desktop, tablet resize, 320px reflow, representative target size and keyboard focus behavior pass on real Chromium without screenshot/class-name coupling.
• Tests remain isolated and prove real browser/backend/database workflows with external mail interception only; no new retries/mocked application routes mask defects.
• Manual review results record actual tested phone/keyboard/zoom/screen-reader behavior and unresolved findings explicitly; automated checks are not represented as full compliance.

Verification

pnpm quality
pnpm test
pnpm build
pnpm test:coverage
pnpm test:ci
pnpm validate:docker

Affected production coverage is required for fixes; coverage is not an axe metric. Manual review: 360px phone with virtual keyboard and touch, 320px reflow, 768px tablet, desktop keyboard only, 200% zoom, light/dark contrast, VoiceOver or NVDA basic navigation/forms/live announcements, drawer focus and scrolling. Record equipment/browser and limitations; do not fabricate screen-reader evidence if unavailable. Required CI/artifact evidence must be obtained for the delivered revision.

Documentation

Update test-strategy (axe responsibilities/tags/states/viewports/isolation), development (mobile-first/manual review convention), CI (blocking checks/diagnostic safety), current-state and handover. Record fixes and acceptance evidence without making specs the sole UI guide.

Dependencies

AZ-010 and its prerequisites; existing mobile projects from AZ-002 and feature tests.