Revisit :focus-visible

Background

There are two commonly held perspectives for applying focus indicators to active elements; focus always visible regardless of input method, and focus visible determined by browser heuristics. I've historically been solidly focus always visible without exception, however, after going through Practical Accessibility from Sara Soueidan, perspective from accessibility experts (references below), team member perspectives, competitive analysis, and personal experience, I'd like to lean into :focus-visible.

What is :focus-visible

The :focus-visible pseudo-class applies while an element matches the :focus pseudo-class and the UA (User Agent) determines via heuristics that the focus should be made evident on the element. (Many browsers show a "focus ring" by default in this case.) (Source)

Browser support is good for the latest version of all major browsers, and there are simple fallback techniques to account for other browsers.

In Understanding SC 2.4.7: Focus Visible (Level AA) the Technique C45: Using CSS :focus-visible to provide keyboard focus indication is listed as a sufficient technique to satisfy the success criteria.

Proposal

  • Use :focus-visible to style focus rings based on UA heuristics.
  • Consider if there are any instances where a mouse user would still need to have visible focus.
  • Update Pajamas documentation.

📓 Reference

Issues & MRs

Other

Edited by Jeremy Elder