Formik a11y examples

0-add-id-to-error-div.jsx

<ErrorMessage name="firstName">
  {msg => (
    <div id="firstName-error" className="invalid-feedback">
      {msg}
    </div>
  )}
</ErrorMessage>

1-add-aria-invalid-and-aria-describedby.jsx

  <Field
    className={classNames("form-control", {
      "is-invalid": errors.firstName && touched.firstName
    })}
    aria-invalid={errors.firstName && touched.firstName ? 'true' : null}
    aria-describedby={errors.firstName && touched.firstName ? 'firstName-error' : null}
    aria-required="true"
    name="firstName"
    id="firstName"
  />

2-add-ref-to-first-field.jsx

innerRef={ (input) => { this.firstNameInput = input }}

3-focus-first-input.jsx

componentDidMount() {
  this.firstNameInput.focus();
}