Merge pull request #1565 from coseeian/a11y-playwright-home

feat: setup local a11y playwright test for homepage

Author: ksen0

.gitignore

@@ -31,3 +31,7 @@ public/p5.min.js
 # optional local preferences for vscode
 local.code-workspace
 .zed
+
+# Playwright accessibility test output
+test-results/
+playwright-report/

astro.config.mjs

@@ -16,10 +16,15 @@ if (shouldSkipCompress) {
   console.log("WILL SKIP COMPRESS BUILD STEP");
 }
 
+const isA11yTest = Boolean(process.env.A11Y_TEST);
+
 // https://astro.build/config
 export default defineConfig({
   site: 'https://p5js.org',
   compressHTML: false,
+  devToolbar: {
+    enabled: !isA11yTest,
+  },
   integrations: [
     mermaid({autoTheme: true}),
     preact({

package-lock.json

@@ -13,6 +13,7 @@
     "deploy": "wrangler deploy --env beta",
     "astro": "astro",
     "test": "vitest",
+    "test:a11y": "playwright test",
     "build:contributor-docs": "tsx ./src/scripts/builders/contribute.ts",
     "build:contributors": "tsx ./src/scripts/builders/people.ts",
     "build:reference": "tsx ./src/scripts/builders/reference.ts",
@@ -59,6 +60,7 @@
     "vite": "^7"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.12.1",
     "@codemirror/lang-javascript": "^6.2.2",
     "@playwright/test": "^1.54.1",
     "@preact/preset-vite": "^2.10.5",

package.json

@@ -0,0 +1,45 @@
+import { defineConfig, devices } from "@playwright/test";
+
+const PORT = 4321;
+const BASE_URL = `http://localhost:${PORT}`;
+
+export default defineConfig({
+  testDir: "./test/a11y",
+  testMatch: "**/*.spec.ts",
+  outputDir: "./test-results",
+  fullyParallel: true,
+  reporter: [
+    ["list"],
+    ['html', { outputFolder: 'playwright-report', open: 'never' }]
+  ],
+
+  use: {
+    baseURL: BASE_URL,
+    trace: "on-first-retry",
+  },
+
+  // One engine, two viewports. axe-core inspects the DOM and computed styles,
+  // which agree across engines, so a browser matrix mostly re-runs the same
+  // assertions; a responsive layout can ship genuinely different markup per
+  // breakpoint, so that is the axis worth covering.
+  projects: [
+    {
+      name: "desktop",
+      use: { ...devices["Desktop Chrome"] },
+    },
+    {
+      name: "mobile",
+      use: { ...devices["Pixel 5"] },
+    },
+  ],
+
+  webServer: {
+    command: "npm run dev",
+    url: BASE_URL,
+    reuseExistingServer: true,
+    timeout: 180_000,
+    env: {
+      A11Y_TEST: "1",
+    },
+  },
+});

playwright.config.ts

@@ -0,0 +1,12 @@
+import AxeBuilder from "@axe-core/playwright";
+import { expect, test } from "@playwright/test";
+
+test.describe("a11y-home-page", () => {
+  test("should not have any automatically detectable accessibility issues", async ({
+    page,
+  }) => {
+    await page.goto("/");
+    const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+});

test/a11y/homepage.spec.ts

@@ -21,7 +21,8 @@ export default getViteConfig({
           exclude: [
             "test/api/OpenProcessing.test.ts",
             "test/pages/*",
-            "test/mocks/*"
+            "test/mocks/*",
+            "test/a11y/**"
           ]
         }
       },