Назначение и отличия от tabbable

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

Основные задачи Tabbable

1. Идентификация фокусируемых элементов Tabbable обходит DOM и формирует список элементов, на которые можно переместить фокус с помощью клавиши Tab. В отличие от простого использования document.querySelectorAll('input, button, a, select, textarea'), библиотека учитывает:

   • атрибуты tabindex (включая отрицательные значения);
   • видимость элементов (display: none, visibility: hidden);
   • элементы внутри <details> и <template>;
   • ARIA-атрибуты, влияющие на фокусируемость (aria-hidden).

2. Порядок фокусировки Tabbable сортирует элементы по порядку табуляции, который может отличаться от порядка их расположения в DOM:

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

3. Фильтрация неактивных элементов В список не включаются:

   • элементы с disabled;
   • элементы с tabindex="-1" (если не требуется фокусировать программно);
   • скрытые или невидимые элементы.

Отличия от библиотеки tabbable (классического варианта)

Хотя названия схожи, современная библиотека Tabbable имеет ряд ключевых отличий:

Современная Tabbable ориентирована на современные веб-приложения, где используются динамические интерфейсы, компоненты внутри Shadow DOM, виртуальные списки и сложные формы. Она позволяет не только вычислять текущий порядок табуляции, но и корректно реагировать на динамические изменения DOM, что критично для SPA и React-приложений.

Основные методы и использование

Импорт и базовый вызов:

import { tabbable } from 'tabbable';

const container = document.querySelector('#form');
const focusableElements = tabbable(container);
console.log(focusableElements);

• tabbable(container, options) возвращает массив фокусируемых элементов внутри container.

• Опции позволяют настроить фильтры:

  • includeContainer — включать сам контейнер, если он фокусируемый.
  • getShadowRoot — функция для обработки Shadow DOM.
  • displayCheck — проверка видимости элементов ('full', 'non-zero').

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

const visibleFocusable = tabbable(container, {
  displayCheck: 'full'
}).filter(el => !el.hasAttribute('aria-hidden'));

Практическая ценность

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

Вывод

Tabbable — это современный, модульный инструмент для работы с фокусируемыми элементами, предоставляющий точный контроль над порядком табуляции и совместимость с современными веб-стандартами. Его отличия от классического tabbable заключаются в расширенной поддержке Shadow DOM, ARIA, корректной сортировке по tabindex и минимальных зависимостях, что делает его предпочтительным выбором для современных веб-приложений.