Merge pull request #29296 from storybookjs/shilman/improve-a11y-install

Docs: Add streamlined a11y setup docs
storybookjs · Oct 9, 2024 · e660a1a · e660a1a
2 parents be183d9 + d071ee9
commit e660a1a
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 11 deletions.
diff --git a/docs/_snippets/storybook-a11y-add.md b/docs/_snippets/storybook-a11y-add.md
@@ -0,0 +1,11 @@
+```shell renderer="common" language="js" packageManager="npm"
+npx storybook add @storybook/addon-a11y
+```
+
+```shell renderer="common" language="js" packageManager="pnpm"
+pnpm exec storybook add @storybook/addon-a11y
+```
+
+```shell renderer="common" language="js" packageManager="yarn"
+yarn exec storybook add @storybook/addon-a11y
+```
diff --git a/docs/_snippets/storybook-a11y-install.md b/docs/_snippets/storybook-a11y-install.md
@@ -9,4 +9,3 @@ 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
@@ -25,4 +25,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/writing-tests/accessibility-testing.mdx b/docs/writing-tests/accessibility-testing.mdx
@@ -19,23 +19,19 @@ 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.
+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 */}
 
-<CodeSnippets path="storybook-a11y-install.md" />
+<CodeSnippets path="storybook-a11y-add.md" />
 
 {/* prettier-ignore-end */}
 
-Update your Storybook configuration (in `.storybook/main.js|ts`) to include the accessibility addon.
-
-{/* prettier-ignore-start */}
+<Callout variant="info">
 
-<CodeSnippets path="storybook-a11y-register.md" />
+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.
 
-{/* prettier-ignore-end */}
+</Callout>
 
 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.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/addon-a11y
		```shell renderer="common" language="js" packageManager="yarn"
		yarn add --dev @storybook/addon-a11y
		```
Original file line number	Diff line number	Diff line change
Expand Up		@@ -25,4 +25,3 @@ const config: StorybookConfig = {

		export default config;
		```