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

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

Подключение и базовая настройка

Для начала необходимо установить зависимости:

npm install @react-aria/checkbox @react-aria/textfield formik

Импортируем необходимые модули:

import { useField } from 'formik';
import { useTextField } from '@react-aria/textfield';
import { useCheckbox } from '@react-aria/checkbox';
import { useToggleState } from '@react-stately/toggle';

Formik управляет состоянием формы через values, errors и touched, а React Aria обеспечивает корректное управление фокусом, клавиатурой и атрибутами ARIA.

Использование TextField с Formik

Для текстовых полей создается компонент-обертка, который объединяет возможности Formik и React Aria.

function AriaTextField({ label, ...props }) {
  const [field, meta] = useField(props);
  const { labelProps, inputProps } = useTextField({
    ...field,
    label,
  });

  return (
    <div>
      <label {...labelProps}>{label}</label>
      <input {...inputProps} />
      {meta.touched && meta.error ? (
        <div role="alert" style={{ color: 'red' }}>{meta.error}</div>
      ) : null}
    </div>
  );
}

Особенности интеграции:

  • useField предоставляет биндинг значения и обработчиков для Formik.
  • useTextField добавляет корректные ARIA-атрибуты и обработку фокуса.
  • Ошибки формы выводятся с role="alert", чтобы быть доступными для скринридеров.

Checkbox с Formik и React Aria

Для чекбоксов важно использовать useCheckbox вместе с useToggleState из React Stately:

function AriaCheckbox({ label, name }) {
  const [field, meta, helpers] = useField({ name, type: 'checkbox' });
  const state = useToggleState({ isSelected: field.value });
  const { inputProps } = useCheckbox({ ...field, isSelected: state.isSelected }, state);

  const handleChange = () => {
    state.toggle();
    helpers.setValue(state.isSelected);
  };

  return (
    <div>
      <label>
        <input {...inputProps} onCha nge={handleChange} />
        {label}
      </label>
      {meta.touched && meta.error ? (
        <div role="alert" style={{ color: 'red' }}>{meta.error}</div>
      ) : null}
    </div>
  );
}

Ключевые моменты:

  • Состояние чекбокса синхронизируется с Formik через helpers.setValue.
  • React Aria гарантирует корректные ARIA-атрибуты aria-checked и role="checkbox".
  • Управление фокусом и клавиатурными событиями реализовано автоматически.

Пример формы с React Aria и Formik

import { Formik, Form } from 'formik';
import * as Yup from 'yup';

const initialValues = { username: '', acceptTerms: false };
const validationSchema = Yup.object({
  username: Yup.string().required('Обязательное поле'),
  acceptTerms: Yup.boolean().oneOf([true], 'Необходимо согласие'),
});

function MyForm() {
  return (
    <Formik initialValues={initialValues} validationSchema={validationSchema} onSub mit={values => console.log(values)}>
      {() => (
        <Form>
          <AriaTextField name="username" label="Имя пользователя" />
          <AriaCheckbox name="acceptTerms" label="Я согласен с условиями" />
          <button type="submit">Отправить</button>
        </Form>
      )}
    </Formik>
  );
}

Особенности реализации:

  • Валидатор Yup позволяет централизованно управлять ошибками.
  • Компоненты React Aria корректно обрабатывают фокус и клавиатурное взаимодействие.
  • Состояние формы полностью синхронизировано с Formik, включая ошибки и touched.

Поддержка доступности и UX

  • Фокус: useTextField и useCheckbox автоматически управляют фокусом, включая видимость focus ring.
  • ARIA-атрибуты: Метки (label), состояния (aria-checked) и уведомления об ошибках (role="alert") соответствуют стандартам WCAG.
  • Клавиатурное управление: Поля можно использовать полностью с клавиатуры без дополнительных обработчиков.
  • Совместимость с Formik: Значения, ошибки и touched обновляются автоматически, что упрощает логику компонентов.

Расширение на RadioGroup и Select

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

  • Использовать хуки useRadioGroup и useSelect.
  • Управлять состоянием через Formik.
  • Поддерживать синхронизацию с value и onChange.
  • Добавлять ARIA-атрибуты для уведомления скринридеров о текущем выбранном элементе.

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

Оглавление