test: run axe-playwright a11y tests using test-storybook

.github/workflows/checks.yml

@@ -8,7 +8,7 @@ on:
       - 'biome.jsonc'
 jobs:
   checks:
-    name: Lint
+    name: Lint and test
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -17,4 +17,14 @@ jobs:
         run: yarn biome ci .
       - name: Lint CSS
         run: yarn lint-style
-
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+      - name: Build libraries
+        run: yarn build
+      - name: Build storybook
+        run: yarn build:storybook
+      - name: Serve Storybook and run tests
+        run: |
+          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+            "npx http-server apps/storybook/dist --port 6006" \
+            "npx wait-on tcp:6006 && yarn workspace @designsystemet/storybook test-storybook"

apps/storybook/.storybook/test-runner.ts

@@ -0,0 +1,38 @@
+import type { TestRunnerConfig } from '@storybook/test-runner';
+import { checkA11y, injectAxe } 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 = {
+  // Tags to include, exclude, or skip. These tags are defined as annotations in your story or meta.
+  tags: {
+    exclude: [],
+  },
+  async preVisit(page) {
+    await injectAxe(page);
+  },
+  async postVisit(page, context) {
+    /*
+     * Accessibility testing
+     */
+    await checkA11y(
+      page,
+      '#storybook-root',
+      {
+        detailedReport: false,
+        detailedReportOptions: {
+          html: true,
+        },
+        verbose: false,
+        axeOptions: {},
+      },
+      false,
+      'v2',
+    );
+  },
+};
+
+export default config;

apps/storybook/package.json

@@ -4,7 +4,8 @@
   "private": true,
   "scripts": {
     "dev": "storybook dev -p 6006",
-    "build": "storybook build -o ./dist"
+    "build": "storybook build -o ./dist",
+    "test-storybook": "test-storybook"
   },
   "author": "",
   "license": "ISC",
@@ -29,10 +30,12 @@
     "@storybook/manager-api": "^8.2.9",
     "@storybook/react": "^8.2.9",
     "@storybook/react-vite": "^8.2.9",
+    "@storybook/test-runner": "^0.19.1",
     "@storybook/theming": "^8.2.9",
     "@storybook/types": "^8.2.9",
     "@types/react": "18.3.3",
     "@types/react-dom": "^18.3.0",
+    "axe-playwright": "^2.0.2",
     "remark-gfm": "^4.0.0",
     "storybook": "^8.2.9"
   }