storybook-addon-aria-live is a Storybook addon for inspecting ARIA live region announcements

Last update: Jan 30, 2022

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.

yarn add --dev storybook-addon-aria-live

In your .storybook/main.js:

module.exports = {
  addons: ['storybook-addon-aria-live'],
};

Use Storybook parameters to set global or story specific options:

In your .storybook/preview.js:

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.

GitHub

https://github.com/AriPerkkio/storybook-addon-aria-live
You might also like...

Use Storybook (with React Native for Web) in your Expo + Next.js monorepo

Expo + Next.js + Storybook (using React Native for Web) Monorepo Example Here is an example showing how to create a universal React app using Expo and

Jul 16, 2022

Artemis UI is a react components library build with StoryBook, Typescript and SASS primarily for e-commerce applications

Artemis UI About Artemis UI is a react components library build with StoryBook, Typescript and SASS primarily for e-commerce applications. Docs and De

Aug 4, 2022

Mealdrop is a reproduction of a real-world application to serve as an example for all the cool things you can do with Storybook

Mealdrop is a reproduction of a real-world application to serve as an example for all the cool things you can do with Storybook

Mealdrop is a reproduction of a real-world application to serve as an example for all the cool things you can do with Storybook

Aug 3, 2022

Storybook-addon-next - A no config Storybook addon that makes Next.js features just work in Storybook

Storybook Addon Next ๐Ÿ˜ฑ No config support for Next.js: Tired of writing and debu

Jul 31, 2022

Storybook Addon Kit: Simplify the creation of Storybook addons

Storybook Addon Kit: Simplify the creation of Storybook addons

Storybook Addon Kit Simplify the creation of Storybook addons ๐Ÿ“ Live-editing in development โš›๏ธ React/JSX support ๐Ÿ“ฆ Transpiling and bundling with Bab

Nov 27, 2021

Storybook-addon-message-bus - Interact with message bus via Storybook UI

Storybook-addon-message-bus - Interact with message bus via Storybook UI

Storybook Addon Message Bus Storybook Addon w/ GUI for interacting with Message

Jan 8, 2022

Native implementation of geofencing/region monitoring

react-native-boundary A simple, native, and efficient geofencing/region monitoring react native library for both iOS and android. Usage import Boundar

Jul 19, 2022

Country / region React select boxes for your forms.

react-country-region-selector About Features Gotchas Demo Installation Usage List of component options Command-line Changelog Tests Thanks! License (s

Aug 3, 2022

A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

Aug 1, 2022

A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

Jul 30, 2022

A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

Aug 6, 2022

A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

Aug 4, 2022

A Create React App to Test @chakra-ui/storybook-addon

 A Create React App to Test @chakra-ui/storybook-addon

A Create React App to Test @chakra-ui/storybook-addon This project was bootstrapped with Create React App. Steps to reproduce yarn (Install dependenci

Mar 7, 2022

PyTorch Live is an easy to use library of tools for creating on-device ML demos on Android and iOS. With Live, you can build a working mobile app ML demo in minutes.

PyTorch Live is an easy to use library of tools for creating on-device ML demos on Android and iOS. With Live, you can build a working mobile app ML demo in minutes.

Build your AI-powered mobile apps in minutes: Get Started ยท Tutorials ยท API PyTorch Live is a set of tools to build AI-powered experiences for mobile.

Jul 31, 2022

Storybook extractor: a tool that extracts data from storybook stories, documentation pages and generates a JSON file with them

Storybook extractor ๐Ÿ”ฅ This project was done as a part of 24h design systems hac

Jan 25, 2022

Nextjs-ts-mui5-scss-storybook-starter - Next.js + TypeScript + Material UI v5 + Sass + Storybook starter

Nextjs-ts-mui5-scss-storybook-starter - Next.js + TypeScript + Material UI v5 + Sass + Storybook starter

nextjs-ts-mui5-scss-storybook-starter ๐Ÿ“• Next.js + TypeScript + Material UI v5 +

Jul 13, 2022

WAI-ARIA compliant React autocomplete (combobox) component

React Autocomplete Accessible, extensible, Autocomplete for React.js. Autocomplete getItemValue={(item) = item.label} items={[ { label: 'app

Aug 3, 2022

WAI-ARIA compliant React autosuggest component

WAI-ARIA compliant React autosuggest component

React Autosuggest Project Status Looking for maintainers! Unfortunately, I don't have the time to maintain this project anymore. If you are interested

Jul 30, 2022

๐ŸŽ A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.

๐ŸŽ A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.

downshift ๐ŸŽ Primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components. Read the docs | See

Jul 30, 2022
Comments
  • 1. Upon startup with web components, hooks error shows up

    When using web components (at least thats what I'm using), when starting up with this addon included all stories show up like this: image

    Error: "Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:"

    version: 0.0.5 storybook version: 6.4.19 node: 14.18.0

    Really excited about this addon because I think it could be really helpful! just cant get it up and running

    Reviewed by CodeByAlex at 2022-05-07 03:03
  • 2. fix: import hooks from storybook-addons directly

    Fixes #3

    Example usage at https://github.com/storybookjs/addon-kit/blob/b9924fb8fad4ba89c01cf8551ed109bacefc2672/src/withGlobals.ts#L2.

    Sources at https://github.com/storybookjs/storybook/blob/088ab2a96a799713098cee808e3c05a0d1484c49/lib/addons/src/hooks.ts#L371-L381.

    ๐Ÿ“ฆ Published PR as canary version: 0.0.6-canary.4.f9f861b.0

    :sparkles: Test out this PR locally via:

    npm install [email protected]
    # or 
    yarn add [email protected]
    
    Reviewed by AriPerkkio at 2022-05-07 06:37
  • 3. docs: deploy storybook examples [skip ci]

    Reviewed by AriPerkkio at 2022-01-30 11:44
A Create React App to Test @chakra-ui/storybook-addon
 A Create React App to Test @chakra-ui/storybook-addon

A Create React App to Test @chakra-ui/storybook-addon This project was bootstrapped with Create React App. Steps to reproduce yarn (Install dependenci

Mar 7, 2022
Papercups is an open source live customer chat web app written in Elixir
Papercups is an open source live customer chat web app written in Elixir

Papercups is an open source live customer chat web app written in Elixir

Aug 2, 2022
This project I created with Rodrigo Branas in the live about the micro frontends. For this presentation I used single-spa.js, vue.js and react on different micro frontends
This project I created with Rodrigo Branas in the live about the micro frontends. For this presentation I used single-spa.js, vue.js and react on different micro frontends

live-microfrontends-with-branas Micro Frontend with Rodrigo Branas This project I created with Rodrigo Branas in the live about the micro frontends. F

Jan 26, 2022
A simpe react app that plots a live view of the T-Mobile Home Internet Nokia 5G Gateway signal stats, helpful for optimizing signal.
A simpe react app that plots a live view of the T-Mobile Home Internet Nokia 5G Gateway signal stats, helpful for optimizing signal.

A simpe react app that plots a live view of the T-Mobile Home Internet Nokia 5G Gateway signal stats, helpful for optimizing signal.

Jul 24, 2022
flipkart-clone using react js express js mongo db razorpay complete e-commerce website using MERN stack client server MVC architecture redux redux-thunk ecomerce project live example
flipkart-clone using react js express js mongo db razorpay complete e-commerce website using MERN stack client server MVC architecture redux redux-thunk ecomerce project live example

Flipkar Clone MERN stack Sijeesh Miziha's Flipkart Clone is done with top-notch features for the entrepreneur startups like Flipkart it has RazorPay I

Jul 29, 2022
A website for all the songs from the Love Live! franchise.
A website for all the songs from the Love Live! franchise.

Raburadio This is the frontend repository for Raburadio, a website to archive all the songs in the Love Live! franchise. A re-write of the PHP-based L

Apr 11, 2022
In this project, we will be working with the real live data from the SpaceX API.

In this project, we will be working with the real live data from the SpaceX API. We are going to build a web application for a company that provides commercial and scientific space travel services. The application will allow users to book rockets and join selected space missions.

Dec 6, 2021
Weather - Live Weather Prediction using ReactJs
Weather - Live Weather Prediction using ReactJs

Live Weather Prediction using ReactJs Fetches Temperature with location name, Pr

Jan 16, 2022
SyncedStore CRDT is an easy-to-use library for building live, collaborative applications that sync automatically.
SyncedStore CRDT is an easy-to-use library for building live, collaborative applications that sync automatically.

SyncedStore is an easy-to-use library for building collaborative applications that sync automatically. It's built on top of Yjs, a proven, high performance CRDT implementation.

Aug 1, 2022
A Live NFT Ticket Minter for the Maxja Festival 2022. Built with React.
A Live NFT Ticket Minter for the Maxja Festival 2022. Built with React.

Maxja-Sardegna The Maxja Festival hosted in Sardegna (Italian spelling) is an annual gathering that brings together a small conscious community (the y

Jun 26, 2022