Merge pull request #3285 from wuweiweiwu/issue-2830

Feature request: adding aXe configuration for a11y addon
storybookjs · Mar 27, 2018 · 108af01 · 108af01
2 parents 4cab8d0 + 0d40d95
commit 108af01
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 5 deletions.
diff --git a/addons/a11y/README.md b/addons/a11y/README.md
@@ -42,6 +42,31 @@ storiesOf('button', module)
   ));
 ```
 
+For more customizability. Use the `'configureA11y'` function to configure [aXe options](https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#api-name-axeconfigure).
+
+```js
+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>
+  ));
+```
+
 ## Roadmap
 
 * Make UI accessibile

diff --git a/addons/a11y/src/A11yManager.js b/addons/a11y/src/A11yManager.js
@@ -4,8 +4,8 @@ import WrapStory from './components/WrapStory';
 
 // Run all a11y checks inside
 class A11yManager {
-  wrapStory(channel, storyFn, context) {
-    const props = { context, storyFn, channel };
+  wrapStory(channel, storyFn, context, axeOptions) {
+    const props = { context, storyFn, channel, axeOptions };
 
     return <WrapStory {...props} />;
   }

diff --git a/addons/a11y/src/components/WrapStory.js b/addons/a11y/src/components/WrapStory.js
@@ -8,11 +8,13 @@ class WrapStory extends Component {
     context: PropTypes.shape({}),
     storyFn: PropTypes.func,
     channel: PropTypes.shape({}),
+    axeOptions: PropTypes.shape({}),
   };
   static defaultProps = {
     context: {},
     storyFn: () => {},
     channel: {},
+    axeOptions: {},
   };
 
   constructor(props) {
@@ -33,10 +35,12 @@ class WrapStory extends Component {
 
   /* eslint-disable react/no-find-dom-node */
   runA11yCheck() {
-    const { channel } = this.props;
+    const { channel, axeOptions } = this.props;
     const wrapper = findDOMNode(this);
 
     if (wrapper !== null) {
+      axe.reset();
+      axe.configure(axeOptions);
       axe.a11yCheck(wrapper, {}, results => {
         channel.emit('addon:a11y:check', results);
       });

diff --git a/addons/a11y/src/index.js b/addons/a11y/src/index.js
@@ -4,10 +4,15 @@ import A11yManager from './A11yManager';
 import * as shared from './shared';
 
 const manager = new A11yManager();
+let axeOptions = {};
 
 function checkA11y(storyFn, context) {
   const channel = addons.getChannel();
-  return manager.wrapStory(channel, storyFn, context);
+  return manager.wrapStory(channel, storyFn, context, axeOptions);
 }
 
-export { checkA11y, shared };
+function configureA11y(options = {}) {
+  axeOptions = options;
+}
+
+export { checkA11y, shared, configureA11y };