textarea aria-describedby references span before it is present

[benstoltz]

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 the calcite-text-area when LevelAccess audited Hub. The textarea has a aria-describedby added to it referencing calcites out of the box validation before the validation span has even been added to the dom. It would be preferred if we could conditionally add the aria-describedby based on whether or not that span is added to the dom.

Actual Behavior

Issue can be seen on Calcite docs

In a calcite area with no validation (no max/min length) the aria-describedby is referencing a nonexistent span

In a calcite area with validation (max/min length), but not violating that validation the aria-describedby is referencing a nonexistent span

When the character count is gone over, the span now is present in the dom

Expected Behavior

The textarea would not have an aria-describedby until the validation fails and the span is added to the dom, at which point then the aria-describedby would be added.

Reproduction Sample

https://developers.arcgis.com/calcite-design-system/components/text-area/

Reproduction Steps

1. visit https://developers.arcgis.com/calcite-design-system/components/text-area/
2. Inspect the textarea and note the aria-describedby
3. configure max/min length
4. Observe the span being added/removed but the aria-describedby remaining

Reproduction Version

3.03

Working W3C Example/Tutorial

No response

Relevant Info

No response

Regression?

No response

Priority impact

impact - p3 - not time sensitive

Calcite package

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

Esri team

ArcGIS Hub