Aria live overly used in components.

[colinhale1]

Check existing issues

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

Summary

During our recent accessibility audit, we found excessive use of the aria-live attribute in the calcite-button, calcite-tooltip, and calcite-modal components. This attribute is added in the shadow root, which we don't control.

For more context, here is the full issue report from the accessibility audit for one of the instances:

Redundant "aria-live" attributes have been added to static (non-changing) containers throughout the page. Instances include:

Tooltips
Resources dialog and buttons within the dialog.
Analysis extent button
Current map extent popover
[User Impact]
When markup is not implemented to spec, assistive tech can act unpredictably. In this instance, it could cause assistive tech to convey a lot of redundant information which their users would then need to parse, trying to find the information they actually need.

[Code Reference]
<calcite-popover class="esriGECalcitePopover" aria-hidden="false" aria-live="polite" id="calcite-popover-577c8a09-26ff-0635-d6a7-b703768c8e80" role="dialog" (...)>(...)

[Steps to Reproduce]

Enable the screen reader.
Navigate to "Resources" and activate it.
Notice that all the content within the dialog is conveyed by the screen reader.
Press Tab and notice that the close button is focused and conveyed three times, all the dialog's content is conveyed again and controls information is conveyed twice.
Note
[Recommendation]
Ensure ARIA roles, states, and properties are valid. Many ARIA attributes can only be used on certain elements. Some can only be used in combination with other attributes. Additionally, if an attribute references an ID, that ID must be present in the page.
To detect many of these errors automatically, use the Nu Html Checker: https://validator.w3.org/nu/

Content and controls that do not change nor update must not have aria-live="polite" this attribute should only be used for dynamically changing content that occurs in content placed before the point where the focus is placed or when changes in content need to be conveyed right after they occur.

[Compliant Code Example]
<calcite-popover class="esriGECalcitePopover" style="z-index: 999; position: fixed; top: 0px; left: 0px; transform: translate(89px, 163px);" aria-hidden="false" id="calcite-popover-577c8a09-26ff-0635-d6a7-b703768c8e80" role="dialog" aria-labelledby="resources-dialog-title" (...)>

Actual Behavior

Screen shot of the code pen calcite-tooltip example with the aria-live.

Expected Behavior

The attribute aria-live should be optional and not used by default.

Reproduction Sample

https://codepen.io/pen?&editors=100

Reproduction Steps

1. Open example
2. Inspect tooltip
3. Observe aria-live is added to component

Reproduction Version

Current

Working W3C Example/Tutorial

No response

Relevant Info

No response

Regression?

No response

Priority impact

impact - p1 - need for current milestone

Calcite package

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

Esri team

ArcGIS Business/Community Analyst

[geospatialem]

Spike to determine:

• Which components use aria-live
• Do all the components using aria-live need to depict dynamic information/updates?