useInteractionModality для режима ввода

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

Основные возможности

  1. Определение способа взаимодействия Хук возвращает объект с текущей модальностью (keyboard, pointer, virtual, focus) и обновляет её автоматически при изменении способа ввода.

  2. Управление фокусом и стилями Благодаря useInteractionModality можно применять разные стили фокуса: например, показывать видимую рамку при клавиатурном вводе и скрывать её при кликах мышью. Это предотвращает раздражение пользователей и улучшает UX.

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

Сигнатура и использование

import { useInteractionModality } from '@react-aria/interactions';

function Component() {
  let { modality } = useInteractionModality();
  
  return (
    <div>
      Текущий способ ввода: {modality}
    </div>
  );
}
  • modality — строка, отражающая текущий способ взаимодействия (keyboard, pointer, virtual, focus).
  • Хук автоматически отслеживает события keydown, pointerdown, focus и обновляет значение modality.

Детали работы

  1. Мышь и сенсорные устройства (pointer) Любое событие pointerdown переключает модальность на pointer. Это позволяет скрывать фокусные индикаторы для мыши, но оставлять их для клавиатуры.

  2. Клавиатура (keyboard) При первом событии keydown модальность изменяется на keyboard. Это важно для компонентов с доступными навигационными элементами, такими как кнопки и вкладки, чтобы пользователь видел фокусный индикатор.

  3. Виртуальные и вспомогательные технологии (virtual) Используется, когда взаимодействие идет через экранный чтец или другие вспомогательные технологии. Это позволяет компонентам корректно реагировать на aria-activedescendant и другие атрибуты доступности.

Практические примеры

Динамическое отображение фокуса

import { useInteractionModality } from '@react-aria/interactions';
import { useState } from 'react';

function Button() {
  let { modality } = useInteractionModality();
  let [focused, setFocused] = useState(false);

  return (
    <button
      onFo cus={() => setFocused(true)}
      onB lur={() => setFocused(false)}
      style={{
        outline: focused && modality === 'keyboard' ? '2px solid blue' : 'none'
      }}
    >
      Нажми меня
    </button>
  );
}

Здесь фокусная рамка появляется только при клавиатурном вводе, что соответствует стандартам доступности.

Адаптация взаимодействия для сложных компонентов

Для компонентов, таких как селекты или модальные окна, знание текущей модальности позволяет:

  • Выбирать стратегию открытия/закрытия элементов (например, открывать меню по наведению мыши, но по Enter при клавиатуре).
  • Применять правильные атрибуты ARIA в зависимости от способа взаимодействия.
  • Сохранять естественное поведение для пользователей с экранными чтецами.

Важные рекомендации

  1. Не хранить модальность в глобальном состоянии Модальность зависит от текущего пользовательского действия. React Aria автоматически отслеживает её локально, что уменьшает вероятность ошибок и гонок состояний.

  2. Комбинировать с другими хуками React Aria Хуки useFocusRing и usePress отлично интегрируются с useInteractionModality, позволяя строить доступные и отзывчивые интерфейсы.

  3. Учитывать сенсорные экраны На сенсорных устройствах модальность часто переключается между pointer и virtual, поэтому адаптация визуальных индикаторов должна быть гибкой.

Подводя к практическому использованию

useInteractionModality — это инструмент для управления адаптивным и доступным поведением компонентов. Его применение гарантирует:

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

Его комбинация с другими хуками React Aria позволяет создавать интерфейсы, которые выглядят одинаково удобно для всех пользователей и соответствуют стандартам доступности WAI-ARIA.

Оглавление