New
Storybook for full-stack developersAutomate with Chromatic
Star75,295
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Aria Live Regions
Observe and log aria-live region changes in the addon panel
npm install aria-live-storybook-addon
Last updated over 1 year ago
180
Downloads per week
Readme View on GitHub

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.

Screen Shot 2021-07-28 at 12 21 46 PM

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.

Additional resources

Join the community
5,867 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI