Сообщения об ошибках

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

Использование useMessageFormatter и useErrorMessage

React Aria не навязывает строгой структуры для ошибок, но предлагает хуки, которые упрощают создание доступных сообщений.

  • useMessageFormatter используется для локализации и форматирования текстовых сообщений, включая ошибки. Он обеспечивает поддержку различных языков и адаптацию к контексту приложения.
  • useErrorMessage связывает элемент формы с текстом ошибки, гарантируя корректное использование ARIA-атрибутов, таких как aria-describedby.

Пример базовой интеграции:

import {useErrorMessage} from '@react-aria/utils';
import {useState} from 'react';

function InputWithError({label, validationFn}) {
  const [value, setValue] = useState('');
  const [error, setError] = useState(null);

  const handleChange = (e) => {
    setValue(e.target.value);
    const validationError = validationFn(e.target.value);
    setError(validationError);
  };

  const errorProps = useErrorMessage(error);

  return (
    

      
      
      {error && {error}}
    

  );
}

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

  • aria-describedby связывает инпут с сообщением об ошибке.
  • useErrorMessage автоматически генерирует уникальный id для элемента сообщения, обеспечивая корректное взаимодействие с технологиями ассистивного доступа.

Управление типами ошибок

Сообщения об ошибках должны быть структурированы по типам:

  • Валидационные ошибки – неправильный формат ввода, обязательные поля.
  • Серверные ошибки – ошибки, возвращаемые с сервера при отправке формы.
  • Логические ошибки – конфликт состояния или бизнес-правила.

React Aria позволяет динамически обновлять состояние ошибок, сохраняя корректные ARIA-ссылки. Для этого используется управление состоянием через useState или сторонние менеджеры состояния, такие как Redux или Zustand.

Валидация и асинхронные ошибки

Для асинхронной проверки (например, проверка доступности имени пользователя через API) важно правильно синхронизировать сообщение об ошибке с состоянием поля:

async function validateUsername(username) {
  const response = await fetch(`/api/check-username?name=${username}`);
  const data = await response.json();
  return data.available ? null : 'Имя пользователя уже занято';
}

function AsyncUsernameInput() {
  const [username, setUsername] = useState('');
  const [error, setError] = useState(null);

  useEffect(() => {
    if (!username) return;
    let isMounted = true;

    validateUsername(username).then(err => {
      if (isMounted) setError(err);
    });

    return () => { isMounted = false; };
  }, [username]);

  const errorProps = useErrorMessage(error);

  return (
    

      
       setUsername(e.target.value)} aria-describedby={errorProps.id} />
      {error && {error}}
    

  );
}

Доступность сообщений об ошибках

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

  • Использование aria-describedby или aria-errormessage для связи поля с текстом ошибки.
  • Динамическое обновление DOM с помощью состояния React, чтобы технологии ассистивного доступа уведомляли пользователя о новой ошибке.
  • Поддержка экранных читалок: текст ошибки должен быть явно доступен в DOM, а не скрыт через CSS display: none.

Стилизация и визуальная индикация

Сообщения об ошибках должны быть визуально заметными и легко различимыми. В React Aria для этого часто комбинируют:

  • Красное оформление текста (color: red) или иконки ошибки.
  • Анимации появления для плавного информирования пользователя.
  • Контрастные рамки или фон для полей с ошибкой, чтобы соблюсти требования WCAG 2.1.

Комплексные формы

В формах с множеством полей необходимо поддерживать:

  • Идентификацию ошибок по каждому полю с уникальными id.
  • Группировку ошибок для разделов формы.
  • Навигацию между ошибками с помощью клавиатуры и экранных читалок, используя ARIA роли alert и status для немедленного уведомления.

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

Оглавление