ARIA grid роль

Роль grid в ARIA используется для описания сложных таблиц с возможностью интерактивного управления фокусом и навигацией через клавиатуру. Это расширение традиционной роли table, предоставляющее более гибкую модель взаимодействия для пользователей ассистивных технологий. Основная цель роли grid — предоставить структуру, поддерживающую навигацию по ячейкам с помощью клавиатуры, что критично для доступных веб-приложений.

В React Aria роль grid реализуется через хуки, которые автоматически добавляют необходимые атрибуты ARIA, обработку фокуса и управление клавиатурными событиями.

Использование useGrid в React Aria

Хук useGrid является ядром для создания ARIA grid. Он обеспечивает:

  • Установку атрибутов role="grid" и aria-readonly, если сетка только для чтения.
  • Управление фокусом на уровне ячеек.
  • Обработку событий клавиатуры для навигации (стрелки, Home, End, Page Up, Page Down).

Пример базовой структуры:

import { useGrid } from '@react-aria/grid';
import { useGridState } from '@react-stately/grid';

function DataGrid(props) {
  let state = useGridState(props);
  let ref = React.useRef();
  let { gridProps } = useGrid(props, state, ref);

  return (
    <div {...gridProps} ref={ref}>
      {state.collection.map((row) => (
        <div role="row" key={row.key}>
          {row.childNodes.map((cell) => (
            <div role="gridcell" key={cell.key}>
              {cell.rendered}
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

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

  • state.collection — структура данных с коллекцией строк и ячеек.
  • role="row" — каждая строка сетки.
  • role="gridcell" — каждая интерактивная ячейка.

useGrid управляет табуляцией и стрелками, делая сетку полностью доступной.

Атрибуты ARIA для grid

Роль grid требует специфических атрибутов для корректной работы ассистивных технологий:

  • aria-readonly — если ячейки нельзя редактировать.
  • aria-multiselectable — если разрешен множественный выбор ячеек.
  • aria-rowcount и aria-colcount — указывают размеры сетки.
  • aria-activedescendant — указывает текущую ячейку с фокусом.

React Aria автоматически добавляет эти атрибуты через хук useGrid на основе состояния useGridState.

Управление состоянием с useGridState

useGridState обеспечивает:

  • Текущее положение фокуса в сетке.
  • Выделение и множественный выбор ячеек.
  • Поддержку динамических изменений данных.

Пример:

import { useGridState } from '@react-stately/grid';

let state = useGridState({
  selectionMode: 'multiple', // single, none
  collection: rowsData, // массив строк и ячеек
});

Параметры selectionMode управляют поведением выделения:

  • none — выделение отключено.
  • single — разрешен только один выделенный элемент.
  • multiple — возможен множественный выбор.

Навигация по сетке

Клавиатурная навигация реализуется с помощью:

  • Arrow Up / Down / Left / Right — перемещение по ячейкам.
  • Home / End — переход к первой или последней ячейке строки.
  • Ctrl + Home / Ctrl + End — переход к первой или последней ячейке всей сетки.
  • Space / Enter — выбор ячейки, если разрешено выделение.

React Aria связывает эти события с состоянием через useGrid и useGridState, автоматически обновляя aria-activedescendant.

Разделение на строки и ячейки

Для правильной семантики важно:

  • Каждая строка имеет role="row".
  • Ячейки внутри строки имеют role="gridcell".
  • Если ячейка содержит интерактивный элемент (например, кнопку или ссылку), внутри неё разрешено использовать role="button" или role="link" без нарушения структуры grid.

Пример вложенной интерактивной ячейки:

<div role="gridcell" key={cell.key}>
  <button onCl ick={() => doAction(cell.key)}>
    {cell.rendered}
  </button>
</div>

Поддержка динамических данных

React Aria позволяет безопасно работать с сетками, где количество строк и колонок может изменяться. Использование useGridState гарантирует:

  • Автоматическое обновление aria-rowcount и aria-colcount.
  • Поддержку сохранения фокуса при добавлении или удалении строк.
  • Корректное управление выделением ячеек в реальном времени.

Лучшие практики при создании ARIA grid

  • Сохранять семантику ARIA — каждый элемент сетки должен иметь правильные роли и атрибуты.
  • Обеспечить фокусируемость ячеек — используйте tabIndex={-1} для всех ячеек кроме активной.
  • Использовать aria-readonly для статических сеток.
  • Поддерживать клавиатурную навигацию даже в сетках с кастомными компонентами.
  • Минимизировать вложенность интерактивных элементов внутри gridcell, чтобы не сломать фокус.

Интеграция с другими хуками React Aria

Grid можно сочетать с:

  • useSelection — для более сложного управления выбором.
  • useFocusRing — для визуализации фокуса.
  • useTableKeyboardNavigation — для кастомной обработки клавиш, если стандартной недостаточно.

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

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

Оглавление