chore: add test-runner and Playwright to generate HTML a11y reports

packages/orbit-components/.storybook/test-runner.ts

@@ -0,0 +1,32 @@
+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, story) {
+    const fileName = story.name.replace(/\s+/g, "");
+    await checkA11y(
+      page,
+      ".story-content",
+      {
+        detailedReport: true,
+        detailedReportOptions: {
+          html: true,
+        },
+      },
+      undefined,
+      "html",
+      {
+        reportFileName: `${fileName}-result.html`,
+      },
+    );
+  },
+};
+
+export default config;

packages/orbit-components/package.json

@@ -11,6 +11,7 @@
   },
   "scripts": {
     "storybook": "storybook dev -p 6007 -c .storybook --ci",
+    "test-storybook": "test-storybook --url http://127.0.0.1:6007",
     "cy:dev": "vite cypress/integration --logLevel silent",
     "cy:run": "start-server-and-test cy:dev http-get://localhost:3000 'cypress run'",
     "cy:open": "start-server-and-test cy:dev http-get://localhost:3000 'cypress open'",
@@ -102,6 +103,7 @@
     "@storybook/react-webpack5": "^8.2.4",
     "@storybook/storybook-deployer": "^2.8.16",
     "@storybook/theming": "^8.2.1",
+    "@storybook/test-runner": "^0.19.1",
     "@svgr/core": "^6.3.1",
     "@svgr/plugin-jsx": "^6.3.1",
     "@svgr/plugin-prettier": "^6.3.1",
@@ -142,6 +144,9 @@
     "ttf2woff2": "^4.0.1",
     "vite": "^4.5.5",
     "webpack": "^5.94.0",
-    "webpack-cli": "^5.1.4"
+    "webpack-cli": "^5.1.4",
+    "playwright": "^1.44.1",
+    "axe-playwright": "^2.0.3",
+    "@playwright/test": "^1.44.1"
   }
 }

packages/orbit-components/playwright.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  projects: [
+    {
+      name: "Desktop Chrome",
+      use: devices["Desktop Chrome"],
+    },
+    {
+      name: "Desktop Firefox",
+      use: devices["Desktop Firefox"],
+    },
+    {
+      name: "Mobile Chrome",
+      use: devices["Pixel 5"],
+    },
+  ],
+});