ci: adds a11y testing package, runner, and gh action

.github/workflows/build-and-test.yml

@@ -60,6 +60,9 @@ jobs:
       - name: Check format
         run: yarn format:check
 
+      - name: Check a11y
+        run: yarn test-storybook
+
       - name: Build Storybook
         run: yarn build-storybook
 

.storybook/test-runner.ts

@@ -0,0 +1,33 @@
+import { getStoryContext, type TestRunnerConfig } from '@storybook/test-runner';
+import { injectAxe, checkA11y, configureAxe } 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, context) {
+    const storyContext = await getStoryContext(page, context);
+
+    if (storyContext.parameters?.a11y?.disable) {
+      return;
+    }
+
+    await configureAxe(page, {
+      rules: storyContext.parameters?.a11y?.config?.rules,
+    });
+
+    await checkA11y(page, '#storybook-root', {
+      detailedReport: true,
+      detailedReportOptions: {
+        html: true,
+      },
+      verbose: false,
+    });
+  },
+};
+
+export default config;

package.json

@@ -43,6 +43,7 @@
     "test:bundles": "vitest --run bundles.test.tsx --mode bundles",
     "test:serverside": "yarn build && node src/serverSideTest.js",
     "storybook": "storybook dev -p 9009",
+    "test-storybook": "test-storybook --url http://localhost:9009",
     "build-storybook": "storybook build",
     "build": "vite build && yarn run build:uswds && yarn run test:bundles",
     "build:uswds": "vite build --mode uswds",
@@ -84,6 +85,7 @@
     "@storybook/react": "^7.6.10",
     "@storybook/react-vite": "^7.6.10",
     "@storybook/test": "^7.6.10",
+    "@storybook/test-runner": "^0.16.0",
     "@storybook/theming": "^7.6.10",
     "@testing-library/dom": "^9.0.0",
     "@testing-library/jest-dom": "^6.2.0",
@@ -98,6 +100,7 @@
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-istanbul": "^1.2.1",
     "all-contributors-cli": "^6.24.0",
+    "axe-playwright": "^2.0.1",
     "babel-loader": "^9.1.3",
     "classnames": "^2.3.2",
     "danger": "^11.2.3",