Управление порядком фокуса

В библиотеке React Aria управление фокусом строится на абстракциях, которые позволяют создавать доступные компоненты, соответствующие стандартам ARIA. Основной целью является обеспечение корректной навигации с клавиатуры и экранных читалок, что особенно важно для сложных интерфейсов с динамическим контентом.

Использование хуков useFocus и useFocusRing

useFocus предоставляет базовый набор свойств и методов для отслеживания состояния фокуса. Этот хук возвращает объект с ключевыми параметрами:

const { isFocused, focusProps } = useFocus();
  • isFocused — булевое значение, указывающее, находится ли элемент в фокусе.
  • focusProps — набор пропсов, которые нужно добавить к элементу для корректного управления фокусом.

Пример интеграции с кнопкой:

<button {...focusProps}>
  Кнопка
</button>
{isFocused && <span>Элемент в фокусе</span>}

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

const { isFocusVisible, focusProps } = useFocusRing();
  • isFocusVisible позволяет отрисовать кастомные индикаторы фокуса только тогда, когда это необходимо пользователю.

Управление табуляцией и порядок фокуса

В React Aria порядок фокуса управляется через useFocusable и контейнеры, поддерживающие управление фокусом, такие как FocusScope.

FocusScope

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

<FocusScope contain restoreFocus autoFocus>
  <ModalContent />
</FocusScope>
  • contain — удерживает фокус внутри компонента.
  • restoreFocus — возвращает фокус на предыдущий элемент после закрытия.
  • autoFocus — автоматически устанавливает фокус на первый доступный элемент внутри контейнера.

Использование FocusScope предотвращает «потерю» фокуса и обеспечивает предсказуемую навигацию для клавиатурного пользователя.

Доступ к фокусу через useFocusable

useFocusable предоставляет расширенные возможности контроля над фокусом, включая управление табуляцией и отслеживание состояния доступности:

const { focusProps, isFocused, isDisabled } = useFocusable({ disabled: false });
  • focusProps — добавляются к интерактивному элементу.
  • isFocused — определяет, находится ли элемент в фокусе.
  • isDisabled — состояние доступности элемента для фокусировки.

Можно комбинировать с useFocusRing для полной поддержки визуальной и программной индикации фокуса.

Динамическая фокусировка

Для компонентов, которые динамически добавляются в DOM, React Aria предоставляет методы программного управления фокусом. Например:

const ref = useRef();
useEffect(() => {
  if (shouldFocus) {
    ref.current.focus();
  }
}, [shouldFocus]);

В сочетании с FocusScope и хуками управления фокусом это позволяет корректно направлять внимание пользователя на новые интерактивные элементы без нарушения порядка табуляции.

Настройка последовательности табуляции

Последовательность табуляции в React Aria определяется естественным DOM-порядком, но может быть модифицирована с помощью tabIndex и управляемых фокус-контейнеров. Рекомендуется:

  • Элементы с интерактивной функцией всегда должны быть доступны через клавишу Tab.
  • Негативные tabIndex использовать для исключения элементов из последовательности.
  • Положительные tabIndex применять крайне редко, чтобы не нарушить стандартную навигацию.

Совместное использование с компонентами ARIA

React Aria автоматически синхронизирует управление фокусом с атрибутами ARIA, такими как aria-hidden, aria-modal, aria-disabled. Например, при создании модального окна:

<FocusScope contain restoreFocus>
  <div role="dialog" aria-modal="true">
    <input placeholder="Введите текст" />
    <button>Закрыть</button>
  </div>
</FocusScope>

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

Лучшие практики

  • Всегда использовать FocusScope для модальных окон, всплывающих панелей и меню.
  • Сочетать useFocusable и useFocusRing для полного контроля состояния фокуса и визуальной индикации.
  • Уважать естественный порядок DOM для табуляции, вмешиваясь только при необходимости.
  • Использовать рефы и эффекты для программной фокусировки динамически созданных элементов.

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

Оглавление