Определение фокусируемости элемента

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

Основные понятия

Элемент считается фокусируемым, если он удовлетворяет следующим условиям:

  1. Видимость: элемент должен быть видимым на странице. Это значит, что у него не должно быть CSS-свойств display: none или visibility: hidden, и его размер не должен быть равен нулю.
  2. Атрибуты интерактивности: наличие атрибутов tabindex или природной интерактивности (<input>, <button>, <select>, <textarea>, <a href="">).
  3. Не отключен: элемент не должен иметь атрибут disabled, так как это делает его недоступным для фокуса.

Использование функции tabbable

Библиотека предоставляет метод tabbable(node, options), который возвращает массив элементов, доступных для фокуса.

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

import { tabbable } from 'tabbable';

const container = document.getElementById('form-container');
const focusableElements = tabbable(container);

console.log(focusableElements);

  • node — родительский элемент, внутри которого выполняется поиск фокусируемых элементов.

  • options — объект с дополнительными настройками поиска, например:

    • includeContainer (boolean) — учитывать сам контейнер как потенциальный фокусируемый элемент.
    • getShadowRoot (function) — для работы с теневыми DOM.

Влияние атрибута tabindex

Атрибут tabindex играет ключевую роль в определении фокусируемости:

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

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

Исключения и особенности

Некоторые элементы, даже при видимости и правильных атрибутах, могут быть исключены из табуляции:

  • Элементы с CSS overflow: hidden и недоступными для визуального взаимодействия.
  • <a> без href, если не задан tabindex.
  • Элементы внутри display: none родителя или скрытые через aria-hidden="true".

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

Для элементов внутри shadow DOM библиотека поддерживает настройку:

const focusableShadowElements = tabbable(container, {
  getShadowRoot: el => el.shadowRoot
});

Это позволяет корректно обрабатывать компоненты веб-компонентов и искать фокусируемые элементы глубоко в теневых корнях.

Сортировка элементов по фокусируемости

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

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

Это позволяет точно моделировать поведение браузера при навигации клавишей Tab.

Проверка, является ли элемент фокусируемым

Иногда требуется проверить конкретный элемент:

import { isFocusable } from 'tabbable';

const button = document.querySelector('button.submit');
if (isFocusable(button)) {
  button.focus();
}

Функция isFocusable учитывает все условия: видимость, атрибуты, состояние disabled и CSS.

Практическое применение

  • Управление порядком фокуса: создание модальных окон, вкладок и интерактивных форм.
  • Доступность: корректная работа клавиатурной навигации для пользователей с ограничениями.
  • Тестирование UI: проверка того, какие элементы реально доступны для фокуса в сложных интерфейсах.

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

Оглавление