From b5451c69ffc56556fcfa18bd2adb3f39f034b358 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 4 Mar 2019 14:19:50 +0800 Subject: [PATCH] Merge pull request #5833 from storybooks/5832-a11y-migration Cleanup & document a11y migration --- MIGRATION.md | 49 ++++++++++++++----- addons/a11y/README.md | 10 ++-- addons/a11y/src/index.js | 34 ++++++------- .../stories/addon-a11y.stories.js | 4 +- examples/official-storybook/config.js | 4 +- .../addon-a11y.stories.storyshot | 6 +++ .../stories/addon-a11y.stories.js | 9 ++++ 7 files changed, 76 insertions(+), 40 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 195e6058194..5bb3baba152 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -6,7 +6,8 @@ - [Options addon deprecated](#options-addon-deprecated) - [Individual story decorators](#individual-story-decorators) - [Addon backgrounds uses parameters](#addon-backgrounds-uses-parameters) - - [Addon viewport uses parameters](#addon-backgrounds-uses-parameters) + - [Addon viewport uses parameters](#addon-viewport-uses-parameters) + - [Addon a11y uses parameters](#addon-a11y-uses-parameters-decorator-renamed) - [From version 4.0.x to 4.1.x](#from-version-40x-to-41x) - [Private addon config](#private-addon-config) - [React 15.x](#react-15x) @@ -204,7 +205,31 @@ addParameters({ viewport: options }); The `withViewport` decorator is also no longer supported and should be replaced with a parameter based API as above. Also the `onViewportChange` callback is no longer supported. -See the [README](https://github.com/storybooks/storybook/blob/master/addons/viewport/README.md) for the viewport addon for more information. +See the [viewport addon README](https://github.com/storybooks/storybook/blob/master/addons/viewport/README.md) for more information. + +## Addon a11y uses parameters, decorator renamed + +Similarly, `@storybook/addon-a11y` uses parameters to pass a11y options. If you previously had: + +```js +import { configureA11y } from `@storybook/addon-a11y`; + +configureA11y(options); +``` + +You should replace it with: + +```js +import { addParameters } from '@storybook/react'; // or others + +addParameters({ a11y: options }); +``` + +You can also pass `a11y` parameters at the component level (via `storiesOf(...).addParameters`), and the story level (via the third argument to `.add()`). + +Furthermore, the decorator `checkA11y` has been deprecated and renamed to `withA11y` to make it consistent with other Storybook decorators. + +See the [a11y addon README](https://github.com/storybooks/storybook/blob/master/addons/a11y/README.md) for more information. ## From version 4.0.x to 4.1.x @@ -237,16 +262,16 @@ Also, here's the error you'll get if you're running an older version of React: ``` core.browser.esm.js:15 Uncaught TypeError: Object(...) is not a function - at Module../node_modules/@emotion/core/dist/core.browser.esm.js (core.browser.esm.js:15) - at __webpack_require__ (bootstrap:724) - at fn (bootstrap:101) - at Module../node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js (styled-base.browser.esm.js:1) - at __webpack_require__ (bootstrap:724) - at fn (bootstrap:101) - at Module../node_modules/@emotion/styled/dist/styled.esm.js (styled.esm.js:1) - at __webpack_require__ (bootstrap:724) - at fn (bootstrap:101) - at Object../node_modules/@storybook/components/dist/navigation/MenuLink.js (MenuLink.js:12) +at Module../node_modules/@emotion/core/dist/core.browser.esm.js (core.browser.esm.js:15) +at **webpack_require** (bootstrap:724) +at fn (bootstrap:101) +at Module../node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js (styled-base.browser.esm.js:1) +at **webpack_require** (bootstrap:724) +at fn (bootstrap:101) +at Module../node_modules/@emotion/styled/dist/styled.esm.js (styled.esm.js:1) +at **webpack_require** (bootstrap:724) +at fn (bootstrap:101) +at Object../node_modules/@storybook/components/dist/navigation/MenuLink.js (MenuLink.js:12) ``` diff --git a/addons/a11y/README.md b/addons/a11y/README.md index ea4ce8e1c8a..04f3f809819 100755 --- a/addons/a11y/README.md +++ b/addons/a11y/README.md @@ -20,16 +20,16 @@ Add this line to your `addons.js` file (create this file inside your storybook c import '@storybook/addon-a11y/register'; ``` -import the `withA11Y` decorator to check your stories for violations within your components. +import the `withA11y` decorator to check your stories for violations within your components. ```js import React from 'react'; import { storiesOf } from '@storybook/react'; -import { withA11Y } from '@storybook/addon-a11y'; +import { withA11y } from '@storybook/addon-a11y'; // should only be added once // best place is in config.js -addDecorator(withA11Y) +addDecorator(withA11y) storiesOf('button', module) .add('Accessible', () => ( @@ -51,9 +51,9 @@ You can override these options at story level too. import React from 'react'; import { storiesOf, addDecorator, addParameters } from '@storybook/react'; -import { withA11Y } from '@storybook/addon-a11y'; +import { withA11y } from '@storybook/addon-a11y'; -addDecorator(withA11Y) +addDecorator(withA11y) addParameters({ a11y: { // ... axe options diff --git a/addons/a11y/src/index.js b/addons/a11y/src/index.js index dd18397d73d..da104099d00 100644 --- a/addons/a11y/src/index.js +++ b/addons/a11y/src/index.js @@ -3,7 +3,7 @@ import axe from 'axe-core'; import deprecate from 'util-deprecate'; import { stripIndents } from 'common-tags'; -import addons, { makeDecorator } from '@storybook/addons'; +import addons from '@storybook/addons'; import { STORY_RENDERED } from '@storybook/core-events'; import EVENTS, { PARAM_KEY } from './constants'; @@ -24,16 +24,16 @@ const report = input => { channel.emit(EVENTS.RESULT, input); }; -const run = (c, o) => { +const run = (config, options) => { progress = progress.then(() => { axe.reset(); - if (c) { - axe.configure(c); + if (config) { + axe.configure(config); } return axe .run( getElement(), - o || { + options || { restoreScroll: true, } ) @@ -41,18 +41,14 @@ const run = (c, o) => { }); }; -export const withA11Y = makeDecorator({ - name: 'withA11Y', - parameterName: PARAM_KEY, - skipIfNoParametersOrOptions: false, - allowDeprecatedUsage: false, - - wrapper: (getStory, context, opt) => { - setup = opt.parameters || opt.options || {}; - - return getStory(context); - }, -}); +// NOTE: we should add paramaters to the STORY_RENDERED event and deprecate this +export const withA11y = (getStory, context) => { + const params = context.parameters[PARAM_KEY]; + if (params) { + setup = params; + } + return getStory(context); +}; channel.on(STORY_RENDERED, () => run(setup.config, setup.options)); channel.on(EVENTS.REQUEST, () => run(setup.config, setup.options)); @@ -63,8 +59,8 @@ if (module && module.hot && module.hot.decline) { // TODO: REMOVE at v6.0.0 export const checkA11y = deprecate( - (...args) => withA11Y(...args), - 'checkA11y has been replaced with withA11Y' + (...args) => withA11y(...args), + 'checkA11y has been renamed withA11y' ); // TODO: REMOVE at v6.0.0 diff --git a/examples/html-kitchen-sink/stories/addon-a11y.stories.js b/examples/html-kitchen-sink/stories/addon-a11y.stories.js index ec0c5ab2877..d6b2c50319e 100644 --- a/examples/html-kitchen-sink/stories/addon-a11y.stories.js +++ b/examples/html-kitchen-sink/stories/addon-a11y.stories.js @@ -1,11 +1,11 @@ import { document, setTimeout } from 'global'; import { storiesOf } from '@storybook/html'; -import { withA11Y } from '@storybook/addon-a11y'; +import { withA11y } from '@storybook/addon-a11y'; const text = 'Testing the a11y addon'; storiesOf('Addons|a11y', module) - .addDecorator(withA11Y) + .addDecorator(withA11y) .addParameters({ options: { selectedPanel: 'storybook/a11y/panel' } }) .add('Default', () => ``) .add('Label', () => ``) diff --git a/examples/official-storybook/config.js b/examples/official-storybook/config.js index cfebccad259..20c4851863b 100644 --- a/examples/official-storybook/config.js +++ b/examples/official-storybook/config.js @@ -3,7 +3,7 @@ import { storiesOf, configure, addDecorator, addParameters } from '@storybook/re import { Global, ThemeProvider, themes, createGlobal } from '@storybook/theming'; import { withCssResources } from '@storybook/addon-cssresources'; -import { withA11Y } from '@storybook/addon-a11y'; +import { withA11y } from '@storybook/addon-a11y'; import { withNotes } from '@storybook/addon-notes'; import 'storybook-chromatic'; @@ -28,7 +28,7 @@ addHeadWarning('preview-head-not-loaded', 'Preview head not loaded'); addHeadWarning('dotenv-file-not-loaded', 'Dotenv file not loaded'); addDecorator(withCssResources); -addDecorator(withA11Y); +addDecorator(withA11y); addDecorator(withNotes); addDecorator(storyFn => ( diff --git a/examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot index b8fb54e56eb..4923d4cca68 100644 --- a/examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot +++ b/examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot @@ -357,6 +357,12 @@ exports[`Storyshots Addons|A11y/Image Without alt 1`] = ` /> `; +exports[`Storyshots Addons|A11y/Image Without alt but unchecked 1`] = ` + +`; + exports[`Storyshots Addons|A11y/Typography Correct 1`] = ` Array [

diff --git a/examples/official-storybook/stories/addon-a11y.stories.js b/examples/official-storybook/stories/addon-a11y.stories.js index 2ff7308f8c9..a4717e3ec9e 100644 --- a/examples/official-storybook/stories/addon-a11y.stories.js +++ b/examples/official-storybook/stories/addon-a11y.stories.js @@ -56,6 +56,15 @@ storiesOf('Addons|A11y/Image', module) .addParameters({ options: { selectedPanel: 'storybook/a11y/panel' } }) /* eslint-disable jsx-a11y/alt-text */ .add('Without alt', () => ) + .add('Without alt but unchecked', () => , { + a11y: { + config: { + disableOtherRules: true, + rules: [], + }, + options: {}, + }, + }) .add('With alt', () => {text}) .add('Presentation', () => );