`:focus-visible` is the modern answer to the focus-ring problem: showing a visible outline on Tab navigation (essential for keyboard accessibility) but suppressing it on mouse clicks (where a ring feels noisy). Linear, Stripe, and Vercel all use `:focus-visible` with an inset ring at an accent color. The convention is mandatory for AAA accessibility and is enforced in every AI2 Design brief's `accessibilityRules`.
Glossary · accessibility
:focus-visible
A CSS pseudo-class that targets keyboard-driven focus only, hiding the focus ring on mouse clicks.
External reference
MDN — :focus-visibleCatalogued examples
3 catalogued sites demonstrate :focus-visible in production.