This storybook addon can be helpfull to make your UI components more accessibile.
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>
));