Поэтапное внедрение

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

Установка и настройка

Для начала необходимо установить пакет:

npm install @react-aria/utils @react-aria/button @react-aria/listbox @react-aria/overlays

Важно отметить, что React Aria ориентирован на React 18 и выше. После установки подключение хуков выглядит так:

import {useButton} from '@react-aria/button';
import {useListBox, useOption} from '@react-aria/listbox';
import {useOverlay} from '@react-aria/overlays';

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

Построение кнопки с использованием useButton

Хук useButton управляет поведением кнопки, включая обработку нажатий, фокус и клавиатурные события. Пример:

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

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

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

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

  • ref обязателен для корректной работы хуков.
  • buttonProps содержит атрибуты ARIA, обработчики событий onClick, onKeyDown и onKeyUp.
  • Этот подход гарантирует доступность кнопки без ручного добавления ARIA-атрибутов.

Списки и опции с useListBox и useOption

Для создания доступного списка с выбором элементов используется комбинация useListBox и useOption. Пример:

import {useListBox, useOption} from '@react-aria/listbox';
import {useListState} from '@react-stately/list';

function ListBox({items, onSelectionChange}) {
  let state = useListState({items, onSelectionChange});
  let ref = React.useRef();
  let {listBoxProps} = useListBox({}, state, ref);

  return (
    <ul {...listBoxProps} ref={ref}>
      {state.collection.map(item => (
        <Option key={item.key} item={item} state={state} />
      ))}
    </ul>
  );
}

function Option({item, state}) {
  let ref = React.useRef();
  let {optionProps, isSelected, isFocused} = useOption({key: item.key}, state, ref);

  return (
    <li
      {...optionProps}
      ref={ref}
      style={{
        background: isFocused ? 'lightblue' : 'transparent',
        fontWeight: isSelected ? 'bold' : 'normal'
      }}
    >
      {item.rendered}
    </li>
  );
}

Важные аспекты:

  • useListState управляет внутренним состоянием выбора и фокуса.
  • optionProps автоматически добавляет ARIA-атрибуты aria-selected, role="option" и обработчики клавиатуры.
  • Реализация визуальных эффектов (цвет, выделение) отделена от логики доступности.

Модальные окна и оверлеи с useOverlay

React Aria предоставляет хуки для управления оверлеями и модальными окнами с учетом доступности:

import {useOverlay, usePreventScroll} from '@react-aria/overlays';

function Modal({isOpen, onClose, children}) {
  let ref = React.useRef();
  let {overlayProps} = useOverlay({onClose, isOpen, isDismissable: true}, ref);
  usePreventScroll();

  if (!isOpen) return null;

  return (
    <div {...overlayProps} ref={ref} style={{position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.5)'}}>
      <div style={{background: 'white', margin: 'auto', padding: 20}}>
        {children}
      </div>
    </div>
  );
}

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

  • useOverlay обрабатывает закрытие по Escape и клику вне модального окна.
  • usePreventScroll блокирует прокрутку фона при открытой модалке.
  • Взаимодействие с клавиатурой и фокусом полностью автоматизировано.

Интеграция с собственными компонентами

React Aria строится на принципе «логика отделена от визуальной реализации». Это позволяет внедрять библиотеку поэтапно:

  1. Начать с кнопок и интерактивных элементов.
  2. Добавить списки, селекты и опции.
  3. Интегрировать оверлеи, модальные окна и тултипы.
  4. Постепенно заменять существующие компоненты на доступные версии, сохраняя визуальный стиль.

Советы по поэтапному внедрению

  • Использовать хуки вместе с рефами, не модифицируя DOM напрямую.
  • Отделять визуальную стилизацию от логики управления доступностью.
  • Проверять работу клавиатуры и вспомогательных технологий после каждого этапа.
  • Сохранять состояние выбора и фокуса в useListState или аналогичных структурах для сложных компонентов.

Поэтапное внедрение React Aria позволяет минимизировать риск регресса и постепенно улучшать доступность приложения без глобальной переработки интерфейса.

Оглавление