WORK-352
Setting up your dashboard 0 entities found · 8/33 branches scanned
ID:WORK-352Status:ready

Focus-visible and reduced-motion consistency

Accessibility polish across the theme. Today only ~5 of ~90 rune CSS files define :focus-visible, and only 2 honor prefers-reduced-motion — so keyboard focus is inconsistent and animations don't degrade for motion-sensitive users.

Priority:mediumComplexity:moderateMilestone:v0.19.0
main View source

Criteria completion

Criteria completion: 0 of 4 (0%) checked; tracking started on Jun 5, no incremental history yet0%25%50%75%100%Jun 5Jun 15

Tracking started Jun 5 — check back for trends.

Relationships

Related 4
Branches 4
main current ready
changeset-release/main doneclaude/v0.19-lumina-polish doneclaude/v0.19-milestone-planning readymain ready

Acceptance Criteria

  • A consistent, token-driven :focus-visible indicator (e.g. a primary-coloured ring/outline) is applied to all interactive runes/elements: links, buttons, tabs, accordion headers, drawer triggers/close, form fields, datatable controls, nav items, and link-tiles (card/bento href).
  • The focus ring is visible in both light and dark and meets a sensible contrast bar; no outline: none without a replacement.
  • Animated runes wrap motion in @media (prefers-reduced-motion: reduce) fallbacks: at minimum drawer (already), chart, reveal, juxtapose, accordion.
  • A keyboard tab-through of the docs site shows a clear focus indicator on every interactive element.

Approach

Prefer a small shared focus-ring utility (a custom property + a :where() base rule over interactive selectors) rather than per-rune duplication, so coverage is uniform and cheap to maintain. Add reduced-motion guards alongside each animation block.

References

  • packages/lumina/styles/ (5/90 files have :focus-visible; 2 have prefers-reduced-motion)
  • Motion precedent: packages/lumina/styles/runes/drawer.css