Проверка отдельных элементов

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

Главный принцип работы — фильтрация элементов DOM по их способности быть фокусируемыми через клавиатуру. Это позволяет строить доступные интерфейсы и управлять порядком навигации по элементам.

Функции и экспортируемые методы

Основной экспорт библиотеки — функция tabbable(), которая принимает контейнер DOM и возвращает массив элементов, доступных для табуляции. Сигнатура:

tabbable(container: HTMLElement, options?: {includeContainer?: boolean, displayCheck?: "full" | "non-zero" | "none"}): HTMLElement[]

  • container — элемент, внутри которого производится поиск табулируемых элементов.

  • options.includeContainer — если true, контейнер будет проверяться на фокусируемость наряду с дочерними элементами.

  • options.displayCheck — определяет метод проверки видимости элементов:

    • "full" — элементы полностью видимы (стандартная проверка);
    • "non-zero" — элементы с ненулевым размером;
    • "none" — отключает проверку видимости.

Возвращается массив элементов, отсортированных в порядке их естественной табуляции.

Проверка отдельных элементов

Для проверки конкретного элемента на возможность получения фокуса используется функция isTabbable():

isTabbable(element: HTMLElement, options?: {displayCheck?: "full" | "non-zero" | "none"}): boolean
  • element — проверяемый элемент.
  • options.displayCheck — аналогично опции в tabbable(), управляет проверкой видимости.
  • Возвращает true, если элемент может быть включен в последовательность табуляции, иначе false.

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

const button = document.querySelector('button#submit');
if (isTabbable(button)) {
  console.log("Кнопка доступна для табуляции");
}

Особенности проверки:

  1. Элементы с атрибутом disabled всегда исключаются.
  2. Элементы с tabindex="-1" игнорируются.
  3. Элементы, скрытые через display: none или visibility: hidden, исключаются при проверке "full" и "non-zero".
  4. Элементы с opacity: 0 включаются, если только используется "full" проверка, которая учитывает видимость через CSS.

Атрибут tabindex и его влияние

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

Tabbable учитывает все эти значения при вычислении списка табулируемых элементов и при проверке конкретного элемента.

Влияние стилей и контейнеров

Для точной проверки фокусируемости библиотека анализирует компьютед стили:

  • display: none и visibility: hidden исключают элемент.
  • Родитель с display: none делает недоступными все дочерние элементы.
  • Элементы с position: fixed или absolute остаются фокусируемыми, если видимы.
  • overflow: hidden не влияет на проверку табуляции.

Использование опции displayCheck: "none" позволяет игнорировать визуальную видимость и проверять только атрибуты и tabindex.

Практические примеры

Проверка кнопки внутри модального окна

const modal = document.getElementById('modal');
const submitButton = modal.querySelector('button.submit');

if (isTabbable(submitButton)) {
  submitButton.focus();
}

Сбор всех табулируемых элементов формы

const form = document.querySelector('form#registration');
const tabbableFields = tabbable(form);

tabbableFields.forEach((field, index) => {
  console.log(index, field.tagName, field.id);
});

Проверка контейнера с опцией includeContainer

const container = document.getElementById('container');
const tabbableElements = tabbable(container, {includeContainer: true});

console.log(tabbableElements.includes(container)); // true, если контейнер фокусируем

Взаимодействие с пользовательскими компонентами

  • Для кастомных элементов (например, <div role="button">) важно правильно выставлять tabindex и проверять доступность через isTabbable().
  • Элементы с динамическим display требуют повторной проверки после изменения DOM или стилей.

Итоговое понимание проверки отдельных элементов

  • isTabbable() — точный инструмент для определения, может ли элемент получать фокус с клавиатуры.
  • Проверка учитывает атрибуты, CSS, родительские элементы и порядок табуляции.
  • Совместное использование с tabbable() позволяет строить корректные и доступные интерфейсы с управляемой навигацией клавиатурой.

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

Оглавление