Loader - Indicate live regions for dynamically changing content - (2036570575) 2 of 2

[geospatialem]

Module:

20a Loader - Spurred from #5587

Violation:

Indicate live regions for dynamically changing content

WCAG Reference:

• 1.3.1 Info and Relationships

Instance ID:

2036570575

Severity:

9

Description:

[Pattern: ARIA live region - Missing for loading indicator]

[Issue]
The loading indicator is not announced for screen reader users. Even though the role=progressbar is provided the loading message is not announced

Occurrences

Ensure all the following components are met when providing context through an aria-live region.

In 5587:
- [ ] 20a Loader
- [ ] 23a Panel
- [ ] 25b Scrim

Handed in this issue:

• 09a Button
• 09b Split Button
• 14a Floating Action Button (FAB)
• 15 Inline Editable
• 18b Card

[User Impact]
Screen reader users will be unaware when the page is in a loading state.

[Code Reference]

<calcite-loader class="loading-in" aria-label="Loading" id="1179fac2-76b9-ac8d-9db7-4062b0d421a0" role="progressbar" active="" inline="" scale="m" calcite-hydrated="">
<div class="loader__svgs">
<svg class="loader__svg loader__svg--1" viewBox="0 0 16 16">
(...)
</svg>
</div>
</calcite-loader>

Note:

[Suggestion]
Indicate live regions for dynamically changing content. Live regions can be created by adding a role attribute set to "log", "status", "alert", "progressbar", "marquee", or "timer" as appropriate. Alternatively, custom behavior can be created by using the aria-live, aria-atomic, and aria-relevant attributes. Text injected into this live region element will be announced by screen readers.

Importantly, the element with the ARIA live attributes must be available when the page loads. Otherwise, many screen readers will not detect updates to the element. Additionally, the element must be empty on page load unless an immediate screen reader announcement is desired.

To create such a region:

• Ensure that a visually hidden container <div> or <span> is present when the page loads. - Add aria-live="polite" attribute to this <div> or <span>
• When the page is in a loading state, use JavaScript to inject text into this <div aria-live="polite"> that describes the loading behavior (e.g., "Loading").

[Compliant Code Example]

N/A

Media Type:

Live Regions

Additional Resources:

• Report Source: Product accessibility evaluation conducted on the Calcite Design System in August, 2022.

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified in JAWS when the components are loading for:

• button
• split-button
• fab
• inline editable and
• card