Утилиты для ARIA-атрибутов

ARIA (Accessible Rich Internet Applications) — это набор атрибутов, предназначенных для повышения доступности веб-приложений. В React Aria библиотека предоставляет набор утилит и хуков, которые автоматически управляют ARIA-атрибутами и событиями для различных компонентов, таких как кнопки, меню, списки, табы и формы. Основная цель — сделать компоненты доступными без необходимости вручную писать сложные ARIA-атрибуты.

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

  • role — определяет роль элемента (например, button, menu, tab).
  • aria-* атрибуты — описывают состояние или свойства элемента (aria-expanded, aria-selected, aria-label).
  • keyboard взаимодействия — React Aria обеспечивает корректное управление фокусом и обработку клавиатуры, что критично для доступности.

Хуки для управления ARIA

useButton

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

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

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

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

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

  • Автоматически добавляет role="button", если элемент не <button>.
  • Управляет состоянием disabled.
  • Обеспечивает правильное управление фокусом и клавиатурными событиями (Enter, Space).

useCheckbox

useCheckbox упрощает работу с чекбоксами, синхронизируя состояние с ARIA-атрибутами.

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} />;
}

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

  • Автоматически устанавливает aria-checked.
  • Обеспечивает поддержку частичного состояния (aria-checked="mixed").
  • Поддерживает клавиатурное переключение с помощью Space.

useMenu и useMenuItem

Для создания доступных меню используется комбинация useMenu и useMenuItem.

import {useMenu, useMenuItem} from '@react-aria/menu';
import {useRef} from 'react';

function DropdownMenu({items}) {
  const ref = useRef();
  const {menuProps} = useMenu({}, ref);

  return (
    <ul {...menuProps} ref={ref}>
      {items.map(item => <MenuItem key={item.key} item={item} />)}
    </ul>
  );
}

function MenuItem({item}) {
  const ref = useRef();
  const {menuItemProps} = useMenuItem({key: item.key}, {}, ref);

  return <li {...menuItemProps} ref={ref}>{item.name}</li>;
}

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

  • role="menu" и role="menuitem" добавляются автоматически.
  • Поддерживаются клавиатурные навигации (ArrowUp, ArrowDown, Enter).
  • Управляется состояние выбора и фокусировки.

Полезные ARIA-утилиты

React Aria предоставляет низкоуровневые утилиты для работы с ARIA-атрибутами, которые можно комбинировать с кастомными компонентами:

  1. mergeProps — объединяет несколько наборов пропсов, корректно комбинируя события и ARIA-атрибуты.
import {mergeProps} from '@react-aria/utils';

const props = mergeProps(buttonProps, customProps);
  1. filterDOMProps — удаляет все нестандартные HTML-пропсы, чтобы избежать ошибок при рендере.
import {filterDOMProps} from '@react-aria/utils';

const cleanProps = filterDOMProps(props);
  1. useId — генерирует уникальные идентификаторы для ARIA-связей (aria-labelledby, aria-controls).
import {useId} from '@react-aria/utils';

const id = useId();
<input id={id} aria-labelledby={`${id}-label`} />

Управление состоянием через ARIA

В React Aria ARIA-атрибуты тесно связаны с состоянием компонентов. Например:

  • aria-expanded меняется в зависимости от того, открыто ли меню или аккордеон.
  • aria-checked синхронизируется с состоянием чекбокса или радио-кнопки.
  • aria-selected отражает выбор элемента в списке, вкладке или таблице.

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

Комбинация ARIA с кастомными компонентами

React Aria позволяет создавать полностью кастомные компоненты, сохраняя доступность. Принципы:

  • Пропсы хуков всегда распространяются на DOM-элементы ({...buttonProps}).
  • Использование ref обязательно для корректного управления фокусом.
  • ARIA-атрибуты комбинируются с визуальными стилями, не влияя на поведение для вспомогательных технологий.

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

function IconButton({icon, ...props}) {
  const ref = useRef();
  const {buttonProps} = useButton(props, ref);

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

Ключевые принципы работы с React Aria

  1. Все интерактивные элементы должны иметь правильные ARIA-атрибуты.
  2. Состояние компонентов синхронизируется с ARIA.
  3. Использование хуков позволяет отделить логику доступности от визуального представления.
  4. Низкоуровневые утилиты (mergeProps, filterDOMProps, useId) позволяют строить гибкие кастомные компоненты.
  5. Обработка клавиатуры и фокуса встроена в хуки, исключая необходимость ручного написания сложных обработчиков событий.

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

Оглавление