Aria Live Storybook Addon
Debugging ARIA live regions is cumbersome. Validating that live regions are connected should be easy, automatic, and available right in the story.
Getting started
First, install the addon.
$ yarn add aria-live-storybook-addon
Add this line to your main.js file (create this file inside your Storybook config directory if needed).
module.exports = {
addons: ['aria-live-storybook-addon'],
};
Once installed, you'll have a new Panel: Aria Live Regions
.
This panel will observe changes to aria-live=polite
and aria-live=assertive
elements in your story.
Examples
Implementation examples can be found in Storybook on Chromatic.
Limitations
This addon only acklowedges the first aria-live
element of types polite
and assertive
in a story.
In practice, an application should only have one aria-live
announcer per type.
FAQ
Why aren't subsequent events showing?
When using UI libraries like React, browsers like Chrome and Firefox might not observe text changes, only additions. This is true of this addon as well as the screen reader experience.
To ensure that users of assistive technologies are able to observe changes, be sure to clear the content of aria-live
elements.
If you are looking for implementation strategies, consider this implementation using React Hooks.