Параметры и опции

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

Основная функция библиотеки возвращает массив элементов, которые можно табулировать. Внутри этого механизма учитываются как стандартные HTML-элементы (input, button, a, select, textarea), так и элементы с tabindex, позволяющие расширять область табуляции.

Опции функции Tabbable

Функция tabbable(element, options) поддерживает несколько ключевых опций, влияющих на результат поиска:

includeContainer

  • Тип: boolean
  • По умолчанию: false
  • Определяет, следует ли включать сам переданный элемент в список табулируемых элементов.
  • Пример использования: если контейнер сам имеет tabindex="0", установка includeContainer: true позволит включить его в результат.

getShadowRoot

  • Тип: function
  • Функция, возвращающая Shadow Root элемента, если необходимо искать внутри теневых DOM-деревьев.
  • Используется для поддержки веб-компонентов, когда стандартная табуляция не видит элементы внутри Shadow DOM.
  • Пример:
tabbable(document.body, {
  getShadowRoot: el => el.shadowRoot
});

tabindex

  • Тип: number | null
  • Позволяет фильтровать элементы по значению tabindex.
  • Если указано число, возвращаются только элементы с соответствующим tabindex. Если null, учитываются все элементы с допустимым tabindex.

Поведение с нестандартными элементами

Tabbable учитывает не только стандартные интерактивные элементы, но и пользовательские компоненты с атрибутом tabindex. Особенности обработки:

  1. Скрытые элементы Элементы с display: none или visibility: hidden не включаются в результат.
  2. Отключённые элементы Элементы с атрибутом disabled игнорируются, даже если они имеют tabindex.
  3. Negative tabindex Элементы с tabindex=-1 считаются доступными программно, но не входят в обычный порядок табуляции.

Сортировка и порядок элементов

Tabbable возвращает элементы в порядке их табуляции:

  1. Элементы с положительным tabindex, отсортированные по возрастанию значения.
  2. Элементы без tabindex (по естественному порядку в DOM).
  3. Элементы с tabindex="-1" игнорируются для обычной навигации через Tab.

Это позволяет создавать предсказуемую последовательность фокусировки, что критично для доступности интерфейсов.

Взаимодействие с Shadow DOM

Для компонентов на основе Shadow DOM библиотека предоставляет гибкий подход:

  • Опция getShadowRoot позволяет рекурсивно искать tabbable-элементы внутри каждого Shadow Root.
  • Shadow DOM с mode: closed будет недоступен без специальной функции получения корня.
  • Комбинация стандартного DOM и Shadow DOM позволяет строить сложные интерфейсы с корректной навигацией через клавиатуру.

Расширенные возможности

Tabbable позволяет комбинировать фильтры и опции:

  • Поиск только интерактивных элементов внутри конкретного контейнера.
  • Исключение элементов с отрицательным tabindex.
  • Включение контейнера в результат при необходимости.
  • Обход Shadow DOM для веб-компонентов.

Пример с фильтрацией и включением контейнера:

const focusableElements = tabbable(document.querySelector('#modal'), {
  includeContainer: true,
  getShadowRoot: el => el.shadowRoot
});

Практические рекомендации при использовании опций

  • Всегда учитывать порядок tabindex для обеспечения правильной доступности.
  • Shadow DOM следует обрабатывать только при наличии веб-компонентов с внутренними интерактивными элементами.
  • Опция includeContainer удобна для модальных окон или динамически создаваемых контейнеров, где сам контейнер может получать фокус.
  • Фильтрация по tabindex помогает тестировать и отлаживать последовательность табуляции.

Использование опций Tabbable позволяет создавать предсказуемую и корректную навигацию по элементам интерфейса, поддерживать сложные компоненты и соответствовать стандартам доступности.

Оглавление