1 | # storybook-addon-a11y
|
2 |
|
3 | This storybook addon can be helpful to make your UI components more accessible.
|
4 |
|
5 | [Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
6 |
|
7 | ![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/a11y/docs/screenshot.png)
|
8 |
|
9 | ## Getting started
|
10 |
|
11 | First, install the addon.
|
12 |
|
13 | ```sh
|
14 | $ yarn add @storybook/addon-a11y --dev
|
15 | ```
|
16 |
|
17 | Add this line to your `main.js` file (create this file inside your storybook config directory if needed).
|
18 |
|
19 | ```js
|
20 | module.exports = {
|
21 | addons: ['@storybook/addon-a11y'],
|
22 | };
|
23 | ```
|
24 |
|
25 | ```js
|
26 | import React from 'react';
|
27 |
|
28 | export default {
|
29 | title: 'button',
|
30 | };
|
31 |
|
32 | export const accessible = () => <button>Accessible button</button>;
|
33 |
|
34 | export const inaccessible = () => (
|
35 | <button style={{ backgroundColor: 'red', color: 'darkRed' }}>Inaccessible button</button>
|
36 | );
|
37 | ```
|
38 |
|
39 | If you wish to selectively disable `a11y` checks for a subset of stories, you can control this with story parameters:
|
40 |
|
41 | ```js
|
42 | export const MyNonCheckedStory = () => <SomeComponent />;
|
43 | MyNonCheckedStory.parameters = {
|
44 | a11y: { disable: true },
|
45 | };
|
46 | ```
|
47 |
|
48 | ## Parameters
|
49 |
|
50 | For more customizability use parameters to configure [aXe options](https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#api-name-axeconfigure).
|
51 | You can override these options [at story level too](https://storybook.js.org/docs/react/configure/features-and-behavior#per-story-options).
|
52 |
|
53 | ```js
|
54 | import React from 'react';
|
55 | import { storiesOf, addDecorator, addParameters } from '@storybook/react';
|
56 |
|
57 | export default {
|
58 | title: 'button',
|
59 | parameters: {
|
60 | a11y: {
|
61 | // optional selector which element to inspect
|
62 | element: '#root',
|
63 | // axe-core configurationOptions (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#parameters-1)
|
64 | config: {},
|
65 | // axe-core optionsParameter (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter)
|
66 | options: {},
|
67 | // optional flag to prevent the automatic check
|
68 | manual: true,
|
69 | },
|
70 | },
|
71 | };
|
72 |
|
73 | export const accessible = () => <button>Accessible button</button>;
|
74 |
|
75 | export const inaccessible = () => (
|
76 | <button style={{ backgroundColor: 'red', color: 'darkRed' }}>Inaccessible button</button>
|
77 | );
|
78 | ```
|
79 |
|
80 | ## Roadmap
|
81 |
|
82 | - Make UI accessible
|
83 | - Show in story where violations are.
|
84 | - Add more example tests
|
85 | - Add tests
|
86 | - Make CI integration possible
|