Thanks to splendid browser support, utilizing
:focus-visible is a thing now. We can finally have highly prominent focus styles for those who navigate our sites with a keyboard, and at the same time do not need to show visitors browsing with a mouse how prominent they are. The keyboard/mouse divide is a bit of a simplification, as there are more input devices out there. In general, web browsers have heuristics to figure out which focus style to apply, but surely how our visitor got to an interactive element will be taken into account.
- Situation: A script causes focus to move from a :focus-visible element to another element
- → Does :focus-visible apply? Yes
- Situation: A script causes focus to move from a non-:focus-visible element to another element
- → Does :focus-visible apply? No
Not being entirely satisfied with this, I created a little test page. Doing so, I’ve been able to confirm the above, and additionally I learned
:focus-visible is also applied …
- when a script moves focus on page load—a scenario where the web browser has a hard time figuring out which input device the visitor used beforehand;
- when the target is an editable input field like
textarea— in these cases the focus-visible style is always applied, input device does not matter.