[ARIA] Read error message for the focused form field by using aria-describedby

Labeling inputs, elements, and widgets add context and clarity for assistive technology such as screen readers. Beyond adding accessible labels to elements and widgets we can also provide additional descriptions. Similar to how an aria-labelledby attribute works, an aria-describedby attribute can link the text from another element or elements to be used as a description for the given element.

Some example use cases for using an aria-describedby are:

• providing instructions
• providing important usage details

 

First we can add 'id' for the error message

// src/primitives/FormInput.js
const helperId = helperText ? `${name}-helper` : ''
const errorId = errorText && !isValid ? `${id}-error` : ''
..
// src/primitives/FormInput.js
{
  helperText && (
    <small id={helperId} className="form-text text-muted helper-text">
      {helperText}
    </small>
  )
}

..

{
  errorText && (
    <div id={errorId} className="invalid-feedback">
      {errorText}
    </div>
  )
}

 

Then for the input field, we can use aira-describedby

// src/primitives/FormInput.js
<input
  id={id}
  type={type}
  name={name}
  className={inputClasses}
  onChange={onChange}
  aria-describedby={`${helperId} ${errorId}`}
/>

 

All code in React syntax