Add out of the box support for a11y tests

.storybook/preview.ts

@@ -14,6 +14,7 @@ const preview: Preview = {
   decorators: [withSkippableTests],
   parameters: {
     a11y: {
+      test: 'error',
       config: {
         rules: [
           {

.storybook/test-runner.ts

@@ -1,5 +1,4 @@
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
-import { injectAxe, checkA11y, configureAxe } from 'axe-playwright';
 
 import { getStoryContext, waitForPageReady } from '../dist';
 import type { TestRunnerConfig } from '../dist';
@@ -21,9 +20,6 @@ const config: TestRunnerConfig = {
   setup() {
     expect.extend({ toMatchImageSnapshot });
   },
-  async preVisit(page) {
-    await injectAxe(page);
-  },
   async postVisit(page, context) {
     // Get entire context of a story, including parameters, args, argTypes, etc.
     const { parameters } = await getStoryContext(page, context);
@@ -51,18 +47,6 @@ const config: TestRunnerConfig = {
     const innerHTML = await elementHandler?.innerHTML();
     // HTML snapshot tests
     expect(innerHTML).toMatchSnapshot();
-
-    await configureAxe(page, {
-      rules: parameters?.a11y?.config?.rules,
-    });
-
-    const element = parameters?.a11y?.element ?? 'body';
-    await checkA11y(page, element, {
-      detailedReport: true,
-      detailedReportOptions: {
-        html: true,
-      },
-    });
   },
 };
 

README.md

@@ -45,6 +45,8 @@ Storybook test runner turns all of your stories into executable tests.
 - [Recipes](#recipes)
   - [Preconfiguring viewport size](#preconfiguring-viewport-size)
   - [Accessibility testing](#accessibility-testing)
+    - [With Storybook 9](#with-storybook-9)
+    - [With Storybook 8](#with-storybook-8)
   - [DOM snapshot (HTML)](#dom-snapshot-html)
   - [Image snapshot](#image-snapshot)
 - [Troubleshooting](#troubleshooting)
@@ -167,7 +169,7 @@ Usage: test-storybook [options]
 | `--json`                          | Prints the test results in JSON. This mode will send all other test output and user messages to stderr. <br/>`test-storybook --json`                                          |
 | `--outputFile`                    | Write test results to a file when the --json option is also specified. <br/>`test-storybook --json --outputFile results.json`                                                 |
 | `--junit`                         | Indicates that test information should be reported in a junit file. <br/>`test-storybook --**junit**`                                                                         |
-| `--listTests`                     | Lists all test files that will be run, and exits<br/>`test-storybook --listTests`                                                                         |
+| `--listTests`                     | Lists all test files that will be run, and exits<br/>`test-storybook --listTests`                                                                                             |
 | `--ci`                            | Instead of the regular behavior of storing a new snapshot automatically, it will fail the test and require Jest to be run with `--updateSnapshot`. <br/>`test-storybook --ci` |
 | `--shard [shardIndex/shardCount]` | Splits your test suite across different machines to run in CI. <br/>`test-storybook --shard=1/3`                                                                              |
 | `--failOnConsole`                 | Makes tests fail on browser console errors<br/>`test-storybook --failOnConsole`                                                                                               |
@@ -885,6 +887,32 @@ export default config;
 
 ### Accessibility testing
 
+#### With Storybook 9
+
+In Storybook 9, the accessibility addon has been enhanced with automated reporting capabilities and the Test-runner has out of the box support for it. If you have `@storybook/addon-a11y` installed, as long as you enable them via parameters, you will get a11y checks for every story:
+
+```ts
+// .storybook/preview.ts
+
+const preview = {
+  parameters: {
+    a11y: {
+      // 'error' will cause a11y violations to fail tests
+      test: 'error', // or 'todo' or 'off'
+    },
+  },
+};
+
+export default preview;
+```
+
+If you had a11y tests set up previously for Storybook 8 (with the recipe below), you can uninstall `axe-playwright` and remove all the code from the test-runner hooks, as they are not necessary anymore.
+
+#### With Storybook 8
+
+> [!TIP]
+> If you upgrade to Storybook 9, there is out of the box support for a11y tests and you don't have to follow a recipe like this.
+
 You can install `axe-playwright` and use it in tandem with the test-runner to test the accessibility of your components.
 If you use [`@storybook/addon-a11y`](https://storybook.js.org/addons/@storybook/addon-a11y), you can reuse its parameters and make sure that the tests match in configuration, both in the accessibility addon panel and the test-runner.
 

package.json

@@ -85,7 +85,6 @@
     "@types/node-fetch": "^2.6.11",
     "@vitejs/plugin-react": "^4.0.3",
     "auto": "^11.1.6",
-    "axe-playwright": "^2.1.0",
     "babel-jest": "^29.0.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-istanbul": "^6.1.1",