Визуализация порядка табуляции

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

Tabbable анализирует DOM и выделяет фокусируемые элементы, включая <a>, <button>, <input>, <select>, <textarea> и элементы с атрибутом tabindex. При этом учитываются следующие особенности:

Элементы с disabled исключаются из списка.
Элементы с tabindex="-1" игнорируются, так как они не должны участвовать в последовательности табуляции.
Видимость элементов учитывается: элементы с display: none или visibility: hidden не включаются.

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

Получение списка tabbable-элементов

Для извлечения элементов используется функция:

import { tabbable } from 'tabbable';

const elements = tabbable(document.body);
console.log(elements);

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

Ключевые свойства элементов

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

tabindex — определяет приоритет фокусировки. Элементы с положительным tabindex получают фокус раньше, чем элементы с tabindex=0.
disabled — если элемент отключен, он исключается.
autofocus — элементы с этим атрибутом получают фокус сразу при загрузке страницы.

Визуализация последовательности табуляции

Для наглядного отображения порядка табуляции удобно создавать анимацию или нумерованный список, где каждому tabbable-элементу присваивается индекс из массива tabbable(). Пример:

const elements = tabbable(document.body);

elements.forEach((el, index) => {
  const badge = document.createElement('span');
  badge.textContent = index + 1;
  badge.style.position = 'absolute';
  badge.style.background = 'red';
  badge.style.color = 'white';
  badge.style.fontSize = '12px';
  badge.style.padding = '2px 5px';
  badge.style.borderRadius = '50%';
  badge.style.top = `${el.offsetTop}px`;
  badge.style.left = `${el.offsetLeft}px`;
  document.body.appendChild(badge);
});

Этот подход позволяет визуально отследить порядок фокусировки и выявить элементы с неожиданным tabindex.

Управление сложными структурами

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

Ограничить фокус в пределах модального окна, чтобы пользователь не мог случайно выйти за пределы компонента.
Исключить скрытые или временно неактивные элементы.

Пример ограничения табуляции внутри контейнера:

const modal = document.querySelector('.modal');
const modalTabbable = tabbable(modal);

document.addEventListener('keydown', (e) => {
  if (e.key === 'Tab') {
    const focusedIndex = modalTabbable.indexOf(document.activeElement);
    if (e.shiftKey && focusedIndex === 0) {
      e.preventDefault();
      modalTabbable[modalTabbable.length - 1].focus();
    } else if (!e.shiftKey && focusedIndex === modalTabbable.length - 1) {
      e.preventDefault();
      modalTabbable[0].focus();
    }
  }
});

Взаимодействие с динамическим контентом

Tabbable автоматически не отслеживает изменения DOM. При добавлении или удалении элементов требуется повторный вызов функции tabbable() для актуализации списка. Для удобства можно создать обёртку:

function updateTabbable(container) {
  return tabbable(container);
}

const container = document.querySelector('#dynamic-form');
let currentTabbable = updateTabbable(container);

// После добавления нового элемента
currentTabbable = updateTabbable(container);

Отладка и доступность

Использование Tabbable важно не только для визуализации, но и для проверки доступности интерфейсов:

Проверка порядка табуляции помогает убедиться, что элементы фокусируются логически и последовательно.
Выявляются элементы с tabindex > 0, которые могут нарушать естественный поток фокуса.
Позволяет протестировать интерфейс с клавиатурой без использования сторонних инструментов.