Skip to content

Focus ring draft v0.2.0

The one visible focus indicator every focusable component shows on keyboard focus.

People who move through an interface with a keyboard, a switch or another assistive input need to see which component will receive their next action. The focus ring is the system's single answer: the same solid ring, in the same color, at the same distance, around every focusable component, on every surface and in every mode. Components do not design their own focus indicator; they draw this one from their focus-visible tokens, which alias the tokens below.

Decisions

From decisions in packages/components/specs/foundations/focus.spec.json, newest first. Every active decision is implemented by the spec, the semantic tokens and the components following the foundation.

Dimension

  • The focus ring is the strong focus of the stroke scale, 2.4 px, for every component, not the 1.2 px the prototype hints for focus rings.

    A 2.4 px ring keeps the 2 CSS px thickness of WCAG 2.4.13 Focus Appearance (AAA); 1.2 px meets WCAG 2.2 AA but not that criterion.

    focus-ring-strong · 2026-10-01 · v0.1.0

    focus.ring.width

    WCAG 2.4.13 Focus Appearance (AAA)

Accessibility

  • Every focusable component shows the same focus ring on keyboard focus, the one the button defines: a solid ring in the focus color (the brand accent fill of each mode), drawn outside the component at the focus offset and following its shape. Pointer and touch focus show no ring. Components alias the focus tokens and never define their own indicator.

    focus-ring-shared · 2026-10-01 · v0.1.0

    focus.ring.*color.focus.ring

    WCAG 2.4.7 Focus Visible (AA)WCAG 1.4.11 Non-text Contrast (AA)