Что такое React Aria

React Aria — это библиотека для работы с доступностью (accessibility, a11y) в приложениях на React. Она предоставляет низкоуровневые хуки и утилиты, позволяющие создавать интерфейсы, соответствующие стандартам WCAG и ARIA, без необходимости вручную управлять атрибутами и событиями доступности.

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

Хуки и их роли

React Aria предоставляет множество хуков, каждый из которых решает отдельную задачу по доступности.

useButton

Хук useButton позволяет сделать элемент интерактивным и управляемым с клавиатуры, поддерживая состояния pressed, disabled и корректное поведение с onClick.

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

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

function Button(props) {
  let ref = useRef();
  let {buttonProps} = useButton(props, ref);

  return ;
}

Ключевые моменты:

  • Автоматическая обработка нажатий клавиш Enter и Space.
  • Корректная установка ARIA-атрибутов, например aria-disabled.
  • Возможность кастомного рендера (не обязательно

useCheckbox

useCheckbox управляет состоянием и доступностью флажков. Он возвращает свойства для передачи элементу, включая checked, disabled, onChange.

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

  • Поддержка трёх состояний (checked, unchecked, mixed).
  • Автоматическое управление фокусом и клавиатурными событиями.

Пример:

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

function Checkbox({isSelected, onChange, children}) {
  let ref = useRef();
  let {inputProps} = useCheckbox({isSelected, onChange}, ref);

  return (
    
  );
}

useFocus

Хук useFocus отслеживает состояние фокуса элемента. Возвращает объект focusProps для передачи в компонент.

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

  • Управление фокусом с клавиатуры и мыши.
  • Поддержка визуальной индикации фокуса (isFocused).

useOverlay

Используется для управления всплывающими элементами (модальные окна, меню, тултипы). Особенности:

  • Автоматическое управление фокусом внутри оверлея.
  • Закрытие оверлея при нажатии вне элемента или на Escape.
  • Поддержка нескольких оверлеев с корректным фокус-менеджментом.
import {useOverlay} from '@react-aria/overlays';
import {useRef} from 'react';

function Modal({isOpen, onClose, children}) {
  let ref = useRef();
  let {overlayProps} = useOverlay({isOpen, onClose}, ref);

  if (!isOpen) return null;

  return (
    

      {children}
    

  );
}

Управление фокусом и клавиатурой

React Aria предоставляет утилиты для комплексного управления фокусом и навигацией с клавиатуры.

  • useFocusRing позволяет стилизовать элементы при фокусе с клавиатуры.
  • useKeyboard добавляет обработку событий клавиатуры на уровне компонента.
  • Хуки для меню, табов и листов (useMenu, useTabList, useListBox) обеспечивают правильное ARIA-поведение.

Поддержка локализации и интернационализации

React Aria интегрируется с React Stately для управления состоянием компонентов и поддерживает локализацию. Хуки позволяют автоматически адаптировать форматы дат, чисел и текстов в интерфейсе.

Пример:

import {useLocale} from '@react-aria/i18n';

function Greeting() {
  let {locale} = useLocale();
  return 
{`Текущий язык интерфейса: ${locale}`}
;
}

Основные принципы использования

  1. Разделение логики и рендеринга: React Aria предоставляет только логику доступности. Визуальная часть компонента остаётся полностью на разработчике.
  2. Следование стандартам ARIA: все хуки автоматически генерируют корректные ARIA-атрибуты.
  3. Совместимость с кастомными компонентами: нет привязки к конкретной разметке (div, span, button).

Примеры комбинирования хуков

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

function AccessibleButton({children, onPress}) {
  let ref = useRef();
  let {buttonProps} = useButton({onPress}, ref);
  let {focusProps, isFocusVisible} = useFocusRing();

  return (
    
  );
}

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

Взаимодействие с другими библиотеками

React Aria легко интегрируется с любыми CSS- и UI-библиотеками, такими как Tailwind, Material UI, Chakra UI, поскольку фокус делается на логике, а не на стилях. Компоненты остаются полностью кастомизируемыми и совместимыми с существующим дизайном.

Оглавление