Отключенное состояние

В библиотеке React Aria управление состоянием компонентов является одной из ключевых задач для обеспечения доступности и согласованного поведения UI. Одним из таких состояний является disabled — отключенное состояние элемента. Оно используется для того, чтобы предотвратить взаимодействие пользователя с компонентом, сохраняя при этом визуальную и программную доступность для вспомогательных технологий.

Атрибуты для отключенного состояния

React Aria использует семантические атрибуты ARIA для обозначения отключенных элементов. Основные атрибуты:

  • aria-disabled — указывает вспомогательным технологиям, что элемент отключен.
  • disabled — нативный HTML-атрибут, применяемый к интерактивным элементам (button, input, select).

Важно различать эти два атрибута:

  • disabled полностью блокирует пользовательское взаимодействие с элементом, включая фокус и события.
  • aria-disabled сохраняет элемент интерактивным для скриптов и событий, но уведомляет ассистивные технологии, что элемент недоступен для пользователя.

Использование aria-disabled целесообразно для кастомных компонентов, таких как собственные кнопки или переключатели, которые не поддерживают нативный disabled.

Управление состоянием через хуки React Aria

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

  • useButton
  • useCheckbox
  • useSwitch
  • useToggleButton

Каждый из них принимает объект с ключом isDisabled или isReadOnly:

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

function MyButton({ isDisabled }) {
  let { buttonProps } = useButton({ isDisabled });
  
  return <button {...buttonProps}>Нажми меня</button>;
}

В этом примере:

  • useButton автоматически добавляет необходимые атрибуты: aria-disabled и disabled.
  • События клика и фокусирование блокируются, если isDisabled: true.

Взаимодействие с кастомными элементами

Для кастомных компонентов важно корректно передавать состояние disabled. Например, для компонента div с поведением кнопки необходимо использовать aria-disabled, потому что нативный disabled на div не поддерживается:

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

function CustomButton({ isDisabled, onPress }) {
  let { buttonProps } = useButton({ isDisabled, onPress });

  return (
    <div
      {...buttonProps}
      role="button"
      style={{
        opacity: isDisabled ? 0.5 : 1,
        pointerEvents: isDisabled ? "none" : "auto"
      }}
    >
      Кастомная кнопка
    </div>
  );
}

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

  • role="button" — обязательный атрибут для скринридеров.
  • pointerEvents: "none" предотвращает клик.
  • opacity визуально показывает недоступность элемента.
  • aria-disabled сообщает ассистивным технологиям о состоянии.

Влияние на фокус

React Aria заботится о корректном управлении фокусом:

  • Элементы с disabled не получают фокус с клавиатуры и мыши.
  • Элементы с aria-disabled остаются в таб-цикле, если не использовать дополнительные меры, такие как tabIndex={-1} для полной блокировки взаимодействия.

Сочетание с состояниями readOnly и loading

Отключенное состояние часто используется вместе с другими состояниями компонента:

  • readOnly — элемент доступен для фокуса, но редактирование запрещено.
  • loading — временно блокирует взаимодействие, визуально отображая индикатор загрузки.

Пример для кнопки с загрузкой:

function LoadingButton({ isDisabled, isLoading, onPress }) {
  let { buttonProps } = useButton({ isDisabled: isDisabled || isLoading, onPress });

  return (
    <button {...buttonProps}>
      {isLoading ? "Загрузка..." : "Отправить"}
    </button>
  );
}

Здесь isDisabled автоматически объединяется с isLoading, чтобы предотвратить нажатия во время выполнения асинхронной операции.

Рекомендации по доступности

  • Всегда использовать aria-disabled для кастомных интерактивных компонентов.
  • Не скрывать полностью элементы через CSS, если они должны оставаться доступными для ассистивных технологий.
  • Объединять визуальные индикаторы (цвет, прозрачность, курсор) с семантическими атрибутами.
  • Проверять поведение с клавиатурой и скринридерами, чтобы убедиться, что отключенные элементы не вызывают путаницу.

Итоговые ключевые моменты

  • disabled — блокирует все взаимодействия, нативный атрибут.
  • aria-disabled — семантический атрибут, особенно полезен для кастомных компонентов.
  • React Aria автоматически управляет атрибутами через хуки (useButton, useCheckbox и т.д.).
  • Визуальные и программные индикаторы состояния должны быть согласованы для полной доступности.

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

Оглавление