Скрытые и невидимые элементы

Библиотека Tabbable предназначена для определения элементов на веб-странице, которые могут быть достигнуты с помощью клавиши Tab. Она учитывает не только стандартные интерактивные элементы (<input>, <button>, <a> с href), но и элементы с атрибутом tabindex. Работа библиотеки строится на проверке видимости элемента, его состояния и возможностей для фокусировки.

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

Tabbable использует комплексную проверку видимости, чтобы исключить элементы, которые не должны быть доступны через Tab:

  1. CSS-свойство display Элементы с display: none автоматически игнорируются, так как они полностью скрыты из визуального потока документа.

  2. CSS-свойство visibility Элементы с visibility: hidden или visibility: collapse считаются невидимыми и исключаются из списка табуляции.

  3. Размер элемента Элементы с нулевой шириной или высотой (offsetWidth и offsetHeight равны 0) также не включаются, даже если видимость явно не отключена.

  4. Скрытые родительские элементы Если родительский элемент невидим (например, имеет display: none), дочерний элемент тоже не считается доступным для табуляции.

Атрибут tabindex

Tabindex определяет порядок фокусировки и возможность попадания элемента в таб-циклирование.

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

Tabbable учитывает tabindex, но игнорирует элементы с отрицательным значением при построении списка для стандартного Tab-перехода.

Обработка скрытых и отключённых элементов

Библиотека различает несколько типов элементов:

  • Отключённые элементы (disabled) Кнопки, поля ввода и другие элементы с disabled исключаются из табуляции. Даже при наличии tabindex="0" такие элементы не доступны через Tab.

  • Скрытые элементы (hidden атрибут или CSS) Элементы с атрибутом hidden полностью игнорируются. CSS-свойства display: none или visibility: hidden также исключают их.

  • Невидимые при наложении Элементы, расположенные вне видимой области (overflow: hidden или абсолютное позиционирование за пределами контейнера), остаются в DOM, но часто игнорируются в логике видимости библиотеки.

Методы и функции Tabbable

Основные функции предоставляют гибкий доступ к элементам страницы:

  • tabbable(container) Возвращает массив всех элементов, доступных для Tab в указанном контейнере. Учитывает видимость, tabindex и состояние disabled.

  • isTabbable(element) Проверяет, является ли конкретный элемент доступным для табуляции. Возвращает true или false.

  • focusable(container) Возвращает элементы, которые могут быть сфокусированы программно (включая элементы с tabindex="-1"). Полезно для работы с модальными окнами и кастомными интерфейсными компонентами.

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

  1. Фильтрация скрытых элементов

    import { tabbable } from 'tabbable';

const container = document.querySelector('.form-section');
const visibleElements = tabbable(container);
console.log(visibleElements);

    Этот код вернёт только видимые и активные элементы для Tab.

  2. Проверка конкретного элемента

    import { isTabbable } from 'tabbable';

const button = document.querySelector('#submit');
if (isTabbable(button)) {
  console.log('Элемент доступен через Tab');
}

  3. Работа с модальными окнами Для управления фокусом внутри модального окна удобно использовать комбинацию tabbable() и focusable(), чтобы обеспечить циклический Tab и исключить невидимые элементы.

Особенности при сложной вёрстке

  • Элементы внутри iframe Tabbable не автоматически обрабатывает содержимое iframe. Для этого нужно отдельно применять библиотеку внутри каждого фрейма.

  • Анимации и динамическая смена видимости Если элемент появляется через анимацию (opacity, transform) без изменения display или visibility, Tabbable может считать его доступным. Для корректной работы нужно учитывать окончательное состояние DOM.

  • Сложные компоненты UI Компоненты типа выпадающих списков, табов или аккордеонов должны управлять tabindex и состоянием disabled, чтобы библиотека правильно фильтровала элементы.

Выводы по работе с невидимыми элементами

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

Оглавление