Live a11y overlay (dev-time axe overlay panel)

[TortoiseWolfe]

Summary

The original 001-wcag-aa-compliance spec called for a "real-time dev feedback dashboard" — an overlay during dev that flags a11y violations live. Per the #21 next-session primer, this was deferred as "probably overkill for v0.0.x — defer to v0.1.0 or beyond."

Filing as a follow-up here so the work isn't forgotten when v0.1.0 (or a fork-driven need) makes it relevant.

Implementation sketch

• Dev-only useEffect in a high-level provider that runs axe.run(document, { resultTypes: ['violations'] }) on a debounced timer or after each route change
• Floating panel in a corner of the viewport listing current violations with: rule name, target element selector, impact level, link to axe-rules docs
• Click-to-highlight: clicking a violation outlines the target element in the page
• Strictly dev-only — process.env.NODE_ENV === 'development' gate; never bundles into production

Out of scope for v0.0.x

• Production-mode opt-in (tempting but a footgun)
• Persistent violation history across sessions
• Integration with [Gap-Audit] 044 Error Handler Integrations: Sentry/LogRocket integration + PII scrubbing + session replay #45 (Sentry / LogRocket) for prod a11y telemetry — separate concern

Refs

• Closed: [Gap-Audit] 001 WCAG AA: AAA scope gap + 4 ContactForm a11y failures #21 (Phase 0 a11y upgrade — AAA scope shipped without the overlay)
• Spec: `features/foundation/001-wcag-aa-compliance/spec.md`
• Existing tooling: `tests/e2e/color-contrast.spec.ts` (color-contrast-enhanced AAA), `config/pa11yci.json` (WCAG2AAA)