Have ideas to improve npm?Join in the discussion! »

    @storybook/addon-a11y
    TypeScript icon, indicating that this package has built-in type declarations

    6.2.8 • Public • Published

    storybook-addon-a11y

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

    Framework Support

    Screenshot

    Getting started

    First, install the addon.

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

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

    module.exports = {
      addons: ['@storybook/addon-a11y'],
    };
    import React from 'react';
    
    export default {
      title: 'button',
    };
    
    export const accessible = () => <button>Accessible button</button>;
    
    export const inaccessible = () => (
      <button style={{ backgroundColor: 'red', color: 'darkRed' }}>Inaccessible button</button>
    );

    If you wish to selectively disable a11y checks for a subset of stories, you can control this with story parameters:

    export const MyNonCheckedStory = () => <SomeComponent />;
    MyNonCheckedStory.parameters = {
      a11y: { disable: true },
    };

    Parameters

    For more customizability use parameters to configure aXe options. You can override these options at story level too.

    import React from 'react';
    import { storiesOf, addDecorator, addParameters } from '@storybook/react';
    
    export default {
      title: 'button',
      parameters: {
        a11y: {
          // optional selector which element to inspect
          element: '#root',
          // axe-core configurationOptions (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#parameters-1)
          config: {},
          // axe-core optionsParameter (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter)
          options: {},
          // optional flag to prevent the automatic check
          manual: true,
        },
      },
    };
    
    export const accessible = () => <button>Accessible button</button>;
    
    export const inaccessible = () => (
      <button style={{ backgroundColor: 'red', color: 'darkRed' }}>Inaccessible button</button>
    );

    Roadmap

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

    Install

    npm i @storybook/addon-a11y

    DownloadsWeekly Downloads

    620,066

    Version

    6.2.8

    License

    MIT

    Unpacked Size

    135 kB

    Total Files

    87

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar