:focus-visible — обводка только для клавиатуры, не для каждого клика
Как убрать «синие рамки» для мыши и сохранить WCAG 2.4.7 для Tab-навигации.
Псевдокласс `:focus-visible` срабатывает, когда браузер считает, что фокус нужно показать — обычно при навигации с клавиатуры, а не при клике мышью.
Паттерн `outline: none` на `:focus` без `:focus-visible` — частая причина провалов аудита доступности.
- :focus-visible — MDN — Синтаксис и примеры.
- Focus — WCAG Understanding — Критерий 2.4.7 Focus Visible.
Дизайн-система
Задайте токен `--focus-ring` с offset 2px и контрастом ≥ 3:1 к фону кнопки.
Не полагайтесь только на смену `background` — при серых состояниях кольцо заметнее.