Add Storybook test runner with a11y (axe) and CI workflow

.github/workflows/test-ui.yml

@@ -0,0 +1,24 @@
+name: UI Tests
+
+on: [push]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    container:
+      # Using the Playwright image to ensure browsers are available for the test runner
+      image: mcr.microsoft.com/playwright:v1.52.0-noble
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22.12.0
+
+      - name: Install dependencies
+        run: npm install
+
+      # Using test-storybook:ci to build Storybook and run tests against it
+      - name: Run tests
+        run: npm run test-storybook:ci

.gitignore

@@ -1,4 +1,3 @@
-package-lock.json
 /node_modules
 /dist
 storybook-static

.storybook/test-runner.ts

@@ -0,0 +1,27 @@
+import { getStoryContext, TestRunnerConfig } from '@storybook/test-runner';
+import { injectAxe, checkA11y } from 'axe-playwright';
+
+const config: TestRunnerConfig = {
+  async preVisit(page) {
+    await injectAxe(page);
+  },
+  async postVisit(page, context) {
+    // Get the entire context of a story, including parameters, args, argTypes, etc.
+    const storyContext = await getStoryContext(page, context);
+
+    // Skip accessibility checks for specific stories if needed
+    if (storyContext.parameters?.a11y?.disable) {
+      return;
+    }
+
+    // Run accessibility checks
+    await checkA11y(page, '#storybook-root', {
+      detailedReport: true,
+      detailedReportOptions: {
+        html: true,
+      },
+    });
+  },
+};
+
+export default config;