test(e2e): axe-core's WCAG A + AA rules over every page and the player (chromium only); contrast stays with the visual check

2026-10-17 17:48:53 +02:00
parent 460bdec406
commit a8dddc8c24
5 changed files with 99 additions and 0 deletions
@@ -0,0 +1,64 @@
+import AxeBuilder from "@axe-core/playwright";
+import { test, expect, type Page } from "@playwright/test";
+import { gotoPage, openApp, openFirstVideo } from "./helpers";
+
+// Accessibility, the machine-checkable half: axe-core's WCAG 2.x A + AA rules over every page the
+// owner reaches and the player. A hit fails with the rule, its impact and the elements.
+//
+// What it does NOT cover — colour contrast, mostly: axe cannot compute a contrast over a gradient,
+// and the glass surfaces are gradients, so it files most text as "incomplete" instead of judging it
+// (measured 2026-10-17: 110 nodes on the feed, 9-32 on the other pages). A green here says nothing
+// about contrast; that stays with the visual check.
+//
+// Chromium only (playwright.config.ts leaves it out of the other projects).
+const TAGS = ["wcag2a", "wcag2aa", "wcag21a", "wcag21aa", "wcag22aa"];
+
+/** Wait until nothing is loading: no QueryState spinner and no skeleton bone left. */
+async function settled(page: Page): Promise<void> {
+  await expect(
+    page.locator('[role="status"] .animate-spin, [aria-hidden="true"].animate-pulse'),
+  ).toHaveCount(0);
+}
+
+async function violations(page: Page): Promise<string[]> {
+  const result = await new AxeBuilder({ page }).withTags(TAGS).analyze();
+  return result.violations.map((v) => {
+    const shown = v.nodes.slice(0, 5).map((n) => n.target.join(" "));
+    const more = v.nodes.length > 5 ? ` (+${v.nodes.length - 5})` : "";
+    return `${v.id} (${v.impact ?? "?"}): ${v.help} — ${shown.join(" | ")}${more}`;
+  });
+}
+
+test.describe("accessibility (axe)", () => {
+  const RAIL = ["feed", "channels", "playlists", "files", "stats", "settings"];
+  const ADMIN = ["scheduler", "config", "users", "audit"];
+
+  for (const id of RAIL) {
+    test(`page: ${id}`, async ({ page }) => {
+      await openApp(page);
+      await gotoPage(page, id);
+      await settled(page);
+      expect(await violations(page)).toEqual([]);
+    });
+  }
+
+  for (const id of ADMIN) {
+    test(`admin page: ${id}`, async ({ page }) => {
+      await openApp(page);
+      await page.getByTestId("nav-admin").click();
+      await page.getByTestId(`nav-admin-${id}`).click();
+      await expect(page.getByTestId("nav-admin")).toHaveAttribute("aria-current", "page");
+      await settled(page);
+      expect(await violations(page)).toEqual([]);
+    });
+  }
+
+  test("player", async ({ page }) => {
+    // hermetic: the YouTube iframe is not loaded
+    await page.route(/youtube\.com/, (route) => route.abort());
+    await openApp(page);
+    await openFirstVideo(page);
+    await settled(page);
+    expect(await violations(page)).toEqual([]);
+  });
+});