npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript.Learn more »

@storybook/addon-a11y

5.0.11 • Public • Published

storybook-addon-a11y

This storybook addon can be helpful to make your UI components more accessible.

Framework Support

Getting started

First, install the addon.

$ yarn add @storybook/addon-a11y --dev

Add this line to your addons.js file (create this file inside your storybook config directory if needed).

import '@storybook/addon-a11y/register';

import the withA11y decorator to check your stories for violations within your components.

import React from 'react';
import { storiesOf, addDecorator } from '@storybook/react';
import { withA11y } from '@storybook/addon-a11y';
 
// should only be added once
// best place is in config.js
addDecorator(withA11y)
 
storiesOf('button', module)
  .add('Accessible', () => (
    <button>
      Accessible button
    </button>
  ))
  .add('Inaccessible', () => (
    <button style={{ backgroundColor: 'red', color: 'darkRed', }}>
      Inaccessible button
    </button>
  ));

For more customizability. Use the addParameters function to configure aXe options. You can override these options at story level too.

import React from 'react';
import { storiesOf, addDecorator, addParameters } from '@storybook/react';
 
import { withA11y } from '@storybook/addon-a11y';
 
addDecorator(withA11y)
addParameters({
  a11y: {
    // ... axe options
    element: '#root', // optional selector which element to inspect
    config: {}, // axe-core configurationOptions (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#parameters-1)
    options: {} // axe-core optionsParameter (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter)
  },
});
 
storiesOf('button', module)
  .add('Accessible', () => (
    <button style={{ backgroundColor: 'black', color: 'white', }}>
      Accessible button
    </button>
  ))
  .add('Inaccessible', () => (
    <button style={{ backgroundColor: 'black', color: 'black', }}>
      Inaccessible button
    </button>
  ));

Roadmap

  • Make UI accessibile
  • Show in story where violations are.
  • Add more example tests
  • Add tests
  • Make CI integration possible

install

npm i @storybook/addon-a11y

Downloadsweekly downloads

71,302

version

5.0.11

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability