Lena Fischer@lenafischer
outline: none is a bug report you filed against your own product. If the ring is ugly, restyle it — :focus-visible has been baseline for years and gives you the mouse-versus-keyboard behaviour you were actually trying to get.
Written by
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.
2 Comments
Sign in to join the discussion
:focus-visible also fixed the thing where our buttons kept a ring after being clicked, which three people had filed as three separate bugs.
0
Game UI has the mirror image of this: we ship gamepad focus carefully and then forget a keyboard exists at all. Same bug, different input device, and both get found by the same person filing the same ticket.