Сравнение с focus-trap

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

Tabbable опирается на DOM API, анализируя:

  • HTML-теги, которые по умолчанию могут получать фокус: <a>, <button>, <input>, <select>, <textarea>.
  • Атрибуты, определяющие возможность фокусировки: tabindex, disabled, hidden.
  • Стили CSS, влияющие на видимость: display: none, visibility: hidden и другие. Элементы, которые невидимы, автоматически исключаются.

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

API и основные функции

Tabbable предоставляет несколько ключевых функций:

  1. tabbable(container, options) Возвращает массив всех элементов внутри container, которые могут получать фокус. Опции позволяют:

    • Игнорировать элементы с определёнными селекторами.
    • Включать или исключать элементы с отрицательным tabindex.

  2. isTabbable(element) Проверяет, может ли конкретный элемент быть доступным через Tab. Возвращает булево значение.

  3. focusable(container, options) Похож на tabbable, но включает элементы, которые могут быть сфокусированы программно, даже если они не включаются в естественный порядок Tab.

Ключевой момент: tabbable ориентирован на естественный порядок навигации, тогда как focusable — на потенциальную возможность программного фокуса.

Сравнение с focus-trap

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

Параметр Tabbable focus-trap
Основная функция Определение всех tabbable-элементов Управление фокусом внутри контейнера
Вывод Массив элементов Не возвращает элементы напрямую, контролирует фокус
Навигация Не вмешивается в поведение Tab Перехватывает Tab и Shift+Tab, циклично перемещает фокус
Применение Анализ DOM и порядок фокуса Создание модальных окон, диалогов, всплывающих панелей

Focus-trap использует Tabbable внутри себя для определения, какие элементы внутри контейнера можно циклически обходить. То есть Tabbable — инструмент низкого уровня, focus-trap — инструмент высокого уровня для контроля фокуса.

Особенности работы Tabbable

  1. Сортировка по порядку DOM Элементы возвращаются в том порядке, в котором они появляются в документе. Это важно для логики навигации, так как Tab следует естественному порядку документа.

  2. Учет tabindex

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

  3. Интеграция с CSS Tabbable учитывает не только HTML-атрибуты, но и видимость элементов через стили. Скрытые элементы исключаются из массива.

  4. Опции фильтрации Позволяют исключать определённые элементы по селектору или включать только элементы с определёнными характеристиками. Например:

    const items = tabbable(container, { includeContainer: true, getShadowRoot: true });

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

  • Модальные окна: определение всех элементов внутри модального диалога для корректной установки фокуса.
  • Динамические интерфейсы: получение текущего списка фокусируемых элементов после добавления или удаления DOM-узлов.
  • Кастомные виджеты: управление доступностью элементов без изменения их HTML-разметки.

Взаимодействие с focus-trap

Focus-trap строится на базе Tabbable, поэтому ключевое различие — уровень абстракции. Tabbable предоставляет данные, focus-trap использует их для:

  • Удержания фокуса внутри контейнера.
  • Циклической навигации по элементам.
  • Автоматического перемещения фокуса на первый элемент при активации контейнера.

Использование Tabbable самостоятельно полезно для анализа и кастомного управления порядком фокусировки, тогда как focus-trap упрощает задачу контроля пользовательского опыта в модальных компонентах.

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

Оглавление