useErrorMessage для ошибок

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

Основные задачи хука

  1. Привязка сообщения об ошибке к полю ввода Хук автоматически создает id для элемента с ошибкой и возвращает объект с атрибутами, которые нужно применить к полю ввода. Это гарантирует, что вспомогательные технологии (например, скринридеры) смогут корректно озвучивать ошибки пользователю.

  2. Синхронизация с состоянием формы useErrorMessage работает в связке с состоянием поля, например, с хранилищем ошибок формы. Когда значение поля изменяется, хук обновляет доступные атрибуты, чтобы отражать текущую ошибку.

  3. Доступность (a11y) Хук обеспечивает правильное использование атрибутов aria-describedby и id для поля ввода. Если поле имеет ошибку, aria-describedby указывает на элемент с сообщением об ошибке. В противном случае это поле не используется.

Импорт и базовое использование

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

function TextInputWithError({ label, value, onChange }) {
  const [error, setError] = useState('');
  const errorMessageProps = useErrorMessage({ error });

  const handleChange = (e) => {
    const val = e.target.value;
    onChange(val);

    if (!val) {
      setError('Поле обязательно для заполнения');
    } else {
      setError('');
    }
  };

  return (
    

      
      {error && 
{error}
}
    

  );
}

Пояснения:

  • useErrorMessage({ error }) возвращает объект с id и другими атрибутами, которые нужно применить к контейнеру сообщения об ошибке.
  • aria-describedby связывает поле ввода с сообщением об ошибке. Скринридеры используют это для озвучивания ошибки.
  • aria-invalid устанавливается в true, если есть ошибка, что позволяет обозначить поле как некорректное.

Поддержка нескольких ошибок

Для сложных форм с несколькими ошибками можно комбинировать useErrorMessage с кастомным состоянием ошибок:

const errors = {
  username: 'Имя пользователя занято',
  password: 'Пароль слишком короткий'
};

const usernameErrorProps = useErrorMessage({ error: errors.username });
const passwordErrorProps = useErrorMessage({ error: errors.password });

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

Особенности работы с динамическими формами

  • Динамическое отображение ошибок: Хук корректно работает, если сообщения об ошибках появляются и исчезают в процессе ввода.
  • Уникальные идентификаторы: useErrorMessage гарантирует уникальные id, чтобы при ререндере компонента не возникали коллизии.
  • Совместимость с библиотеками состояний форм: можно использовать вместе с react-hook-form, formik или кастомным стейтом.

Оптимизация и производительность

  • Не следует передавать статический текст ошибки напрямую без состояния — это не позволит хукку корректно обновлять id и атрибуты при изменениях.
  • Для форм с множеством полей можно создать обертку, которая автоматически подключает useErrorMessage к каждому полю. Это снижает дублирование кода.

Полезные атрибуты, возвращаемые хукком

useErrorMessage возвращает объект с ключевыми свойствами:

  • id — уникальный идентификатор для контейнера сообщения об ошибке.
  • role — обычно alert, чтобы скринридеры уведомляли пользователя о появлении ошибки.
  • aria-live — может быть assertive или polite, в зависимости от конфигурации, для контроля приоритета озвучивания ошибок.

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

Оглавление