.beans/nuzlocke-tracker-dpw7--modernize-website-design-and-look-and-feel.md

@@ -5,7 +5,7 @@ status: in-progress
 type: feature
 priority: normal
 created_at: 2026-02-17T19:16:39Z
-updated_at: 2026-02-17T20:01:32Z
+updated_at: 2026-02-17T21:04:45Z
 ---
 
 Overhaul the UI to a dark-first, techy aesthetic with a cohesive brand identity derived from the ANT steel ant logo.
@@ -93,8 +93,31 @@ Self-host **Geist** (or Inter/JetBrains Mono pairing):
 - [x] Update badge/indicator styles (TypeBadge, RuleBadges, EncounterMethodBadge)
 - [ ] Add dark/light mode toggle to nav
 - [x] Polish hover states and transitions across all interactive elements
-- [ ] Verify mobile layout and touch targets
+- [ ] Add automated Playwright accessibility and mobile layout tests
 - [ ] Verify accessibility (contrast ratios, focus indicators)
+- [ ] Verify mobile layout and touch targets
+
+## Automated verification approach
+
+Add a Playwright test suite that covers both accessibility and mobile layout:
+
+### Accessibility (axe-core + Playwright)
+- Install `@axe-core/playwright` as a dev dependency
+- Write a test that visits each major page and runs axe-core
+- Pages to cover: Home, RunList, RunDashboard, RunEncounters, Stats, NewRun, GenlockeList, GenlockeDetail, NewGenlocke, admin pages
+- Check for: color contrast (WCAG AA), missing ARIA labels, heading hierarchy, focus indicators, form label associations
+- Run as part of CI
+
+### Mobile layout (Playwright viewports)
+- Test each major page at 3 viewport sizes: mobile (375x667), tablet (768x1024), desktop (1280x800)
+- Assert no horizontal overflow (`document.documentElement.scrollWidth <= window.innerWidth`)
+- Assert touch targets are at least 44x44px (axe-core `target-size` rule)
+- Screenshot each page at each viewport for visual review
+
+### Implementation
+- Add test file: `frontend/e2e/accessibility.spec.ts`
+- Add Playwright config if not present
+- Add `test:a11y` script to `package.json`
 
 ## Constraints