The Secret Focus in CSS

Not that kind of focus. This is about the difference between :focus and :focus-visible.

Most controls react similarly when clicked or tabbed to, but there is an important difference:

1. :focus applies whenever an element receives focus (mouse or keyboard).
2. :focus-visible appears when focus indication is needed, typically during keyboard navigation.

With :focus, users can see a ring even after mouse click.

Here is how :focus behaves:

Now with :focus-visible:

Small details like this are noticeable in real usage and improve perceived quality.