В последнее время всё чаще и чаще возникает вопрос о
доступности, если раньше скрытиеoutline
для элементов
страницы было общим правилом, то теперь хороший сайт должен иметь
outline у элементов, как
минимум:focus-visible
.Основная
проблемаoutline
- это их стилизирование.
Я пришел к своему решению, которое изложено в этой статье.
Работая над своим pet проектом мне нужно было сделать один и тот же стиль обводки (при наведении и фокусе) для элементов визуализаций и всех фокусируемых элементов DOM.
Моё решение
Вставляемdiv
поверх всего остального контента
вdocument.body
, и отключаем ему обработку событий
черезpointer-events: none
, растягиваем в размер
документа,z-index
должен быть больше всех остальных на
странице.
Добавляем еще 4-ediv
с абсолютными позициями в ранее
добавленный родительский:
их стили (scss):
Добавляем подписку на события
дляdocument
:pointerenter
,pointerleave
,focus
,blur
:
Не забудьте отписаться если вы делаете какое то React приложение, и вюшка может быть отмонтирована.
В функциях слушателей фильтруем все события поtabIndex
> -1
уevent.target
. При этом также проверяем
что у ссылок естьhref
, и кроме того что у элементов
нет атрибутаdisabled
. Когда
происходитblur
может оказаться, что элемент оказался в
контейнере, который тоже может иметь фокус (тут конечно можно
задаться вопросом семантики, но такое бывает почему
вbutton
находитсяa
):
В методеshow
получаем размерыtarget
с
помощьюgetBoundingClientRect
. А затем перемещаем, наши
4-ediv
, каждый в свой угол:
Собственно, всё!
Описанный выше код вы можете найти здесь.
Заключение
Как вы можете заметить, элементы можно стилизовать как хотите, или даже вы можете использовать только один элемент, дав ему тот стиль который вам необходим. Все зависит от вашего воображения.
Кроме того,overflow: hidden
не влияет на
нашoutline
, но иногда нам нужно следить за формой
элемента и размерами (к примеру ResizeObserver) , поэтому вы
можете улучшить этот подход, все в ваших руках.
Спасибо за прочтение!
Если вам нужна дополнительная информация, дайте мне знать об этом DMartzub.online.
P.S.: английская версия моей статьи здесь