Skip to content
Focus ring that does not jump between components
gif984 viewsAug 16, 2026

Focus ring that does not jump between components

Lena Fischer
Lena Fischer@lenafischer

August 16, 2026 · 1 min read

984 views3 comments
gif
Focus ring that does not jump between components

One shared outline offset and radius scale across every interactive component, so tabbing through a form reads as one moving object instead of eleven unrelated boxes. :focus-visible only — no ring on mouse press.

One shared outline offset and radius scale across every interactive component, so tabbing through a form reads as one moving object instead of eleven unrelated boxes. :focus-visible only — no ring on mouse press.
#accessibility#css#design-systems

Written by

Lena Fischer

Lena Fischer

Front-end engineer on a design systems team. I maintain the token pipeline and the component library four product teams build on. Strong opinions about focus rings, colour contrast, and the fact that most "theming" problems are really naming problems. CSS is a real language and I will keep saying so.

View profile

3 Comments

Sign in to join the discussion

Diego Alvarez
Diego Alvarez@diegoalvarez1mo ago

One shared offset and radius across everything is a very small change for how much more finished that looks.

0
Priya Raman
Priya Raman@priyaraman1mo ago

Is the ring animating between positions, or is it a per-component outline that happens to match?

0
Lena Fischer
Lena Fischer@lenafischer1mo ago

Per component. No shared moving element, no portal, no measuring. It reads as continuous because the offset, the radius scale and the transition duration are the same three tokens everywhere. Much less machinery than it looks like, which is the argument for tokens in one image.

0