Обязательные поля

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

Использование `useField` для управления обязательностью

Хук useField предоставляет основу для управления состоянием поля формы, включая атрибут required. Его ключевые параметры:

label — текст метки поля.
description — дополнительная информация, например подсказка для пользователя.
errorMessage — сообщение об ошибке при неверном вводе.
isRequired — булевый флаг, указывающий, что поле обязательно.

Пример базового использования:

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

function TextInput({ label, isRequired }) {
  const ref = useRef();
  const { labelProps, inputProps } = useTextField({ label, isRequired }, ref);
  
  return (
    <div>
      <label {...labelProps}>{label}</label>
      <input {...inputProps} ref={ref} />
    </div>
  );
}

Здесь isRequired автоматически добавляет атрибут aria-required="true", что сигнализирует скринридерам о необходимости заполнения поля.

Атрибут `aria-required` и его роль

Атрибут aria-required используется для обозначения обязательных полей формы. Его значения:

true — поле обязательно.
false или отсутствие атрибута — поле необязательно.

Применение aria-required критично для пользователей, использующих ассистивные технологии. React Aria автоматически управляет этим атрибутом через соответствующие хуки (useTextField, useCheckbox, useSelect и другие).

Управление ошибками и валидацией

Обязательные поля часто сопровождаются проверкой введённых данных. React Aria поддерживает интеграцию с валидацией через errorMessage и validationState.

validationState принимает значения "valid" или "invalid".
errorMessage отображается при validationState="invalid".

Пример:

function EmailField({ label, isRequired }) {
  const ref = useRef();
  const { labelProps, inputProps, descriptionProps, errorMessageProps } = useTextField(
    {
      label,
      isRequired,
      validationState: inputProps.value.includes('@') ? 'valid' : 'invalid',
      errorMessage: "Введите корректный email"
    },
    ref
  );

  return (
    <div>
      <label {...labelProps}>{label}</label>
      <input {...inputProps} ref={ref} />
      <span {...errorMessageProps}>Введите корректный email</span>
    </div>
  );
}

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

React Aria предлагает отдельные хуки для различных типов полей:

useTextField — текстовые поля и textarea
useCheckbox — чекбоксы
useRadio — радиокнопки
useSelect — селекты

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

Доступность и фокус

Для обязательных полей важно обеспечить корректное поведение при фокусе. React Aria управляет:

автоматическим фокусом на поле с ошибкой при попытке отправки формы;
видимостью сообщения об ошибке для скринридеров через aria-describedby;
состоянием aria-invalid="true" при неправильном вводе.

Композиция с React Hook Form и другими библиотеками

React Aria хорошо интегрируется с библиотеками управления состоянием формы, такими как React Hook Form. Поля с isRequired могут быть связаны с валидацией на уровне схемы, например через Yup:

import { useForm } from 'react-hook-form';
import * as yup from 'yup';

const schema = yup.object().shape({
  email: yup.string().email().required(),
});

function MyForm() {
  const { register, handleSubmit, formState: { errors } } = useForm({ resolver: yupResolver(schema) });
  
  return (
    <form onSub mit={handleSubmit(data => console.log(data))}>
      <input {...register("email")} aria-required="true" />
      {errors.email && <span>{errors.email.message}</span>}
      <button type="submit">Отправить</button>
    </form>
  );
}

Таким образом, React Aria обеспечивает корректное управление обязательными полями на уровне семантики и доступности, а интеграция с валидацией позволяет создавать полноценные формы без потери UX и доступности.