Создание сайтов: лендинг, визитка, интернет магазин. Продвижение, поддержка, реклама.

В последнее время всё чаще и чаще возникает вопрос о доступности, если раньше скрытие outline для элементов страницы было общим правилом, то теперь хороший сайт должен иметь outline у элементов, как минимум :focus-visible.Основная проблема outline – это их стилизирование.

Я пришел к своему решению, которое изложено в этой статье.

Большой gif

Работая над своим pet проектом мне нужно было сделать один и тот же стиль обводки (при наведении и фокусе) для элементов визуализаций и всех фокусируемых элементов DOM.

Моё решение

Вставляем div поверх всего остального контента в document.body , и отключаем ему обработку событий через pointer-events: none, растягиваем в размер документа, z-index должен быть больше всех остальных на странице.

Добавляем еще 4-e div с абсолютными позициями в ранее добавленный родительский:

их стили (scss):

Добавляем подписку на события для document: pointerenter, pointerleave , focus , blur:

Не забудьте отписаться если вы делаете какое то React приложение, и вюшка может быть отмонтирована.

В функциях слушателей фильтруем все события по tabIndex > -1 у event.target. При этом также проверяем что у ссылок есть href, и кроме того что у элементов нет атрибута disabled. Когда происходит blur может оказаться, что элемент оказался в контейнере, который тоже может иметь фокус (тут конечно можно задаться вопросом семантики, но такое бывает… почему в button находится a ):

В методе show получаем размеры target с помощью getBoundingClientRect. А затем перемещаем, наши 4-e div, каждый в свой угол:

Собственно, всё!

Описанный выше код вы можете найти здесь.

Заключение

Как вы можете заметить, элементы можно стилизовать как хотите, или даже вы можете использовать только один элемент, дав ему тот стиль который вам необходим. Все зависит от вашего воображения.

Кроме того, overflow: hidden не влияет на наш outline, но иногда нам нужно следить за формой элемента и размерами (к примеру ResizeObserver) , поэтому вы можете улучшить этот подход, все в ваших руках.

Спасибо за прочтение!

Если вам нужна дополнительная информация, дайте мне знать об этом DM artzub.online.

P.S.: английская версия моей статьи здесь