Background

From DST's evaluating engagement with our partner AFB, we've been provided with a number of answers and tips to possible shortcomings/improvements on several of our components

In the case of the ChipInput, we were very uncertain about how to handle this from an ARIA markup perspective, as we weren't able to find great prior art for it. How could this be handled better/differently.

Most of the feedback provided for it was acceptable, with one specific case:

The screen reader must announce the status message when a new chip is added or an existing chip is removed from the list.

Goal

Use ARIA to enable exposing the addition/removal of Chips by status messages.

Technical recommendation

The aria-live attribute should ideally be placed on the smallest DOM node containing dynamically changing content to ensure screen readers announce only relevant updates. It's best to place aria-live directly on a specific child element if changes there need announcement, ensuring clear and focused information for users. Placing aria-live on a higher wrapper element might seem convenient for multiple updates but can lead to unnecessary announcements.

Acceptance criteria

• Implement ARIA live handling on ChipInput
• Test using a screenreader to make sure the intended behavior is working
• Ensure the ARIA live region's status message uses the i18n composable to allow for translated strings

Shared Learnings

• ARIA live regions provide a way to report updates to the user.
  • https://www.w3.org/TR/wai-aria/#dfn-live-region
  • https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions

• ARIA attributes used to identify the ARIA live region and process them include:
  • aria-live
  • aria-relevant
  • aria-atomic
  • aria-busy

• The general recommendation is to use aria-live="polite" versus aria-live="assertive" unless you have a specific use case for assertive.
• You can also define the live region type with a role attribute.
  • The ARIA status role has an implicit aria-live="polite" and an implicit aria-atomic="true".
    • role="status"
  • The ARIA alert role is a live region type with an implicit aria-live="assertive" and aria-atomic="true".
    • role="alert"
• Example from StackOverflow