Merge pull request #2 from jhancock532/automated-accessibility-tests

Add automated Storybook accessibility tests

.github/workflows/storybook-tests.yaml

@@ -0,0 +1,22 @@
+name: 'Storybook Tests'
+on: push
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.node-version'
+      - name: Install dependencies
+        run: npm ci
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+      - name: Build Storybook
+        run: npm run build-storybook
+      - name: Serve Storybook and run tests
+        run: |
+          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+            "npx http-server storybook-static --port 6006 --silent" \
+            "npx wait-on tcp:6006 && npm run test-storybook"

.gitignore

@@ -14,6 +14,7 @@
 
 # production
 /build
+/storybook-static
 
 # misc
 .DS_Store
@@ -34,4 +35,4 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-*storybook.log
+*storybook.log

.storybook/main.ts

@@ -7,6 +7,7 @@ const config: StorybookConfig = {
         '@storybook/addon-links',
         '@storybook/addon-essentials',
         '@storybook/addon-interactions',
+        '@storybook/addon-a11y',
         {
             name: '@storybook/addon-styling-webpack',
             options: {

.storybook/test-runner.ts

@@ -0,0 +1,22 @@
+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', {
+            detailedReport: true,
+            detailedReportOptions: {
+                html: true,
+            },
+        });
+    },
+};
+
+export default config;