Только для чтения

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

Хуки для состояния только для чтения

Для компонентов, которые не предполагают изменения данных пользователем, ключевым является использование хуков, которые предоставляют только атрибуты доступа, без возможности изменения состояния:

  • useTextField с пропсом isReadOnly: применяется к текстовым полям, которые должны отображать данные без редактирования.
  • useCheckbox с isReadOnly: позволяет отображать состояние флажка без возможности его переключения.
  • useSwitch и isReadOnly: аналогично для переключателей.

Пример для текстового поля:

import { useTextField } from '@react-aria/textfield';
import { useRef } from 'react';

function ReadOnlyTextField({ label, value }) {
  const ref = useRef();
  const { labelProps, inputProps } = useTextField({ label, value, isReadOnly: true }, ref);

  return (
    <div>
      <label {...labelProps}>{label}</label>
      <input {...inputProps} ref={ref} />
    </div>
  );
}

В этом примере inputProps автоматически включает атрибут readOnly, а также все необходимые ARIA-атрибуты для корректного озвучивания вспомогательными технологиями.

Атрибуты ARIA для элементов только для чтения

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

  • aria-readonly="true": указывает, что элемент нельзя редактировать, но его содержимое доступно для выбора и копирования.
  • aria-disabled="true": блокирует взаимодействие с элементом, делая его полностью неактивным, в отличие от readonly.
  • role="textbox": для текстовых полей, даже если они только для чтения, важно сохранять роль для совместимости с вспомогательными технологиями.
  • aria-label или aria-labelledby: для описания содержимого элемента, особенно если визуальный лейбл отсутствует.

Применение этих атрибутов гарантирует, что элементы будут корректно интерпретированы экранными читалками и другими ассистивными инструментами.

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

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

  • useFocusRing: позволяет визуально выделить элемент при фокусе.
  • useFocus: предоставляет события onFocus и onBlur без вмешательства в логику редактирования.

Пример интеграции с текстовым полем:

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

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

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

Комбинация с другими хуками состояния

Даже в режиме только для чтения React Aria позволяет использовать:

  • useHover: для визуального выделения элемента при наведении мыши.
  • usePress: для обработки кликов, если нужно реагировать на взаимодействие без редактирования.
  • useKeyboard: для перехвата клавиш, например, для копирования содержимого через Ctrl+C.

Такой подход делает интерфейс интерактивным без нарушения принципа readonly.

Таблицы и списки только для чтения

Для сложных структур, таких как таблицы или списки, React Aria предоставляет хуки:

  • useTable и useGrid: поддержка навигации по ячейкам с сохранением ролей ARIA.
  • useListBox: для отображения выбора с атрибутом aria-readonly.

В этих компонентах важно разделять focusable и editable состояния. Например, можно перемещаться по ячейкам клавишами, но редактирование данных отключено через isReadOnly: true.

Интеграция с формами

В формах с комбинацией редактируемых и только читаемых полей:

  • Только читаемые поля должны сохранять правильные роли и атрибуты.
  • React Aria автоматически синхронизирует значения только читаемых полей с состоянием формы.
  • Для комплексных форм можно комбинировать useFormState с useTextField и isReadOnly, что упрощает создание инкрементально доступных форм.

Визуальные и стилевые особенности

Хотя React Aria не занимается стилизацией, только для чтения компоненты часто требуют:

  • Снижение контраста текста и фона для визуального обозначения readonly.
  • Изменение курсора на default вместо text для поля ввода.
  • Добавление иконки или визуального индикатора lock для явного обозначения недоступности редактирования.

Все эти элементы можно добавлять поверх React Aria хуков без нарушения доступности.

Итоговая структура только читаемых компонентов

  1. Использовать соответствующие хуки с флагом isReadOnly.
  2. Автоматически получать ARIA-атрибуты через хуки.
  3. Управлять фокусом через useFocusRing и useFocus.
  4. Добавлять визуальные и интерактивные подсказки без изменения данных.
  5. Поддерживать совместимость с экранными читалками и клавиатурной навигацией.

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

Оглавление