🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
Почему box-shadow не заменяет outline для фокуса
CSS-тень даёт больше свободы в оформлении фокуса. Но в режиме принудительных цветов браузер вычисляет box-shadow как none. Пользователь не видит, какая кнопка в фокусе.
Простой вариант: обычный outline. Если нужна тень, не отключайте контур через outline: none: задайте outline: 2px solid transparent и outline-offset: 2px. В обычном режиме контур прозрачен, а при принудительных цветах становится видимым в палитре пользователя.
Проверить компонент можно в Chromium DevTools: вкладка Rendering, параметр forced-colors со значением active. Добавьте сценарий в чеклист доступности, а разбор Manuel Matuzović используйте как памятку с двумя вариантами CSS.