From 4c861a2f7337ae56543f7e274282d2b896aa7b01 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 8 Oct 2024 10:07:12 +0800 Subject: [PATCH 1/2] Docs: Add streamlined a11y setup docs --- ...-a11y-install.md => storybook-a11y-add.md} | 7 ++--- docs/_snippets/storybook-a11y-register.md | 28 ------------------- docs/writing-tests/accessibility-testing.mdx | 14 ++-------- 3 files changed, 5 insertions(+), 44 deletions(-) rename docs/_snippets/{storybook-a11y-install.md => storybook-a11y-add.md} (61%) delete mode 100644 docs/_snippets/storybook-a11y-register.md diff --git a/docs/_snippets/storybook-a11y-install.md b/docs/_snippets/storybook-a11y-add.md similarity index 61% rename from docs/_snippets/storybook-a11y-install.md rename to docs/_snippets/storybook-a11y-add.md index 066faccd6c8f..813c19114eba 100644 --- a/docs/_snippets/storybook-a11y-install.md +++ b/docs/_snippets/storybook-a11y-add.md @@ -1,12 +1,11 @@ ```shell renderer="common" language="js" packageManager="npm" -npm install @storybook/addon-a11y --save-dev +npx storybook add @storybook/addon-a11y ``` ```shell renderer="common" language="js" packageManager="pnpm" -pnpm add --save-dev @storybook/addon-a11y +pnpx storybook add @storybook/addon-a11y ``` ```shell renderer="common" language="js" packageManager="yarn" -yarn add --dev @storybook/addon-a11y +yarn dlx storybook add @storybook/addon-a11y ``` - diff --git a/docs/_snippets/storybook-a11y-register.md b/docs/_snippets/storybook-a11y-register.md deleted file mode 100644 index e29f5c9bde9e..000000000000 --- a/docs/_snippets/storybook-a11y-register.md +++ /dev/null @@ -1,28 +0,0 @@ -```js filename=".storybook/main.js" renderer="common" language="js" -export default { - // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - addons: [ - // Other Storybook addons - '@storybook/addon-a11y', //👈 The a11y addon goes here - ], -}; -``` - -```ts filename=".storybook/main.ts" renderer="common" language="ts" -// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - addons: [ - // Other Storybook addons - '@storybook/addon-a11y', //👈 The a11y addon goes here - ], -}; - -export default config; -``` - diff --git a/docs/writing-tests/accessibility-testing.mdx b/docs/writing-tests/accessibility-testing.mdx index faa147e958c6..500f28efd33d 100644 --- a/docs/writing-tests/accessibility-testing.mdx +++ b/docs/writing-tests/accessibility-testing.mdx @@ -19,21 +19,11 @@ Storybook provides an official [a11y addon](https://storybook.js.org/addons/@sto ### Set up the a11y addon -If you want to check accessibility for your stories using the [addon](https://storybook.js.org/addons/@storybook/addon-a11y/), you'll need to install it and add it to your Storybook. - -Run the following command to install the addon. - -{/* prettier-ignore-start */} - - - -{/* prettier-ignore-end */} - -Update your Storybook configuration (in `.storybook/main.js|ts`) to include the accessibility addon. +If you want to check accessibility for your stories using the [addon](https://storybook.js.org/addons/@storybook/addon-a11y/), you'll need to add it to your Storybook. {/* prettier-ignore-start */} - + {/* prettier-ignore-end */} From dcca2f0bea5af5bbc093238552a861d5827d44e3 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Wed, 9 Oct 2024 15:03:32 +0100 Subject: [PATCH 2/2] Minor fixes to the documentation --- docs/_snippets/storybook-a11y-add.md | 4 +-- docs/_snippets/storybook-a11y-install.md | 11 ++++++++ docs/_snippets/storybook-a11y-register.md | 27 ++++++++++++++++++++ docs/writing-tests/accessibility-testing.mdx | 8 +++++- 4 files changed, 47 insertions(+), 3 deletions(-) create mode 100644 docs/_snippets/storybook-a11y-install.md create mode 100644 docs/_snippets/storybook-a11y-register.md diff --git a/docs/_snippets/storybook-a11y-add.md b/docs/_snippets/storybook-a11y-add.md index 813c19114eba..f95b3f3b5b66 100644 --- a/docs/_snippets/storybook-a11y-add.md +++ b/docs/_snippets/storybook-a11y-add.md @@ -3,9 +3,9 @@ npx storybook add @storybook/addon-a11y ``` ```shell renderer="common" language="js" packageManager="pnpm" -pnpx storybook add @storybook/addon-a11y +pnpm exec storybook add @storybook/addon-a11y ``` ```shell renderer="common" language="js" packageManager="yarn" -yarn dlx storybook add @storybook/addon-a11y +yarn exec storybook add @storybook/addon-a11y ``` diff --git a/docs/_snippets/storybook-a11y-install.md b/docs/_snippets/storybook-a11y-install.md new file mode 100644 index 000000000000..5837429854f8 --- /dev/null +++ b/docs/_snippets/storybook-a11y-install.md @@ -0,0 +1,11 @@ +```shell renderer="common" language="js" packageManager="npm" +npm install @storybook/addon-a11y --save-dev +``` + +```shell renderer="common" language="js" packageManager="pnpm" +pnpm add --save-dev @storybook/addon-a11y +``` + +```shell renderer="common" language="js" packageManager="yarn" +yarn add --dev @storybook/addon-a11y +``` diff --git a/docs/_snippets/storybook-a11y-register.md b/docs/_snippets/storybook-a11y-register.md new file mode 100644 index 000000000000..774d14622063 --- /dev/null +++ b/docs/_snippets/storybook-a11y-register.md @@ -0,0 +1,27 @@ +```js filename=".storybook/main.js" renderer="common" language="js" +export default { + // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) + framework: '@storybook/your-framework', + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + addons: [ + // Other Storybook addons + '@storybook/addon-a11y', //👈 The a11y addon goes here + ], +}; +``` + +```ts filename=".storybook/main.ts" renderer="common" language="ts" +// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) +import type { StorybookConfig } from '@storybook/your-framework'; + +const config: StorybookConfig = { + framework: '@storybook/your-framework', + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + addons: [ + // Other Storybook addons + '@storybook/addon-a11y', //👈 The a11y addon goes here + ], +}; + +export default config; +``` diff --git a/docs/writing-tests/accessibility-testing.mdx b/docs/writing-tests/accessibility-testing.mdx index 500f28efd33d..c5560e85daf4 100644 --- a/docs/writing-tests/accessibility-testing.mdx +++ b/docs/writing-tests/accessibility-testing.mdx @@ -19,7 +19,7 @@ Storybook provides an official [a11y addon](https://storybook.js.org/addons/@sto ### Set up the a11y addon -If you want to check accessibility for your stories using the [addon](https://storybook.js.org/addons/@storybook/addon-a11y/), you'll need to add it to your Storybook. +If you want to check accessibility for your stories using the [addon](https://storybook.js.org/addons/@storybook/addon-a11y/), you'll need to add it to your Storybook. You can do this by running the following command: {/* prettier-ignore-start */} @@ -27,6 +27,12 @@ If you want to check accessibility for your stories using the [addon](https://st {/* prettier-ignore-end */} + + +The CLI's [`add`](../api/cli-options.mdx#add) command automates the addon's installation and setup. To install it manually, see our [documentation](../addons/install-addons.mdx#manual-installation) on how to install addons. + + + Start your Storybook, and you will see some noticeable differences in the UI. A new toolbar icon and the accessibility panel where you can inspect the results of the tests. ![Storybook accessibility addon running](../_assets/writing-tests/storybook-a11y-addon-optimized.png)