Томас Гюнтер делится советами, как сделать хорошее выделение фокусом, если дефолтные браузерные вам не подходят.
1. Используйте
:focus-visible вместо :focus. В таком случае фокусное выделение будет показываться тогда, когда оно действительно нужно.2. Если нужно выделить только текст, без фона, можно цветом обводки сделать
currentColor — в целом, смотрится неплохо. В статье есть готовый сниппет, который можно попробовать вставить в проект как умолчание, если дизайнер пока не придумал отдельно фокусные состояния интерактивных элементов.3. Когда элемент находится на каком-то фоне, нужно помнить про контрастность, подсматривать в рекомендации WCAG. Красивая белая обводка на белом фоне — лучше уж дефолтная браузерная.
4. Обводку можно делать двойную (внутри светлое, снаружи тёмное) при помощи
outline и box-shadow. Вполне себе универсальный паттерн, который будет смотреться хорошо почти на любом фоне, если вдруг не наткнётся на опасный overflow: hidden.5. Можно в принципе не делать никакую обводку, если есть уже готовые стили для
:hover, которые явно меняют внешний вид элемента, чтобы было видно, что он выделен. Заметное изменение фона, цвета текста, тени или бордера — что угодно, лишь бы было понятно, что я сфокусировался на элементе.https://medienbaecker.com/articles/focus-outlines
