FloatingFocusManager

FloatingFocusManager — это утилита библиотеки Floating UI для управления фокусом внутри всплывающих элементов, таких как модальные окна, тултипы, поповеры и дропдауны. Она обеспечивает доступность интерфейсов и предотвращает потерю фокуса при взаимодействии с элементами на странице.

Основные задачи FloatingFocusManager

  1. Трабл с фокусом в модальных и всплывающих элементах В стандартном HTML при открытии всплывающего окна фокус может остаться на элементе, который находится за ним, что нарушает UX и стандарты доступности (WCAG). FloatingFocusManager перехватывает фокус и ограничивает его область действия внутри всплывающего контейнера.

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

  3. Возврат фокуса после закрытия После закрытия всплывающего окна фокус автоматически возвращается на элемент, с которого оно было вызвано, что улучшает взаимодействие с пользователем и поддерживает логическую последовательность действий.

Основные параметры

FloatingFocusManager реализуется как компонент-обёртка или функция, принимающая несколько ключевых параметров:

  • context: объект контекста Floating UI (useFloating) для привязки всплывающего окна к целевому элементу.
  • initialFocus: определяет элемент внутри всплывающего окна, на который будет установлен фокус при открытии. Может быть CSS-селектором, функцией или напрямую DOM-элементом.
  • returnFocus: булевое значение, указывающее, нужно ли возвращать фокус на исходный элемент при закрытии.
  • modal: булевое значение, определяющее, будет ли всплывающее окно модальным. При true фокус полностью ограничивается внутри окна.
  • order: определяет порядок обхода элементов для табуляции. Может быть 'content-first' (сначала контент, затем кнопки закрытия) или 'initial-focus-first'.

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

import { useFloating, FloatingFocusManager } from '@floating-ui/react';

function Popover({ isOpen, onClose }) {
  const { floating, reference } = useFloating();

  return (
    <>
      <button ref={reference}>Открыть поповер</button>

      {isOpen && (
        <FloatingFocusManager
          context={{ floating, reference }}
          initialFocus={() => document.getElementById('input')}
          returnFocus={true}
          modal={true}
        >
          <div ref={floating} role="dialog" aria-modal="true">
            <input id="input" placeholder="Введите текст" />
            <button onCl ick={onClose}>Закрыть</button>
          </div>
        </FloatingFocusManager>
      )}
    </>
  );
}

Объяснение:

  • context связывает всплывающее окно с кнопкой-источником.
  • initialFocus устанавливает фокус на input при открытии.
  • returnFocus гарантирует, что после закрытия кнопка снова получит фокус.
  • modal={true} блокирует взаимодействие с другими элементами страницы до закрытия.

Поведение при модальном и немодальном режиме

  • Модальный (modal=true)

    • Фокус полностью ограничен внутри всплывающего окна.
    • Остальная часть страницы недоступна для клавиатурной навигации.
    • Используется для диалогов и модальных поповеров.

  • Немодальный (modal=false)

    • Фокус может покинуть всплывающее окно.
    • Подходит для подсказок и неинтерактивных тултипов, где блокировка страницы не требуется.

Обработка динамического контента

FloatingFocusManager корректно работает с элементами, добавленными динамически после рендера. Например, если внутри модального окна появляются новые кнопки, они автоматически учитываются при навигации с помощью Tab и Shift+Tab.

Доступность и ARIA

Для соблюдения стандартов доступности важно:

  • Задавать role="dialog" для модальных окон.
  • Использовать aria-modal="true" при модальном режиме.
  • Указывать aria-labelledby и aria-describedby для описания диалога.

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

Практические рекомендации

  • Всегда определять initialFocus, чтобы фокус попадал на интерактивный элемент.
  • В модальных окнах включать returnFocus для улучшения навигации.
  • Для сложных форм или вложенных компонентов использовать комбинацию FloatingFocusManager и FloatingOverlay для полной блокировки взаимодействия с фоном.
  • Проверять поведение при клавишах Tab и Escape, чтобы избежать неожиданных переходов фокуса.

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

Оглавление