test: add playwright axe accessibility baseline

Author: brianfunk

docs/ACCESSIBILITY_TRACKER.md

@@ -13,6 +13,17 @@ Accessibility work is tracked in `/docs/plan/M07-ux-accessibility-and-design-sys
 - Manual keyboard/screen reader checks for core flows.
 - Automated checks in CI where available.
 
+## Latest automated baseline (2026-02-11)
+
+- Command: `npm run test:a11y`
+- Coverage routes:
+  - `/`
+  - `/dockets`
+  - `/comments/search`
+  - `/contact`
+  - `/agency/login`
+- Result: no Axe `critical` violations detected on covered routes.
+
 ## Verification Checklist (WCAG 2.1 AA)
 
 - Public docket browse/search:

docs/plan/M07-ux-accessibility-and-design-system.md

@@ -39,3 +39,4 @@ Consolidate UX architecture and enforce accessible, coherent UI patterns.
 - 2026-02-11: Added baseline design tokens and surface styling in `src/index.css` and applied to shared layouts (`PublicLayout`, `AdminLayout`, root app shell).
 - 2026-02-11: Expanded `docs/ACCESSIBILITY_TRACKER.md` with a concrete WCAG 2.1 AA verification checklist for primary public and agency workflows.
 - 2026-02-11: Removed unused legacy pages (`src/pages/AgencyDashboard.tsx`, `src/pages/AgencyLogin.tsx`) that contained stale placeholder/duplicate agency UI, leaving canonical `/pages/agency/*` surfaces as the single implementation path.
+- 2026-02-11: Added Playwright + Axe automated accessibility baseline (`tests/playwright/accessibility.pw.ts`) and verified no `critical` violations on primary entry routes; recorded in `docs/ACCESSIBILITY_TRACKER.md`.

package-lock.json

@@ -11,10 +11,10 @@
     "preview": "vite preview",
     "db:migrate": "npx supabase db push",
     "db:custom-migrate": "node apply-migrations.js",
-    "test": "vitest",
-    "test:ci": "vitest --run --passWithNoTests",
-    "test:watch": "vitest --watch",
-    "test:coverage": "vitest --coverage",
+    "test": "vitest --exclude tests/playwright/**",
+    "test:ci": "vitest --run --passWithNoTests --exclude tests/playwright/**",
+    "test:watch": "vitest --watch --exclude tests/playwright/**",
+    "test:coverage": "vitest --coverage --exclude tests/playwright/**",
     "test:a11y": "npx playwright test tests/playwright/accessibility.spec.ts",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
@@ -33,6 +33,7 @@
   "devDependencies": {
     "@axe-core/playwright": "^4.10.2",
     "@eslint/js": "^9.9.1",
+    "@playwright/test": "^1.58.2",
     "@testing-library/jest-dom": "^6.6.4",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",

package.json

@@ -0,0 +1,19 @@
+import { defineConfig } from '@playwright/test'
+
+export default defineConfig({
+  testDir: 'tests/playwright',
+  timeout: 60_000,
+  fullyParallel: false,
+  retries: 0,
+  use: {
+    baseURL: 'http://127.0.0.1:4173',
+    headless: true,
+    trace: 'on-first-retry'
+  },
+  webServer: {
+    command: 'npm run dev -- --host 127.0.0.1 --port 4173',
+    url: 'http://127.0.0.1:4173',
+    reuseExistingServer: true,
+    timeout: 120_000
+  }
+})

playwright.config.ts

@@ -0,0 +1,27 @@
+import { test, expect } from '@playwright/test'
+import AxeBuilder from '@axe-core/playwright'
+
+const routesToCheck = [
+  '/',
+  '/dockets',
+  '/comments/search',
+  '/contact',
+  '/agency/login'
+]
+
+for (const route of routesToCheck) {
+  test(`axe baseline has no critical accessibility violations on ${route}`, async ({ page }) => {
+    await page.goto(route)
+    await page.waitForLoadState('networkidle')
+
+    const results = await new AxeBuilder({ page }).analyze()
+    const criticalViolations = results.violations.filter((violation) => violation.impact === 'critical')
+
+    expect(
+      criticalViolations,
+      criticalViolations
+        .map((violation) => `${violation.id}: ${violation.help} (${violation.nodes.length} nodes)`)
+        .join('\n')
+    ).toEqual([])
+  })
+}