// F2 — automated WCAG 2.2 AA scans with axe-core across every // top-level view. Runs only on chromium-desktop (axe's colour-contrast // and computed-role checks need one real engine; repeating across the // webkit/mobile projects adds cost without new signal). // // Auth is bootstrapped through `/__debug/store` exactly as the // game-shell specs do; the in-game shell tolerates a missing gateway // (ECONNREFUSED) and still renders the chrome + view shells, which is // what the structural a11y scan needs. Screens and in-game views are // reached through the dev-only `window.__galaxyNav` affordance — the // single-URL app-shell has no per-screen / per-view routes. import AxeBuilder from "@axe-core/playwright"; import { expect, test, type Page } from "@playwright/test"; import type { GameView, GameViewState } from "../../src/lib/app-nav.svelte"; const SESSION_ID = "f2-a11y-axe-session"; // A real UUID — the layout's auto-sync calls `uuidToHiLo` on it. const GAME_ID = "10101010-1010-1010-1010-101010101010"; const WCAG_TAGS = ["wcag2a", "wcag2aa", "wcag21a", "wcag21aa", "wcag22aa"]; async function authenticate(page: Page): Promise { await page.goto("/__debug/store"); await expect(page.getByTestId("debug-store-ready")).toBeVisible(); await page.waitForFunction(() => window.__galaxyDebug?.ready === true); await page.evaluate(() => window.__galaxyDebug!.clearSession()); await page.evaluate( (id) => window.__galaxyDebug!.setDeviceSessionId(id), SESSION_ID, ); } async function expectNoViolations(page: Page): Promise { const results = await new AxeBuilder({ page }).withTags(WCAG_TAGS).analyze(); // Surface the rule ids in the assertion message for a fast triage. expect( results.violations, results.violations.map((v) => `${v.id} (${v.nodes.length})`).join(", "), ).toEqual([]); } test.describe("axe WCAG 2.2 AA", () => { test.beforeEach(({}, testInfo) => { test.skip( testInfo.project.name !== "chromium-desktop", "axe scan runs once, on chromium-desktop", ); }); test("login", async ({ page }) => { // No seeded session → the dispatcher renders the login screen. await page.goto("/"); await expect(page.locator("#main-content")).toBeVisible(); await expectNoViolations(page); }); test("lobby", async ({ page }) => { await authenticate(page); await page.goto("/"); await expect(page.locator("#main-content")).toBeVisible(); await expectNoViolations(page); }); test("lobby create", async ({ page }) => { await authenticate(page); await page.goto("/"); await page.waitForFunction(() => window.__galaxyNav !== undefined); await page.evaluate(() => window.__galaxyNav!.go("lobby-create")); await expect(page.locator("#main-content")).toBeVisible(); await expectNoViolations(page); }); type ViewParams = Omit; const inGameViews: Array<{ label: string; view: GameView; params: ViewParams; testId: string; }> = [ { label: "map", view: "map", params: {}, testId: "active-view-map" }, { label: "report", view: "report", params: {}, testId: "active-view-report", }, { label: "mail", view: "mail", params: {}, testId: "active-view-mail" }, { label: "battle", view: "battle", params: {}, testId: "active-view-battle", }, { label: "designer/science", view: "designer-science", params: {}, testId: "active-view-designer-science", }, { label: "table/planets", view: "table", params: { tableEntity: "planets" }, testId: "active-view-table", }, ]; for (const { label, view, params, testId } of inGameViews) { test(`in-game: ${label}`, async ({ page }) => { await authenticate(page); await page.goto("/"); await page.waitForFunction(() => window.__galaxyNav !== undefined); await page.evaluate( ([id, v, p]) => window.__galaxyNav!.enterGame( id as string, v as GameView, p as ViewParams, ), [GAME_ID, view, params] as const, ); await expect(page.getByTestId("game-shell")).toBeVisible(); await expect(page.getByTestId(testId)).toBeVisible(); await expectNoViolations(page); }); } });