textarea character count should support screen readers

[mjuniper]

Check existing issues

• I have checked for existing issues to avoid duplicates and reviewed the Accessibility page for guidance.

Summary

We got an accessibility violation on calcite-text-area when LevelAccess audited Hub.

Updates to the character counter (when a maxLength is specified) need to be announced.

Actual Behavior

Updates to the character count element are not announced by screen readers.

Expected Behavior

Updates to the character count element should be announced by screen readers.

Reproduction Sample

https://codepen.io/mjuniper/pen/eYqdNdg?editors=1000

Reproduction Steps

1. Visit https://codepen.io/mjuniper/pen/eYqdNdg?editors=1000
2. Turn on voiceover
3. Type in the textarea
4. Observe that updates to the character count are not announced.

Reproduction Version

2.13.0

Working W3C Example/Tutorial

No response

Relevant Info

No response

Regression?

No response

Priority impact

impact - p2 - want for an upcoming milestone

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Hub

[geospatialem]

@mjuniper The above is supported in Calcite with JAWS and NVDA as of 1.5.0 (July 2023) via #6630. I re-tested and was able to gain context in 2.13.0 with the above example in Windows' JAWS and NVDA. Do you know if an earlier version of Calcite was tested with Level?

[mjuniper]

It was definitely an earlier version but I don't know what version.

But at 2.13, VoiceOver does not announce the character counter but it does announce when you are over the character limit.

[geospatialem]

Adding a spike to conduct more thorough testing across AT. In coordination with Hub team members it appears the Level test was conducted with Calcite 1.11.0, so the above fix would have been adopted.

[geospatialem]

As mentioned above this only occurs when the user is interacting with the component when the character count is under the specified maxLength. In perusing WCAG criteria, this seems to fall under SC 3.3.5: Help (Level AAA), however we do provide the text visually, so we should aim to provide this support to assistive technologies.

This is also provided in the U.S. Web Design System (USWDS)'s Character count component.

This effort is low since it is a level AAA, but text-area should accommodate providing context when maxLength is specified, where:

• Context is provided when the maxLength is specified (currently offered)
• Context is provided that a maxLength is enabled on the component, and the characters remaining should be provided back to assistive technologies

Also sending this request over to design to determine if Calcite should consider only depicting the remaining characters visually, changing the component's current design and behavior.