Комментарии 3
Пример кроссбраузерного кода для выделения рамки фокуса с клавиатуры
А из каких соображений Вы переопределяете стандартное и привычное для данного пользователя выделение, оформляемое его UA?!
Для этого есть 2 причины:
Для пользователей мыши :focus должен сохраняться только на полях ввода, а, например, на кнопке он избыточен с точки зрения дизайна, и его отключение не вредит доступности. Технически, мы просто пересели на :focus-visible.
Сама стилизация рамки фокуса в разных браузерах отличается и реализуется с outline, который по дизайну в некоторых случаях будет конфликтовать либо с содержимым (перевод фокуса на неинтерактивные элементы, верстка визуальных полей ввода с реальными полями ввода внутри), либо с border (толщина и плавность смены линии, палитра).
Отмечу, что считаем логичным, полное и консистентное переопределение стиля рамки фокуса, сохраняя все его основные и важные качества. Клиент должен привыкать к UX, UI может при этом меняться, если он не ломает UX.
удобство покрытия доступностью компонента – мерило корректности его архитектуры и масштабируемости
В рамочку и на стену
Web Accessibility в рассказе «A11Y от 0 до NaN»