Storybook a11y tests with Storybook Test Runner

packages/react-components/.storybook/test-runner.ts

@@ -0,0 +1,20 @@
+// .storybook/test-runner.ts
+// From: https://storybook.js.org/docs/writing-tests/accessibility-testing#setup
+
+import type { TestRunnerConfig } from "@storybook/test-runner";
+import { injectAxe, checkA11y } from "axe-playwright";
+
+/*
+ * See https://storybook.js.org/docs/writing-tests/test-runner#test-hook-api
+ * to learn more about the test-runner hooks API.
+ */
+const config: TestRunnerConfig = {
+  async preVisit(page) {
+    await injectAxe(page);
+  },
+  async postVisit(page) {
+    await checkA11y(page, "#storybook-root");
+  },
+};
+
+export default config;

packages/react-components/README.md

@@ -97,12 +97,20 @@ This project follows semantic versioning. See [CHANGELOG.md](./CHANGELOG.md) for
 
 Components live in `./src/components` and are targeted by the build process with an export in `./src/index.ts`.
 
+#### Testing components with Jest
+
+Unit tests can be run with Jest using `npm run test`.
+
 ### Storybook
 
 Storybook stories live in `./src/stories`.
 
 Run `npm run storybook-dev` to access the Storybook instance for the component library.
 
+#### Testing with Storybook Test Runner
+
+With Storybook running locally, use the `npm run test-storybook` script to run `@storybook/test-runner` using the configuration defined in `./.storybook/test-runner.ts`. [Learn more about Storybook Test Runner](https://storybook.js.org/docs/writing-tests/test-runner).
+
 ### Vite kitchen sink application
 
 Vite uses the components code directly from `./src/components` in groups of content in `./src/pages`.