Run a11y tests in CI

.github/workflows/validate.yml

@@ -51,3 +51,30 @@ jobs:
 
       - name: Run Component Tests
         run: npm run test:components
+
+  a11y-tests:
+      needs: detect-changes
+      runs-on: ubuntu-latest
+      if: needs.detect-changes.outputs.validate-src == 'true'
+      # Keep this tag's version in lockstep with the `playwright` version in package.json.
+      # Using containers instead of installing playwright all the time:
+      # https://playwright.dev/docs/ci#via-containers
+      container:
+        image: mcr.microsoft.com/playwright:v1.61.1-noble
+        options: --ipc=host
+
+      steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup NodeJS
+        uses: actions/setup-node@v4.0.3
+        with:
+          node-version: '24'
+          cache: npm
+
+      - name: Install Deps
+        run: npm ci
+
+      - name: Run Accessibility Tests
+        run: npm run test:a11y

.storybook/preview.ts

@@ -36,6 +36,9 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    a11y: {
+      test: 'error',
+    },
   },
 };
 

README.md

@@ -57,6 +57,18 @@ npm install
 npm run test:components
 ```
 
+Accessibility tests run against Storybook stories in a real browser via Playwright. The first time you run them, install the Playwright browser binaries:
+
+```bash
+npm run test:a11y:setup
+```
+
+Then run the tests:
+
+```bash
+npm run test:a11y
+```
+
 ### Publishing a new version
 
 Once a release is deemed either a major update, minor update or patch update go ahead and update the version in package.json. Don't forget to run `npm i` to update the package version number in the lockfile too.