Использование focus-visible с обратной совместимостью
Патрик Лаук поделился своим подходом для управления стилями фокуса — ":focus-visible and backwards compatibility".
По умолчанию браузеры отображают фокус только там, где нужно. Например, фокус не устанавливается при клике на кнопку с помощью мыши, но появляется при переходе к кнопке с помощью клавиатуры. Для пользователей это логичное поведение. Когда фокус кастомизируется с помощью псевдокласса :focus, он начинает отображаться во всех ситуациях, вызывая замешательство у пользователей и дизайнеров. Для решения этой проблемы в стандарт был добавлен псевдокласс :focus-visible, с помощью которого можно кастомизировать фокус, не ломая его стандартное поведение.
Для кастомизации фокуса во всех браузерах с учётом :focus-visible Патрик советует использовать следующий подход:
/* стилизация фокуса */
/* в устаревших браузерах */
button:focus {
outline: dotted 5px teal;
}
/* отключение стилей `:focus` */
/* в современных браузерах */
*:focus:not(:focus-visible) {
outline: none !important;
}
/* стилизация фокуса */
/* в современных браузерах */
button:focus-visible {
outline: dotted 5px teal;
}
На данный момент :focus-visible поддерживается во всех браузерах (в Safari за экспериментальным флагом).
#css #a11y
www.tpgi.com/focus-v…tibility
