Addon-a11y: Add preset

addons/a11y/README.md

@@ -18,8 +18,8 @@ Add this line to your `main.js` file (create this file inside your storybook con
 
 ```js
 module.exports = {
-  addons: ['@storybook/addon-a11y/register']
-}
+  addons: ['@storybook/addon-a11y/register'],
+};
 ```
 
 import the `withA11y` decorator to check your stories for violations within your components.
@@ -34,19 +34,23 @@ export default {
   decorators: [withA11y],
 };
 
-export const accessible = () => (
-  <button>
-    Accessible button
-  </button>
-);
+export const accessible = () => <button>Accessible button</button>;
 
 export const inaccessible = () => (
-  <button style={{ backgroundColor: 'red', color: 'darkRed', }}>
-    Inaccessible button
-  </button>
+  <button style={{ backgroundColor: 'red', color: 'darkRed' }}>Inaccessible button</button>
 );
 ```
 
+## Using the preset
+
+Add the decorator to all stories:
+
+```js
+module.exports = {
+  addons: ['@storybook/addon-a11y/preset'],
+};
+```
+
 ## Parameters
 
 For more customizability use parameters to configure [aXe options](https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#api-name-axeconfigure).
@@ -69,29 +73,23 @@ export default {
       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
+      // optional flag to prevent the automatic check
       manual: true,
     },
   },
 };
 
-export const accessible = () => (
-  <button>
-    Accessible button
-  </button>
-);
+export const accessible = () => <button>Accessible button</button>;
 
 export const inaccessible = () => (
-  <button style={{ backgroundColor: 'red', color: 'darkRed', }}>
-    Inaccessible button
-  </button>
+  <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
+- Make UI accessible
+- Show in story where violations are.
+- Add more example tests
+- Add tests
+- Make CI integration possible

addons/a11y/package.json

@@ -34,6 +34,7 @@
   "dependencies": {
     "@storybook/addons": "6.0.0-alpha.2",
     "@storybook/api": "6.0.0-alpha.2",
+    "@storybook/client-api": "6.0.0-alpha.2",
     "@storybook/client-logger": "6.0.0-alpha.2",
     "@storybook/components": "6.0.0-alpha.2",
     "@storybook/core-events": "6.0.0-alpha.2",

addons/a11y/preset.js

@@ -0,0 +1 @@
+module.exports = require('./dist/preset');

addons/a11y/src/preset/addDecorator.ts

@@ -0,0 +1,4 @@
+import { addDecorator } from '@storybook/client-api';
+import { withA11Y } from '../index';
+
+addDecorator(withA11Y);

addons/a11y/src/preset/index.ts

@@ -0,0 +1,15 @@
+type A11yOptions = {
+  addDecorator?: boolean;
+};
+
+export function managerEntries(entry: any[] = []) {
+  return [...entry, require.resolve('../register')];
+}
+
+export function config(entry: any[] = [], { addDecorator = true }: A11yOptions = {}) {
+  const a11yConfig = [];
+  if (addDecorator) {
+    a11yConfig.push(require.resolve('./addDecorator'));
+  }
+  return [...entry, ...a11yConfig];
+}

examples/angular-cli/.storybook/main.js

@@ -9,6 +9,6 @@ module.exports = {
     '@storybook/addon-options',
     '@storybook/addon-jest',
     '@storybook/addon-backgrounds',
-    '@storybook/addon-a11y',
+    '@storybook/addon-a11y/preset',
   ],
 };

examples/angular-cli/.storybook/preview.ts

@@ -1,5 +1,4 @@
 import { addParameters, addDecorator } from '@storybook/angular';
-import { withA11y } from '@storybook/addon-a11y';
 import { setCompodocJson } from '@storybook/addon-docs/angular';
 import addCssWarning from '../src/cssWarning';
 
@@ -9,7 +8,6 @@ import docJson from '../documentation.json';
 
 setCompodocJson(docJson);
 
-addDecorator(withA11y);
 addCssWarning();
 
 addParameters({

examples/cra-kitchen-sink/.storybook/main.js

@@ -13,7 +13,7 @@ module.exports = {
     '@storybook/addon-options',
     '@storybook/addon-knobs',
     '@storybook/addon-backgrounds',
-    '@storybook/addon-a11y',
+    '@storybook/addon-a11y/preset',
     '@storybook/addon-jest',
   ],
   stories: ['../src/stories/**/*.stories.(js|mdx)'],

examples/cra-kitchen-sink/.storybook/preview.js

@@ -1,7 +1,5 @@
 import { addParameters, addDecorator } from '@storybook/react';
-import { withA11y } from '@storybook/addon-a11y';
 
-addDecorator(withA11y);
 addParameters({
   options: {
     storySort: (a, b) =>

examples/cra-ts-kitchen-sink/.storybook/main.js

@@ -23,6 +23,6 @@ module.exports = {
     '@storybook/addon-docs',
     '@storybook/addon-actions',
     '@storybook/addon-links',
-    '@storybook/addon-a11y',
+    '@storybook/addon-a11y/preset',
   ],
 };

examples/cra-ts-kitchen-sink/.storybook/preview.ts

@@ -1,9 +1,7 @@
 import { addParameters, addDecorator } from '@storybook/react';
-import { withA11y } from '@storybook/addon-a11y';
 import { withKnobs } from '@storybook/addon-knobs';
 
 addDecorator(withKnobs);
-addDecorator(withA11y);
 addParameters({
   options: {
     brandTitle: 'CRA TypeScript Kitchen Sink',

examples/ember-cli/.storybook/main.js

@@ -2,7 +2,7 @@ const path = require('path');
 
 module.exports = {
   addons: [
-    '@storybook/addon-a11y',
+    '@storybook/addon-a11y/preset',
     '@storybook/addon-storysource',
     '@storybook/addon-actions',
     '@storybook/addon-docs',

examples/ember-cli/.storybook/preview.js

@@ -1,11 +1,9 @@
 import { addParameters, addDecorator } from '@storybook/ember';
 import { setJSONDoc } from '@storybook/addon-docs/ember';
-import { withA11y } from '@storybook/addon-a11y';
 // eslint-disable-next-line import/no-unresolved
 import docJson from '../ember-output/storybook-docgen/index.json';
 
 setJSONDoc(docJson);
-addDecorator(withA11y);
 addParameters({
   options: {
     showRoots: true,

examples/html-kitchen-sink/.storybook/main.js

@@ -3,7 +3,7 @@ module.exports = {
   stories: [`${__dirname}/../stories/*.stories.*`],
   addons: [
     '@storybook/addon-docs',
-    '@storybook/addon-a11y',
+    '@storybook/addon-a11y/preset',
     '@storybook/addon-actions',
     '@storybook/addon-backgrounds',
     '@storybook/addon-events',

examples/html-kitchen-sink/.storybook/preview.js

@@ -1,7 +1,4 @@
 import { addParameters, addDecorator } from '@storybook/html';
-import { withA11y } from '@storybook/addon-a11y';
-
-addDecorator(withA11y);
 
 addParameters({
   a11y: {

examples/html-kitchen-sink/stories/addon-a11y.stories.js

@@ -1,11 +1,9 @@
 import { document, setTimeout } from 'global';
-import { withA11y } from '@storybook/addon-a11y';
 
 const text = 'Testing the a11y addon';
 
 export default {
   title: 'Addons/a11y',
-  decorators: [withA11y],
   parameters: {
     options: { selectedPanel: 'storybook/a11y/panel' },
   },

examples/marko-cli/.storybook/main.js

@@ -7,7 +7,7 @@ module.exports = {
     '@storybook/addon-actions',
     '@storybook/addon-knobs',
     '@storybook/addon-options',
-    '@storybook/addon-a11y',
+    '@storybook/addon-a11y/preset',
   ],
   webpackFinal: async config => {
     config.module.rules.push({

examples/mithril-kitchen-sink/.storybook/main.js

@@ -10,7 +10,7 @@ module.exports = {
     '@storybook/addon-viewport',
     '@storybook/addon-options',
     '@storybook/addon-backgrounds',
-    '@storybook/addon-a11y',
+    '@storybook/addon-a11y/preset',
   ],
   webpackFinal: async config => {
     config.module.rules.push({

examples/official-storybook/main.js

@@ -16,7 +16,7 @@ module.exports = {
     '@storybook/addon-knobs',
     '@storybook/addon-cssresources',
     '@storybook/addon-backgrounds',
-    '@storybook/addon-a11y',
+    '@storybook/addon-a11y/preset',
     '@storybook/addon-jest',
     '@storybook/addon-viewport',
     '@storybook/addon-graphql',

examples/official-storybook/preview.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { addDecorator, addParameters } from '@storybook/react';
 import { Global, ThemeProvider, themes, createReset, convert } from '@storybook/theming';
 import { withCssResources } from '@storybook/addon-cssresources';
-import { withA11y } from '@storybook/addon-a11y';
 import { DocsPage } from '@storybook/addon-docs/blocks';
 
 import addHeadWarning from './head-warning';
@@ -25,7 +24,6 @@ addHeadWarning('preview-head-not-loaded', 'Preview head not loaded');
 addHeadWarning('dotenv-file-not-loaded', 'Dotenv file not loaded');
 
 addDecorator(withCssResources);
-addDecorator(withA11y);
 
 addDecorator(storyFn => (
   <ThemeProvider theme={convert(themes.light)}>

examples/preact-kitchen-sink/.storybook/main.js

@@ -11,7 +11,7 @@ module.exports = {
     '@storybook/addon-options',
     '@storybook/addon-backgrounds',
     '@storybook/addon-contexts',
-    '@storybook/addon-a11y',
+    '@storybook/addon-a11y/preset',
   ],
   webpackFinal: config => {
     config.module.rules.push({

examples/rax-kitchen-sink/.storybook/main.js

@@ -10,7 +10,7 @@ module.exports = {
     '@storybook/addon-options',
     '@storybook/addon-knobs',
     '@storybook/addon-backgrounds',
-    '@storybook/addon-a11y',
+    '@storybook/addon-a11y/preset',
     '@storybook/addon-jest',
   ],
   webpackFinal: async config => ({

examples/rax-kitchen-sink/src/stories/addon-a11y.stories.js

@@ -1,11 +1,9 @@
 import { createElement } from 'rax';
-import { withA11Y } from '@storybook/addon-a11y';
 import Text from 'rax-text';
 import View from 'rax-view';
 
 export default {
   title: 'Addon/addon-a11y',
-  decorators: [withA11Y],
 };
 
 export const Basic = () => <Text>RAX TEXT NODE</Text>;

examples/riot-kitchen-sink/.storybook/main.js

@@ -10,7 +10,7 @@ module.exports = {
     '@storybook/addon-viewport',
     '@storybook/addon-options',
     '@storybook/addon-backgrounds',
-    '@storybook/addon-a11y',
+    '@storybook/addon-a11y/preset',
   ],
   webpackFinal: async config => {
     config.module.rules.push({

examples/svelte-kitchen-sink/.storybook/main.js

@@ -10,7 +10,7 @@ module.exports = {
     '@storybook/addon-backgrounds',
     '@storybook/addon-viewport',
     '@storybook/addon-options',
-    '@storybook/addon-a11y',
+    '@storybook/addon-a11y/preset',
   ],
   webpackFinal: async config => {
     config.module.rules.push({

examples/vue-kitchen-sink/.storybook/main.js

@@ -9,7 +9,7 @@ module.exports = {
     '@storybook/addon-viewport',
     '@storybook/addon-options',
     '@storybook/addon-backgrounds',
-    '@storybook/addon-a11y',
+    '@storybook/addon-a11y/preset',
     '@storybook/addon-contexts',
   ],
 };

examples/vue-kitchen-sink/.storybook/preview.js

@@ -1,11 +1,9 @@
 import { addParameters, addDecorator } from '@storybook/vue';
 import Vue from 'vue';
 import Vuex from 'vuex';
-import { withA11y } from '@storybook/addon-a11y';
 
 import MyButton from '../src/stories/Button.vue';
 
-addDecorator(withA11y);
 Vue.component('my-button', MyButton);
 Vue.use(Vuex);
 

examples/web-components-kitchen-sink/.storybook/main.js

@@ -1,7 +1,7 @@
 module.exports = {
   addons: [
     '@storybook/addon-docs',
-    '@storybook/addon-a11y',
+    '@storybook/addon-a11y/preset',
     '@storybook/addon-actions',
     '@storybook/addon-backgrounds',
     '@storybook/addon-knobs',

examples/web-components-kitchen-sink/.storybook/preview.js

@@ -6,14 +6,11 @@ import {
   addDecorator,
   setCustomElements,
 } from '@storybook/web-components';
-import { withA11y } from '@storybook/addon-a11y';
 
 import customElements from '../custom-elements.json';
 
 setCustomElements(customElements);
 
-addDecorator(withA11y);
-
 addParameters({
   a11y: {
     config: {},

examples/web-components-kitchen-sink/stories/addon-a11y.stories.js

@@ -1,12 +1,10 @@
 import { document, setTimeout } from 'global';
-import { withA11y } from '@storybook/addon-a11y';
 import { html } from 'lit-html';
 
 const text = 'Testing the a11y addon';
 
 export default {
   title: 'Addons/a11y',
-  decorators: [withA11y],
   parameters: {
     options: { selectedPanel: 'storybook/a11y/panel' },
   },