Switch branches/tags
Find file History
Pull request Compare This branch is 19 commits ahead, 150 commits behind next.
Latest commit 5d5dfe0 Nov 15, 2018
Permalink
..
Failed to load latest commit information.
docs Initial commit Nov 11, 2017
src add height and overflow fixes to addon panel styles Oct 5, 2018
README.md add JS syntax highlight Jul 12, 2018
manager.js Linting Nov 11, 2017
package.json v4.0.7 Nov 15, 2018
register.js Linting Nov 13, 2017

README.md

storybook-addon-a11y

This storybook addon can be helpfull to make your UI components more accessibile.

Framework Support

Getting started

First, install the addon.

$ npm install -D @storybook/addon-a11y

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 'checkA11y' decorator to check your stories for violations within your components.

import React from 'react';
import { storiesOf } from '@storybook/react';

import { checkA11y } from '@storybook/addon-a11y';

storiesOf('button', module)
  .addDecorator(checkA11y)
  .add('Accessible', () => (
    <button>
      Accessible button
    </button>
  ))
  .add('Inaccessible', () => (
    <button style={{ backgroundColor: 'red', color: 'darkRed', }}>
      Inaccessible button
    </button>
  ));

For more customizability. Use the 'configureA11y' function to configure aXe options.

import React from 'react';
import { storiesOf } from '@storybook/react';

import { checkA11y, configureA11y } from '@storybook/addon-a11y';

const whateverOptionsYouWant = {};
configureA11y(whateverOptionsYouWant);

storiesOf('button', module)
  .addDecorator(checkA11y)
  .add('Accessible', () => (
    <button>
      Accessible button
    </button>
  ))
  .add('Inaccessible', () => (
    <button style={{ backgroundColor: 'red', color: 'darkRed', }}>
      Inaccessible button
    </button>
  ));

If you want to add a11y globally to your stories, you can use the global Storybook decorator in your .storybook/config.js file:

import { configure, addDecorator } from '@storybook/react';
import { checkA11y } from '@storybook/addon-a11y';

// pick all stories.js files within the src/ folder
const req = require.context('../src', true, /stories\.js$/);

addDecorator(checkA11y);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

Roadmap

  • Make UI accessibile
  • Add color blindness filters (Example)
  • Show in story where violations are.
  • Make it configurable
  • Add more example tests
  • Add tests
  • Make CI integration possible