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.

[geospatialem]

Here's an example of what we could implement when items are filtered: https://codepen.io/geospatialem/pen/KKrjwbY

The solution could use a combination of aria-live="polite" and aria-relevant="all" (Note the Codepen example above shows "additions", but in our case we would also have removals).

The JAWS transcript for when interacting with the change:

add another message to chat above �Button� 
To activate press Enter.

• Steve: Hey lookit that cool button down there, I wonder what that does? 
• New message from Steve: Oh I see, clicking that button adds more messages like this one.

[driskull]

@geospatialem how would this work with the following HTML?

<table aria-busy="false" aria-label="test" class="table" role="treegrid">
   <thead>
      <tr class="sticky-pos">
         <th colspan="0">
            <calcite-stack class="stack" calcite-hydrated="">
               <slot name="filter-actions-start" slot="actions-start"></slot>
               <calcite-filter scale="m" calcite-hydrated=""></calcite-filter>
               <slot name="filter-actions-end" slot="actions-end"></slot>
            </calcite-stack>
         </th>
      </tr>
   </thead>
   <tbody class="table-container">
      <slot></slot>
   </tbody>
</table>

According to aXe, I can't put a role of status on the tbody element nor can I put a div inside the tbody. Surrounding the whole table doesn't seem right either.

[geospatialem]

@geospatialem how would this work with the following HTML?

<table aria-busy="false" aria-label="test" class="table" role="treegrid">
   <thead>
      <tr class="sticky-pos">
         <th colspan="0">
            <calcite-stack class="stack" calcite-hydrated="">
               <slot name="filter-actions-start" slot="actions-start"></slot>
               <calcite-filter scale="m" calcite-hydrated=""></calcite-filter>
               <slot name="filter-actions-end" slot="actions-end"></slot>
            </calcite-stack>
         </th>
      </tr>
   </thead>
   <tbody class="table-container">
      <slot></slot>
   </tbody>
</table>

According to aXe, I can't put a role of status on the tbody element nor can I put a div inside the tbody. Surrounding the whole table doesn't seem right either.

Wondering if the best option would be to diverge from the parent list and communicate the change on the list-item level.

@driskull Would it be possible to announce the number of list-items and read out each label? For instance "Filter enabled displaying 2 items. Item one Hiking trails. Item two Snowmobile trails", where the role="treegrid" element works in coordination with the list-items?

[driskull]

Yeah I can do that if the live region exists outside of the table.

[geospatialem]

Reallocated to the November milestone for future implementation.

[driskull]

Would it be possible to announce the number of list-items and read out each label? For instance "Filter enabled displaying 2 items. Item one Hiking trails. Item two Snowmobile trails", where the role="treegrid" element works in coordination with the list-items?

This might make a nice functional component that we could use for other things. We could just have some aria live div that lists out the "items" and whether filtering is enabled or not.

[geospatialem]

This might make a nice functional component that we could use for other things. We could just have some aria live div that lists out the "items" and whether filtering is enabled or not.

@driskull Dig the thought and approach, but that said, does that "up" the estimate if we proceed with a new functional component?

[driskull]

I don't think it would increase the development timeline. It would just be advantageous to have this as a reusable piece for other components as well.

[geospatialem]

Reallocated to December to perform further a11y testing.

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified in 1.12.0-next.6 with JAWS and NVDA on Windows.