test(e2e): axe sweep over every Ladle story (CL-9156)

test:e2e builds and serves the stories and fails on any serious or
critical axe violation. CI runs it with the rest of the e2e suite.

Author: TheGreatAxios

CONTRIBUTING.md

@@ -27,6 +27,8 @@ bun run test:e2e       # pack, install into tests/e2e/host, run Playwright
 
 `test:e2e` needs Chromium once: `bunx playwright install chromium`. Each scenario is a
 route in `tests/e2e/host/src/scenarios.tsx`, rendered against the packed tarball.
+The same run builds the Ladle stories and fails on any serious or critical axe
+violation in any story.
 
 All five must be clean before a change lands; CI runs them on every pull request.
 `typecheck` is not negotiable and `any` is not a way past it: the escapes that exist each

bun.lock

@@ -60,6 +60,7 @@
     "sonner": "^2.0.7"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.13.0",
     "@eslint/js": "^9.39.1",
     "@happy-dom/global-registrator": "^20.11.2",
     "@ladle/react": "^5.1.1",

package.json

@@ -1,6 +1,7 @@
 import { defineConfig, devices } from "@playwright/test";
 
-// Serves `host/`, which installs the packed tarball `bun run test:e2e` writes.
+// Serves `host/`, which installs the packed tarball `bun run test:e2e` writes,
+// and the Ladle stories build for the accessibility sweep.
 export default defineConfig({
   testDir: ".",
   testMatch: "*.spec.ts",
@@ -9,12 +10,22 @@ export default defineConfig({
   snapshotPathTemplate: "{testDir}/__screenshots__/{arg}{ext}",
   use: { baseURL: "http://localhost:4173" },
   projects: [{ name: "chromium", use: devices["Desktop Chrome"] }],
-  webServer: {
-    // bun keeps a stale copy of a rewritten local tarball unless both go, so
-    // the host pins exact versions instead of committing a lockfile.
-    command: "rm -rf bun.lock node_modules/@corbits && bun install && bun run typecheck && bun run dev",
-    cwd: "host",
-    url: "http://localhost:4173/smoke",
-    reuseExistingServer: false,
-  },
+  webServer: [
+    {
+      // bun keeps a stale copy of a rewritten local tarball unless both go, so
+      // the host pins exact versions instead of committing a lockfile.
+      command: "rm -rf bun.lock node_modules/@corbits && bun install && bun run typecheck && bun run dev",
+      cwd: "host",
+      url: "http://localhost:4173/smoke",
+      reuseExistingServer: false,
+      timeout: 180_000,
+    },
+    {
+      command: "bun run stories:build && bunx ladle preview --port 61000",
+      cwd: "../..",
+      url: "http://localhost:61000/meta.json",
+      reuseExistingServer: false,
+      timeout: 180_000,
+    },
+  ],
 });

tests/e2e/playwright.config.ts

@@ -0,0 +1,25 @@
+import AxeBuilder from "@axe-core/playwright";
+import { expect, test } from "@playwright/test";
+
+const STORIES = "http://localhost:61000";
+
+test("every Ladle story is free of serious and critical axe violations", async ({ page, request }) => {
+  test.setTimeout(600_000);
+  const meta = (await (await request.get(`${STORIES}/meta.json`)).json()) as { stories: Record<string, unknown> };
+  const failures: string[] = [];
+
+  for (const theme of ["light", "dark"]) {
+    for (const story of Object.keys(meta.stories)) {
+      await page.goto(`${STORIES}/?story=${story}&mode=preview&theme=${theme}`);
+      await page.locator("[data-storyloaded]").waitFor();
+      const { violations } = await new AxeBuilder({ page }).analyze();
+      for (const violation of violations) {
+        if (violation.impact === "serious" || violation.impact === "critical") {
+          failures.push(`${story} (${theme}): ${violation.id} (${violation.nodes.length})`);
+        }
+      }
+    }
+  }
+
+  expect(failures).toEqual([]);
+});