Ограничение области поиска

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

Использование контейнера для ограничения поиска

Функция tabbable() принимает первым аргументом контейнер DOM, внутри которого будет происходить поиск. Если контейнер не указан, поиск выполняется по всему документу.

import { tabbable } from 'tabbable';

const container = document.getElementById('form-section');
const focusableElements = tabbable(container);

console.log(focusableElements); 
// выведет только элементы внутри #form-section, доступные для Tab

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

Ограничение поиска с использованием CSS-селекторов

Библиотека позволяет использовать селекторы CSS совместно с контейнерами для более точного контроля. Например, можно исключить элементы с определённым классом:

const focusableInputs = tabbable(container).filter(el => !el.matches('.disabled'));

Таким образом, поиск становится гибким и может учитывать динамические состояния элементов: скрытые, отключённые или замороженные элементы будут исключены.

Глубокий поиск и вложенные контейнеры

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



const modalElements = tabbable(document.getElementById('modal'));
// Включает  и

Важно: если внутри контейнера есть скрытые блоки (display: none, visibility: hidden), они автоматически исключаются из поиска.

Исключение элементов из области поиска

Кроме фильтрации через CSS, библиотека поддерживает исключения через атрибуты. Например, можно пометить элементы атрибутом tabindex="-1" для их игнорирования:

const visibleElements = tabbable(container);
// input с tabindex=-1 не попадет в массив

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

Комбинированные подходы

Для сложных интерфейсов часто используют сочетание контейнеров, фильтров и атрибутов:

const formContainer = document.getElementById('form');
const focusable = tabbable(formContainer)
  .filter(el => !el.disabled && !el.closest('.hidden-section'));

console.log(focusable);
  • tabbable(formContainer) ограничивает область поиска.
  • .filter(el => !el.disabled) исключает отключённые элементы.
  • .closest('.hidden-section') позволяет исключить целые скрытые секции.

Такой подход гарантирует точный контроль над навигацией по клавише Tab.

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

  • Модальные окна: поиск только внутри модального окна предотвращает “выпадение” фокуса за пределы диалога.
  • Формы и виджеты: ограничение области поиска упрощает управление фокусом для сложных компонентов.
  • Динамически создаваемый контент: новые элементы автоматически учитываются при вызове tabbable(container).

Подводка к управлению фокусом

Ограничение области поиска является фундаментом для управления последовательностью фокуса. В сочетании с методами focus() и focusFirst() из библиотек, основанных на tabbable, можно создавать полностью управляемые пользовательские интерфейсы, где навигация клавишами Tab предсказуема и безопасна.

Оглавление