https://github.com/ariperkkio/storybook-addon-aria-live

Storybook addon for inspecting ARIA live region announcements
https://github.com/ariperkkio/storybook-addon-aria-live

accessibility addon aria-live storybook

Last synced: 4 months ago
JSON representation

Storybook addon for inspecting ARIA live region announcements

• Host: GitHub
• URL: https://github.com/ariperkkio/storybook-addon-aria-live
• Owner: AriPerkkio
• License: mit
• Created: 2022-01-28T05:47:27.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-05-12T13:05:18.000Z (9 months ago)
• Last Synced: 2024-10-12T19:51:39.425Z (4 months ago)
• Topics: accessibility, addon, aria-live, storybook
• Language: TypeScript
• Homepage: https://ariperkkio.github.io/storybook-addon-aria-live/
• Size: 6.74 MB
• Stars: 3
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Storybook Addon Aria Live

[![version](https://img.shields.io/npm/v/storybook-addon-aria-live)](https://www.npmjs.com/package/storybook-addon-aria-live)

> 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`](https://www.npmjs.com/package/aria-live-capture) for announcement detection.

[Test online](https://ariperkkio.github.io/storybook-addon-aria-live/)

## Installation

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

```bash

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

```

In your `.storybook/main.ts`:

```ts

const config: StorybookConfig = {

  addons: ['storybook-addon-aria-live']

}

```

Use [Storybook parameters](https://storybook.js.org/docs/react/writing-stories/parameters) to set global or story specific options:

In your `.storybook/preview.ts`:

```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`](https://github.com/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](https://github.com/storybookjs/storybook/issues/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.

```diff

// preview.js

export const decorators = [

  function withCustomDecorator(Story) {

-    return ;

+    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`:

```diff

// 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',

  ],

};

```