Always worth repeating: all interactive elements should have a focus style. That way, a keyboard user can tell when they have moved focus to that element.
But if you use :focus alone for this, it has a side effect that …
The :focus-visible pseudo-class (also known as the “Focus-Indicated” pseudo-class) is a native CSS way to style elements that:
:focus-visible is used similarly to :focus: to …
Like Eric Bailey says, if it’s interactive, it needs a focus style. Perhaps your best bet? Don’t remove the dang outlines that focusable elements have by default. If you’re going to rock a button { outline: 0; }, …
Patrick H. Lauke covers the future CSS pseudo class :focus-visible. We’re in the early days of browser support, but it aims to solve an awkward situation:
…… focus styles can often be undesirable when they are applied as a
