Игнорирование элементов через data-атрибуты

Библиотека Focus-trap предназначена для управления фокусом внутри заданного контейнера. Основная задача — удерживать клавиатурный фокус в пределах определённой области, например, модальных окон, всплывающих меню или интерактивных компонентов. В некоторых случаях требуется, чтобы отдельные элементы внутри контейнера игнорировались при циклировании фокуса. Для этого используется возможность работы с data-атрибутами.

Атрибут data-focus-trap-ignore

Focus-trap поддерживает специальный атрибут:

<button data-focus-trap-ignore>Игнорируемая кнопка</button>

Элементы с этим атрибутом не будут включены в цикл фокуса. Это означает:

  • Клавиша Tab при переходе не остановится на этом элементе.
  • Shift + Tab также пропустит элемент.
  • События фокуса не будут срабатывать для этих элементов внутри trap.

Важно: атрибут работает только внутри контейнера, на который активирован trap.

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

Модальное окно с кнопкой закрытия вне фокуса

<div id="modal" class="modal">
  <button class="modal-close" data-focus-trap-ignore>×</button>
  <input type="text" placeholder="Имя">
  <input type="text" placeholder="Email">
  <button>Отправить</button>
</div>
import { createFocusTrap } from 'focus-trap';

const modal = document.getElementById('modal');

const trap = createFocusTrap(modal, {
  escapeDeactivates: true
});

trap.activate();

В этом примере кнопка закрытия не участвует в цикле фокуса, что позволяет пользователю использовать клавиши Tab исключительно для полей формы и кнопки отправки.

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

Можно назначить data-focus-trap-ignore сразу нескольким элементам:

<input type="checkbox" data-focus-trap-ignore>
<a href="#" data-focus-trap-ignore>Ссылка вне фокуса</a>

Focus-trap корректно обрабатывает список всех игнорируемых элементов, обеспечивая непрерывность фокусировки остальных интерактивных компонентов.

Игнорирование через кастомный селектор

Помимо прямого data-focus-trap-ignore, Focus-trap позволяет задать селектор для игнорирования элементов в конфигурации:

const trap = createFocusTrap(modal, {
  escapeDeactivates: true,
  allowOutsideClick: true,
  tabbableOptions: {
    displayCheck: 'none', // игнорировать скрытые элементы
  },
  initialFocus: '#modal input:first-child',
  ignoreSelector: '[data-focus-trap-ignore]' // кастомный селектор
});

Преимущества такого подхода:

  • Можно использовать другие атрибуты или классы вместо стандартного data-focus-trap-ignore.
  • Гибко управлять набором игнорируемых элементов без изменения HTML.

Ограничения и рекомендации

  • Игнорируемый элемент не блокирует фокус, но если на нём стоит autofocus, Focus-trap не активирует его автоматически.
  • Для динамически добавляемых элементов необходимо обновлять или переактивировать trap, чтобы новые игнорируемые элементы были учтены.
  • Игнорирование работает только для фокусируемых элементов (инпуты, кнопки, ссылки и т.д.). Элементы без возможности фокуса автоматически исключаются из цикла.

Взаимодействие с другими опциями

data-focus-trap-ignore корректно сочетается с:

  • initialFocus — игнорируемые элементы не будут автоматически получать фокус.
  • clickOutsideDeactivates — клик по игнорируемому элементу можно обработать отдельно, не нарушая trap.
  • returnFocusOnDeactivate — после деактивации trap фокус вернётся к исходному элементу, минуя игнорируемые элементы.

Использование data-focus-trap-ignore обеспечивает точное управление фокусом, улучшая UX интерактивных компонентов и предотвращая случайные остановки на ненужных элементах. Такой подход особенно полезен для сложных интерфейсов с модальными окнами, всплывающими подсказками и кастомными формами.

Оглавление