Создание хука блокировки фокуса в React.
Доступность — это один из аспектов веб-разработки, который слишком быстро упускают из виду. Люди с ограниченными возможностями не могут использовать наше приложение или с трудом что-либо делают.
Организации не осознают, что они сокращают значительную базу пользователей, просто не делая свои приложения доступными, что приводит к потере доходов и в некоторых случаях может привести к судебному иску.
Мы должны переосмыслить, делая наши приложения более доступными.
В этом уроке я расскажу о поддержке клавиатуры для доступного модального компонента.
w3.org определяет поддержку конкретной клавиатуры для модального окна, как показано ниже.
Следует отметить, что функциональные возможности вкладки должны находиться в диалоговом окне. В браузере нет API, позволяющего это сделать. Мы должны справиться сами. В противном случае у нас есть проблема, как показано ниже;
Мы можем создать хук focus-lock, который блокирует пользователя внутри модального окна.
useFocusLock также можно использовать для других вариантов использования, помимо модального, и, следовательно, он будет универсальным.
Давайте начнем;
Мы возьмем все фокусируемые HTML-теги.
Затем мы запрашиваем все focusableTags внутри модального окна (или оболочки) и сохраняем их в текущей ссылке (мы могли бы использовать состояние).
Функция ловушки принимает реквизиты-оболочки, которые должны быть ссылкой. Все запросы фокусируемых тегов выполняются внутри элемента-оболочки и сохраняются в focusableElementsref.
Примечание: нам не нужно передавать оболочку, так как обновление ссылки зависимость от нашего useEffect не вызывает повторную визуализацию.
InitialFocus внутри оболочки
Давайте удостоверимся, что мы можем изменить initialFocus, когда мы вызываем хук или по умолчанию для первого фокусируемого элемента в модальном (или компоненте-обертке).
Слушатели клавиатуры
Теперь, когда мы вызываем хук useFocusLock и передаем ему оболочку, у нас есть доступ ко всем focusableElements внутри оболочки. Мы можем обрабатывать вкладки поддержки клавиатуры, добавляя прослушиватели событий к первому и последнему фокусируемым элементам.
Так как мы хотим гарантировать, что когда мы нажимаем Tab внутри тегов-оболочек, когда мы добираемся до lastFocusableElement и не нажимаем Tab + клавишу Shift, мы возвращаемся к firstFocusableElement. Таким образом, мы находимся в пределах фокусируемых элементов оболочки.
Кроме того, когда мы Shift + Tab, мы будем делать наоборот. Когда мы добираемся до firstFocusableElement, мы хотим вернуться к lastFocusableElement.
Кроме того, мы удостоверяемся, что firstFocusableElement и lastFocusableElement являются текущимиактивными элементами в документе.
Мы также вызываем и очищаем прослушиватель событий в useEffect.
Мы выполнили все необходимое для поддержки клавиатуры для вкладок, как показано ниже;
Еще одна вещь, которую нужно обработать, — это обработчик событий клавиши escape. Мы также можем добавить к блокировке фокуса или создать отдельный обработчик событий, поскольку хук фокус-блокировки должен быть повторно используемым и не привязанным только к модальному варианту использования. Я использовал последний подход.
Теперь у нас есть все детали, необходимые для полной поддержки всех требований к клавиатуре.
Полный хук, который у нас есть, приведен ниже;
Спасибо за чтение. Дайте мне знать ваши мысли, если вы найдете это полезным.
