List and List Item - Indicate live regions for dynamically changing content when filtering items - (2036570436)

[dqateam]

Module:

39 Value List and Value List Item
List and List Item

Violation:

Indicate live regions for dynamically changing content. This applies to the component's filtering, to indicate filtered items have changed.

WCAG Reference:

• 1.3.1 Info and Relationships

Instance ID:

2036570436

Severity:

9

Description:

[Issue]
There are dynamically changing content areas when enter letter(s) in the filter input field in the "Test 2. Value List with Filter" section that do not indicate live regions.

[User Impact]
Screen reader users will be unaware of important updates to this content when they occur.

[Code Reference]

<input aria-label="" class="" enterkeyhint="" inputmode="" placeholder="Filter list items" type="text">

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.

Media Type:

Live Regions

Additional Resources:

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

[driskull]

This one would apply to list component as well.

[geospatialem]

Repurposing the above to the list and list-item components.