Input - Character counter - Improved a11y

[orion-cengage]

CENG_3306

Docs: https://react-magma.cengage.com/version/4.3.0/api/input/

Success Criteria: https://www.w3.org/WAI/WCAG21/Understanding/name-role-value

In the Character Counter example, the character count is announced to assistive technology using an aria-live region. The character count is announced but then is immediately followed by what was typed into the input so the message could be missed.

One approach for improving this would be to leave the visual character count message where it is then to have a visually hidden aria-live region below that is announced after the user has finished typing for a short period of time.

[silvalaura]

An additional use case to address/test:

• In a form that includes a character counter with a limit, a user clicks a button to save the form, validates to an error. We should confirm that the error message is read appropriately and takes precedence over the character counter limit announcement.

export function Example() {
  const [value, setValue] = useState("");

  return (
    <>
      <Input
        errorMessage={!value && "Empty value"}
        maxCount={4}
        value={value}
        onChange={(e) => setValue(e.target.value)}
        labelText="Default Character Counter"
      />
      <Button>Send</Button>
    </>
  );
}