Addon-a11y: Add preset (#9697)

Addon-a11y: Add preset

MIGRATION.md

@@ -1,6 +1,8 @@
 # Migration
 
 - [Migration](#migration)
+  - [From version 5.3.x to 6.0.x](#from-version-53x-to-60x)
+    - [New addon presets](#new-addon-presets)
   - [From version 5.2.x to 5.3.x](#from-version-52x-to-53x)
     - [To main.js configuration](#to-mainjs-configuration)
     - [Create React App preset](#create-react-app-preset)
@@ -76,6 +78,53 @@
     - [Packages renaming](#packages-renaming)
     - [Deprecated embedded addons](#deprecated-embedded-addons)
 
+## From version 5.3.x to 6.0.x
+
+### New addon presets
+
+In Storybook 5.3 we introduced a declarative [main.js configuration](#to-mainjs-configuration), which is now the recommended way to configure Storybook. Part of the change is a simplified syntax for registering addons, which in 6.0 automatically registers many addons _using a preset_, which is a slightly different behavior than in earlier versions.
+
+This breaking change currently applies to: `addon-a11y`, `addon-knobs`.
+
+Consider the following `main.js` config for the accessibility addon, `addon-a11y`:
+
+```js
+module.exports = {
+  stories: ['../**/*.stories.js'],
+  addons: ['@storybook/addon-a11y'],
+};
+```
+
+In earlier versions of Storybook, this would automatically call `@storybook/addon-a11y/register`, which adds the the a11y panel to the Storybook UI. As a user you would also add a decorator:
+
+```js
+import { withA11Y } from '../index';
+
+addDecorator(withA11Y);
+```
+
+Now in 6.0, `addon-a11y` comes with a preset, `@storybook/addon-a11y/preset`, that does this automatically for you. This change simplifies configuration, since now you don't need to add that decorator. However, if you are upgrading
+
+If you wish to disable this new behavior, you can modify your `main.js` to force it to use the `register` logic rather than the `preset`:
+
+```js
+module.exports = {
+  stories: ['../**/*.stories.js'],
+  addons: ['@storybook/addon-a11y/register'],
+};
+```
+
+If you wish to selectively disable `a11y` checks for a subset of stories, you can control this with story parameters:
+
+```js
+export const MyNonCheckedStory = () => <SomeComponent />;
+MyNonCheckedStory.story = {
+  parameters: {
+    a11y: { disable: true },
+  },
+};
+```
+
 ## From version 5.2.x to 5.3.x
 
 ### To main.js configuration
@@ -214,7 +263,7 @@ yarn sb migrate upgrade-hierarchy-separators --glob="*.stories.js"
 If you were using `|` and wish to keep the "root" behavior, use the `showRoots: true` option to re-enable roots:
 
 ```js
-addParameters({ 
+addParameters({
   options: {
     showRoots: true,
   },
@@ -226,13 +275,14 @@ NOTE: it is no longer possible to have some stories with roots and others withou
 ### Addon StoryShots Puppeteer uses external puppeteer
 
 To give you more control on the Chrome version used when running StoryShots Puppeteer, `puppeteer` is no more included in the addon dependencies. So you can now pick the version of `puppeteer` you want and set it in your project.
- 
+
 If you want the latest version available just run:
+
 ```sh
 yarn add puppeteer --dev
 OR
 npm install puppeteer --save-dev
-``` 
+```
 
 ## From version 5.1.x to 5.2.x
 

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'],
+};
+```
+
 ## 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.4",
     "@storybook/api": "6.0.0-alpha.4",
+    "@storybook/client-api": "6.0.0-alpha.4",
     "@storybook/client-logger": "6.0.0-alpha.4",
     "@storybook/components": "6.0.0-alpha.4",
     "@storybook/core-events": "6.0.0-alpha.4",

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];
+}

app/server/package.json

@@ -15,20 +15,20 @@
     "directory": "app/html"
   },
   "license": "MIT",
-  "files": [
-    "bin/**/*",
-    "dist/**/*",
-    "README.md",
-    "*.js",
-    "*.d.ts"
-  ],
   "main": "dist/client/index.js",
   "types": "dist/client/index.d.ts",
   "bin": {
     "build-storybook": "./bin/build.js",
     "start-storybook": "./bin/index.js",
     "storybook-server": "./bin/index.js"
   },
+  "files": [
+    "bin/**/*",
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },

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/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/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/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/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/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/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/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/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' },
   },