From cb35bf161e16e7228a490781ad34168e4b906585 Mon Sep 17 00:00:00 2001 From: Julian Tabel Date: Fri, 20 Feb 2026 19:27:46 +0100 Subject: [PATCH] Update bean --- ...ernize-website-design-and-look-and-feel.md | 27 +++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/.beans/nuzlocke-tracker-dpw7--modernize-website-design-and-look-and-feel.md b/.beans/nuzlocke-tracker-dpw7--modernize-website-design-and-look-and-feel.md index 55150de..f0e2ce3 100644 --- a/.beans/nuzlocke-tracker-dpw7--modernize-website-design-and-look-and-feel.md +++ b/.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