Когда использовать focus-trap

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

Фокусировка происходит автоматически: при активации trap фокус перемещается на первый фокусируемый элемент внутри контейнера. При навигации с помощью клавиши Tab или Shift+Tab перемещение циклично, возвращаясь к началу или концу списка элементов. Это исключает возможность потерять фокус, что критично для пользователей, использующих клавиатуру или вспомогательные технологии.

Когда применять focus-trap

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

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

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

Основные методы и конфигурация

Создание trap

import { createFocusTrap } from 'focus-trap';

const modal = document.getElementById('modal');
const trap = createFocusTrap(modal, {
  escapeDeactivates: true,
  clickOutsideDeactivates: true,
  initialFocus: '#first-input',
  fallbackFocus: '#modal'
});
  • escapeDeactivates — отключает trap при нажатии клавиши Escape.
  • clickOutsideDeactivates — позволяет закрыть trap при клике вне контейнера.
  • initialFocus — элемент, на который фокус переместится при активации.
  • fallbackFocus — элемент для установки фокуса, если ни один элемент не может быть сфокусирован.

Активация и деактивация trap

trap.activate(); // Включение управления фокусом
trap.deactivate(); // Выключение управления фокусом

События при активации и деактивации Focus-trap предоставляет хуки для выполнения действий при изменении состояния:

const trap = createFocusTrap(modal, {
  onActivate: () => console.log('Trap активирован'),
  onDeactivate: () => console.log('Trap деактивирован')
});

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

Продвинутое использование

Управление динамическими элементами Если внутри контейнера появляются новые фокусируемые элементы, focus-trap автоматически их учитывает. Для сложных случаев можно использовать метод updateContainerElements, чтобы явно обновить список элементов.

Интеграция с другими библиотеками Focus-trap совместим с библиотеками UI, такими как React или Vue, через обёртки. Например, при использовании React удобно создавать hook, который активирует trap при монтировании компонента и деактивирует при размонтировании.

Асинхронные модальные окна В случаях, когда контент модального окна загружается динамически, важно убедиться, что initialFocus указывает на существующий элемент. В противном случае trap может использовать fallbackFocus, предотвращая потерю фокуса.

Рекомендации по использованию

  1. Всегда указывать fallbackFocus для контейнеров, где может отсутствовать фокусируемый элемент.
  2. Использовать escapeDeactivates и clickOutsideDeactivates с осторожностью, если важно полностью контролировать закрытие модального окна через внутренние кнопки.
  3. Не дублировать trap на вложенных контейнерах, чтобы избежать конфликтов фокусировки.
  4. Тестировать с клавиатурой и экранными ридерами, чтобы убедиться, что навигация циклична и доступна для всех пользователей.

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

Оглавление