Утилитарные хуки

React Aria предоставляет набор утилитарных хуков, которые обеспечивают доступность компонентов и управление состоянием без необходимости вручную работать с низкоуровневыми ARIA-атрибутами. Эти хуки позволяют создавать интерактивные элементы, соответствующие стандартам WCAG, с минимальным количеством кода.

useButton

Хук useButton используется для создания кнопок, которые корректно обрабатывают клавиатурные события и взаимодействие с экранными ридерами.

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

  • Обеспечивает поддержку клавиш Enter и Space для активации.
  • Автоматически добавляет role="button" и aria-pressed для toggle-кнопок.
  • Интегрируется с ref для корректного управления фокусом.

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

import { useButton } from '@react-aria/button';
import { useRef } from 'react';

function MyButton({ onPress, children }) {
  const ref = useRef();
  const { buttonProps } = useButton({ onPress }, ref);

  return (
    <button {...buttonProps} ref={ref}>
      {children}
    </button>
  );
}

Ключевой момент: useButton не создаёт визуальный компонент, он предоставляет props, которые нужно применить к элементу интерфейса.

useCheckbox

Хук useCheckbox предназначен для управления состоянием и доступностью флажков (checkbox).

Особенности:

  • Автоматически добавляет role="checkbox" и aria-checked.
  • Поддержка состояния indeterminate.
  • Управление фокусом и событиями клавиатуры.

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

import { useCheckbox } from '@react-aria/checkbox';
import { useRef, useState } from 'react';

function MyCheckbox() {
  const [isSelected, setSelected] = useState(false);
  const ref = useRef();
  const { inputProps } = useCheckbox({
    isSelected,
    onChange: setSelected,
  }, ref);

  return <input {...inputProps} ref={ref} />;
}

Совет: useCheckbox можно интегрировать с кастомными визуальными элементами, сохраняя при этом полную доступность.

useFocus и useFocusRing

Эти хуки позволяют управлять состоянием фокуса и создавать визуальные эффекты при наведении клавиатурного фокуса.

  • useFocus предоставляет isFocused и события для отслеживания получения и потери фокуса.
  • useFocusRing добавляет дополнительные возможности, такие как определение, был ли фокус получен с клавиатуры или мышью, и предоставляет focusProps для применения к элементу.

Пример применения:

import { useFocusRing } from '@react-aria/focus';
import { useRef } from 'react';

function FocusableInput() {
  const ref = useRef();
  const { focusProps, isFocusVisible } = useFocusRing();

  return (
    <input
      {...focusProps}
      ref={ref}
      style={{
        outline: isFocusVisible ? '2px solid blue' : 'none'
      }}
    />
  );
}

Ключевой момент: useFocusRing особенно полезен для соблюдения WCAG при кастомных компонентах.

useHover

Хук useHover управляет состоянием наведения мыши и предоставляет необходимые ARIA-атрибуты для интерактивных элементов.

  • Возвращает isHovered для изменения стилей.
  • Обрабатывает события onMouseEnter и onMouseLeave.
  • Работает совместно с ref для точного отслеживания области наведения.
import { useHover } from '@react-aria/interactions';
import { useRef } from 'react';

function HoverableButton() {
  const ref = useRef();
  const { hoverProps, isHovered } = useHover({});

  return (
    <button
      {...hoverProps}
      ref={ref}
      style={{ backgroundColor: isHovered ? 'lightgray' : 'white' }}
    >
      Hover me
    </button>
  );
}

useToggle и useToggleState

Эти хуки управляют логическим состоянием включения/выключения элементов интерфейса, таких как переключатели (switch) и чекбоксы.

  • useToggleState создаёт состояние: isSelected и setSelected.
  • useToggle интегрирует состояние с ARIA-атрибутами и событиями.

Пример:

import { useToggleState } from '@react-stately/toggle';
import { useToggle } from '@react-aria/toggle';
import { useRef } from 'react';

function ToggleSwitch() {
  const state = useToggleState({});
  const ref = useRef();
  const { inputProps } = useToggle(state, ref);

  return <input {...inputProps} ref={ref} type="checkbox" />;
}

usePress

Хук usePress обрабатывает любые события активации для элементов, включая клики мышью, касания и клавиатурные нажатия.

Возможности:

  • Унифицированная обработка onPressStart, onPressEnd и onPress.
  • Поддержка мобильных и сенсорных интерфейсов.
  • Срабатывает даже при удержании элемента.
import { usePress } from '@react-aria/interactions';
import { useRef } from 'react';

function PressableDiv() {
  const ref = useRef();
  const { pressProps } = usePress({
    onPress: () => console.log('Pressed')
  }, ref);

  return <div {...pressProps} ref={ref}>Press me</div>;
}

useOverlay и useModal

Эти хуки управляют поверхностными компонентами, такими как модальные окна, всплывающие панели и тултипы.

  • useOverlay контролирует видимость и поведение закрытия при клике вне элемента.
  • useModal гарантирует, что фокус остаётся внутри модального окна и что фоновые элементы недоступны для навигации с клавиатуры.
import { useOverlay, useModal } from '@react-aria/overlays';
import { useRef } from 'react';

function Modal({ isOpen, onClose }) {
  const ref = useRef();
  const { overlayProps } = useOverlay({ isOpen, onClose }, ref);
  const { modalProps } = useModal();

  if (!isOpen) return null;

  return (
    <div {...overlayProps} {...modalProps} ref={ref}>
      <p>Modal content</p>
      <button onCl ick={onClose}>Close</button>
    </div>
  );
}

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

Сводка

Утилитарные хуки React Aria позволяют создавать доступные компоненты, минимизируя необходимость вручную работать с ARIA-атрибутами и событиями. Основные категории включают:

  • Интерактивные элементы: useButton, useCheckbox, useToggle.
  • Состояние взаимодействия: useFocus, useFocusRing, useHover, usePress.
  • Поверхностные компоненты: useOverlay, useModal.

Каждый хук возвращает props и состояние, которое можно применить к любому компоненту, сохраняя при этом полную совместимость с доступностью и стандартами WCAG. Их грамотное сочетание позволяет строить сложные интерфейсы с минимальным количеством низкоуровневого кода и полной поддержкой доступности.

Оглавление