Получение всех фокусируемых элементов

В JavaScript управление фокусом играет ключевую роль для создания доступных веб-интерфейсов. Библиотека Tabbable предоставляет удобный способ получения всех элементов на странице, которые могут принимать фокус с клавиатуры, что особенно важно для навигации с помощью клавиши Tab.

Основная функция библиотеки

Главной функцией библиотеки является метод tabbable(container), который возвращает массив элементов, доступных для табуляции внутри указанного контейнера. Если контейнер не указан, поиск осуществляется по всему документу.

import { tabbable } from 'tabbable';

const focusableElements = tabbable(document.body);
console.log(focusableElements);

В этом примере focusableElements содержит все элементы на странице, которые могут быть фокусируемыми.

Критерии фокусируемости

Библиотека учитывает следующие характеристики элементов:

  • Стандартные интерактивные элементы: <a> с атрибутом href, <button>, <input>, <select>, <textarea> и <iframe>.

  • Элементы с атрибутом tabindex:

    • tabindex="0" делает элемент доступным для табуляции в обычном порядке.
    • tabindex="-1" исключает элемент из табуляции, но позволяет программно фокусироваться на нём.
    • Положительные значения tabindex задают приоритет в порядке табуляции.

  • Элементы с CSS-свойствами display: none или visibility: hidden исключаются.

  • Элементы с disabled также не включаются в результат.

Таким образом, tabbable возвращает именно те элементы, на которые может попасть пользователь при навигации с клавиатуры.

Фокусируемые и табулябельные элементы

Важно различать два понятия:

  1. Фокусируемые элементы – элементы, на которые можно установить фокус программно через element.focus(). Это включает элементы с tabindex="-1".
  2. Табулябельные элементы – элементы, которые появляются в порядке табуляции при нажатии клавиши Tab. В библиотеке tabbable возвращаются именно табулябельные элементы, то есть те, которые пользователь может достичь с клавиатуры без дополнительного вмешательства.

Опции метода

Метод tabbable принимает объект опций для более тонкой настройки:

  • includeContainer — булевое значение. Если true, контейнер будет включён в результат, если сам является табулябельным.
  • getShadowRoot — функция, возвращающая теневое дерево для элемента, что позволяет корректно обрабатывать элементы внутри Shadow DOM.

Пример использования опций:

const focusableElements = tabbable(document.getElementById('form-container'), {
  includeContainer: true
});

Работа с теневым DOM

Элементы внутри Shadow DOM по умолчанию не учитываются. Для их обработки используется функция getShadowRoot:

const focusableElements = tabbable(document.body, {
  getShadowRoot: el => el.shadowRoot
});

Такой подход позволяет строить полностью доступные компоненты с использованием Web Components.

Порядок элементов

Возвращаемый массив строго соответствует порядку визуальной табуляции на странице. Элементы с положительным tabindex идут первыми, затем элементы с tabindex="0", и в конце элементы без tabindex, но естественно фокусируемые. Это обеспечивает корректную последовательность навигации для пользователей клавиатуры.

Практические сценарии

  • Фокусировка модальных окон: при открытии модального окна можно получить все элементы внутри него через tabbable и зациклить фокус только на этих элементах.
  • Навигация внутри форм: массив фокусируемых элементов позволяет программно переходить к следующему полю без использования стандартной табуляции.
  • Создание кастомных компонентов: кнопки, выпадающие списки и вкладки можно сделать полностью доступными, обрабатывая только элементы из массива tabbable.

Совместимость и ограничения

Библиотека поддерживает современные браузеры и корректно обрабатывает все стандартные интерактивные элементы. Она не учитывает нестандартные элементы без tabindex или элементы, скрытые через нестандартные CSS-свойства, кроме display и visibility. Для таких случаев потребуется дополнительная фильтрация или обработка.

Получение всех фокусируемых элементов с помощью Tabbable обеспечивает точный контроль над навигацией клавиатуры и является фундаментом для создания доступных веб-интерфейсов. Правильное использование метода tabbable позволяет строить сложные компоненты и модальные диалоги без потери UX для пользователей с ограниченными возможностями.

Оглавление