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
Inspect announcements of ARIA live regions
npm install storybook-addon-aria-live
Last updated about 1 month ago
96
Downloads per week
Readme View on GitHub

Storybook Addon Aria Live

version

Storybook addon for inspecting ARIA live region announcements

storybook-addon-aria-live is a Storybook addon for inspecting ARIA live region announcements. Internally it is utilizing aria-live-capture for announcement detection.

Test online

Installation

storybook-addon-aria-live should be included in development dependencies.

npm install --dev storybook-addon-aria-live

In your .storybook/main.ts:

const config: StorybookConfig = {
  addons: ['storybook-addon-aria-live']
}

Use Storybook parameters to set global or story specific options:

In your .storybook/preview.ts:

export const parameters = {
  'aria-live': {
    /** Indicates whether live regions inside `ShadowRoot`s should be tracked. Defaults to false. */
    includeShadowDom: true,
  },
};

Development

Project setup is based on storybookjs/addon-kit. See its README for instructions about tooling.

Troubleshooting

  1. Error: Storybook preview hooks can only be called inside decorators and story functions

This is caused by storybookjs/storybook#9893. There are some work-arounds available:

  • If you have custom decorators which are rendering Story as React Element, change it to call story instead.
// preview.js

export const decorators = [
  function withCustomDecorator(Story) {
-    return <Story />;
+    return Story();
  }
]
  • If you have you have no custom decorators it is likely that 3rd party addon is causing this issue. If such addon is identified, make sure to report the issue to projects. As work-around try reordering your addons in main.js:
// main.js

module.exports = {
  addons: [
+    'some-addon-using-stories-as-react-elements-instead-of-functions',
    'storybook-addon-aria-live',
-    'some-addon-using-stories-as-react-elements-instead-of-functions',
  ],
};
Join the community
6,622 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetry
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI