A11y: keyboard focus moves on Tab but has no visible focus indicator (WCAG 2.4.7 fail)
## Summary Tab navigation works — focus DOES move between interactive elements as the user presses Tab — but **there is no visible focus indicator** on most/all interactive elements. Keyboard-only users cannot see where their focus currently sits, making the app non-navigable by keyboard despite focus actually being routable. This is a **WCAG 2.4.7 (Focus Visible, Level AA)** violation. ## Repro 1. Stack `282eb62` up, Vite on 5173 2. Open `/timecurve` in Chrome 3. Click on the page body to put focus in the document (not URL bar) 4. Press Tab repeatedly to advance focus 5. Watch for any visual indicator (outline, glow, color change) on the currently-focused element ## Observed - No visible outline, glow, or styling change appears on focused elements as Tab advances - Verified focus IS moving via `document.activeElement` polling in console — different elements gain focus on each Tab keystroke - Click-to-focus works (e.g., clicking BUY CHARM puts focus on it) but Tab-to-focus is invisible ## Why this matters - WCAG 2.4.7 Level AA compliance is part of standard frontend ship criteria for production launches - Keyboard users (mouse-impaired users, power users) cannot navigate the app - Screen reader users may also lose orientation since visual focus is the canonical "where am I" cue - Common audit failure flagged by automated tools (Lighthouse a11y, axe DevTools, WAVE) ## Suggested fix Add `:focus-visible` styles to interactive elements. Standard pattern: ```css button:focus-visible, a:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--yo-focus-color, #...); outline-offset: 2px; } ``` Use `:focus-visible` (not `:focus`) so the outline only shows on keyboard nav, not mouse click. The framework's CSS reset may be stripping default browser focus rings without replacing them — that's the most common cause. ## Severity **MEDIUM.** Not a launch-blocker but is an a11y compliance gap that will fail standard audits and excludes a real user segment. Cheap to fix (one CSS rule). ## Scope note This filing covers the focus-visible portion of F-15 only. Full a11y audit (semantic markup, ARIA labels, screen reader announcements, color contrast, etc.) deferred to post-TGE. cc @PlasticDigits
issue