`outline: none;` is one line of CSS, and it quietly breaks navigation for every keyboard user on the page.
The default focus ring gets deleted for a simple reason: it looks bad, clashes with the brand, or shows up in places a designer never approved. So someone removes it, moves on, and the interface looks cleaner in every screenshot — but a keyboard or screen-reader user tabbing through the page has no way to tell which element is active anymore.
The fix isn't to leave it removed and it isn't to bring back the ugly default blue ring either. It's to design a real one and token it, the same way color or spacing gets tokened: a `focus-color` in the brand's own accent, a `focus-width` thick enough to actually see, and a `focus-offset` that keeps the ring from crowding the element it's wrapping.
Pair that with `:focus-visible` instead of `:focus`, so the ring shows up for keyboard navigation without adding a visual ring around every button a mouse user clicks.
Once those three values are named and referenced everywhere, "do we need a focus state" stops being a debate that gets settled by deleting it — the ring is just part of the system, same as everything else.
Leave a Reply
You must be logged in to post a comment.