test: add axe a11y pass and device visual regression (phase 4c)

Add scoped axe accessibility audit (a11y.spec.ts, device-a11y.spec.ts)
scanning home, one tool per modality, editor, and login across desktop
chromium and mobile-chromium in EN and AR locales. Uses a committed
baseline (a11y-baseline.json) to gate on NEW critical/serious violations
while documenting existing debt.

Add device-visual.spec.ts with curated screenshots (home, resize tool,
settings dialog) on mobile-chromium and tablet-chromium. Six darwin
baselines generated; linux baselines deferred to the existing
update-visual-baselines workflow.

Trivial a11y fixes applied:
- Login page: outer div -> main (fixes landmark-one-main, reduces region)
- Editor page: outer div -> main for both desktop and mobile gate
- AppLayout main: add tabIndex={-1} for skip-link focusability

Updated DEVICE_SPECS regex to route device-visual and device-a11y specs.
Added @axe-core/playwright as a devDependency.

apps/web/src/components/layout/app-layout.tsx

@@ -37,7 +37,11 @@ export function AppLayout({ children, breadcrumb, navVariant }: AppLayoutProps)
       />
 
       {/* Main content area */}
-      <main id="main-content" className={cn("flex-1 overflow-y-auto", isMobile && "pb-20")}>
+      <main
+        id="main-content"
+        tabIndex={-1}
+        className={cn("flex-1 overflow-y-auto", isMobile && "pb-20")}
+      >
         {children}
       </main>
 

apps/web/src/pages/editor-page.tsx

@@ -143,16 +143,16 @@ export function EditorPage() {
 
   if (isMobile) {
     return (
-      <div className="flex flex-col items-center justify-center h-full p-8 text-center">
+      <main className="flex flex-col items-center justify-center h-full p-8 text-center">
         <Monitor size={48} className="text-muted-foreground mb-4" />
         <h2 className="text-lg font-semibold text-foreground mb-2">{t.editor.mobile.heading}</h2>
         <p className="text-sm text-muted-foreground max-w-sm">{t.editor.mobile.description}</p>
-      </div>
+      </main>
     );
   }
 
   return (
-    <div className="flex flex-col h-screen overflow-hidden bg-background text-foreground">
+    <main className="flex flex-col h-screen overflow-hidden bg-background text-foreground">
       <h1 className="sr-only">{t.editor.welcome.heading}</h1>
       <EditorMenuBar
         onNewDocument={() => setShowNewDocument(true)}
@@ -195,6 +195,6 @@ export function EditorPage() {
       <ImageResizeDialog open={showImageResize} onClose={() => setShowImageResize(false)} />
       <FillDialog open={fillDialogOpen} onClose={() => setFillDialogOpen(false)} />
       <NewDocumentDialog open={showNewDocument} onClose={() => setShowNewDocument(false)} />
-    </div>
+    </main>
   );
 }

apps/web/src/pages/login-page.tsx

@@ -222,7 +222,7 @@ export function LoginPage() {
   };
 
   return (
-    <div className="flex h-screen bg-background">
+    <main className="flex h-screen bg-background">
       <div className="flex-1 flex items-center justify-center p-8">
         <div className="w-full max-w-md space-y-8">
           <div>
@@ -415,6 +415,6 @@ export function LoginPage() {
           </p>
         </div>
       </div>
-    </div>
+    </main>
   );
 }

package.json

@@ -59,6 +59,7 @@
     ]
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.11.3",
     "@biomejs/biome": "^2.5.0",
     "@fast-check/vitest": "^0.4.1",
     "@playwright/test": "^1.60.0",

playwright.config.ts

@@ -32,7 +32,7 @@ const VISUAL_SPECS = /visual-regression|gui-visual-/;
 
 // Device-emulated specs (real touch, UA, DPR). Tagged @mobile or @tablet
 // and routed to the dedicated device projects below.
-const DEVICE_SPECS = /device-mobile|device-tablet/;
+const DEVICE_SPECS = /device-mobile|device-tablet|device-visual|device-a11y/;
 
 export default defineConfig({
   testDir: "./tests/e2e",

pnpm-lock.yaml

@@ -43,6 +43,9 @@ importers:
         specifier: ^3.2.2
         version: 3.2.2(react@19.2.7)
     devDependencies:
+      '@axe-core/playwright':
+        specifier: ^4.11.3
+        version: 4.11.3(playwright-core@1.60.0)
       '@biomejs/biome':
         specifier: ^2.5.0
         version: 2.5.0
@@ -906,6 +909,11 @@ packages:
     resolution: {integrity: sha512-iY8yvjE0y651BixKNPgmv1WrQc+GZ142sb0z4gYnChDDY2YqI4P/jsSopBWrKfAt7LOJAkOXt7rC/hms+WclQQ==}
     engines: {node: '>=18.0.0'}
 
+  '@axe-core/playwright@4.11.3':
+    resolution: {integrity: sha512-h/kfksv4F0cVIDlKpT4700OehdRgpvuVskuQ2nb7/JmtWUXpe9ftHAPtwyXGvVSsa6SJ64A9ER7Zrzc/sIvC4w==}
+    peerDependencies:
+      playwright-core: '>= 1.0.0'
+
   '@babel/code-frame@7.29.0':
     resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
     engines: {node: '>=6.9.0'}
@@ -4036,6 +4044,10 @@ packages:
   avvio@9.2.0:
     resolution: {integrity: sha512-2t/sy01ArdHHE0vRH5Hsay+RtCZt3dLPji7W7/MMOCEgze5b7SNDC4j5H6FnVgPkI1MTNFGzHdHrVXDDl7QSSQ==}
 
+  axe-core@4.11.4:
+    resolution: {integrity: sha512-KunSNx+TVpkAw/6ULfhnx+HWRecjqZGTOyquAoWHYLRSdK1tB5Ihce1ZW+UY3fj33bYAFWPu7W/GRSmmrCGuxA==}
+    engines: {node: '>=4'}
+
   axobject-query@4.1.0:
     resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
     engines: {node: '>= 0.4'}
@@ -8919,6 +8931,11 @@ snapshots:
 
   '@aws/lambda-invoke-store@0.2.4': {}
 
+  '@axe-core/playwright@4.11.3(playwright-core@1.60.0)':
+    dependencies:
+      axe-core: 4.11.4
+      playwright-core: 1.60.0
+
   '@babel/code-frame@7.29.0':
     dependencies:
       '@babel/helper-validator-identifier': 7.28.5
@@ -12505,6 +12522,8 @@ snapshots:
       '@fastify/error': 4.2.0
       fastq: 1.20.1
 
+  axe-core@4.11.4: {}
+
   axobject-query@4.1.0: {}
 
   b4a@1.8.0: {}

tests/e2e/a11y-baseline.json

@@ -0,0 +1,145 @@
+{
+  "_comment": "Known axe a11y violations. Keyed by pageKey:ruleId. This baseline lets CI catch NEW regressions without failing on documented existing debt. Regenerate by running the a11y spec with A11Y_UPDATE_BASELINE=1.",
+  "violations": {
+    "home-en:color-contrast": {
+      "impact": "serious",
+      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+      "count": 11
+    },
+    "home-en:heading-order": {
+      "impact": "moderate",
+      "description": "Ensure the order of headings is semantically correct",
+      "count": 1
+    },
+    "image-resize-en:color-contrast": {
+      "impact": "serious",
+      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+      "count": 2
+    },
+    "video-convert-en:color-contrast": {
+      "impact": "serious",
+      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+      "count": 2
+    },
+    "audio-convert-en:color-contrast": {
+      "impact": "serious",
+      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+      "count": 2
+    },
+    "document-pdf-to-image-en:color-contrast": {
+      "impact": "serious",
+      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+      "count": 2
+    },
+    "data-csv-excel-en:color-contrast": {
+      "impact": "serious",
+      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+      "count": 2
+    },
+    "editor-en:aria-required-children": {
+      "impact": "critical",
+      "description": "Ensure elements with an ARIA role that require child roles contain them",
+      "count": 1
+    },
+    "editor-en:color-contrast": {
+      "impact": "serious",
+      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+      "count": 2
+    },
+    "editor-en:label": {
+      "impact": "critical",
+      "description": "Ensure every form element has a label",
+      "count": 1
+    },
+    "editor-en:nested-interactive": {
+      "impact": "serious",
+      "description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
+      "count": 1
+    },
+    "editor-en:region": {
+      "impact": "moderate",
+      "description": "Ensure all page content is contained by landmarks",
+      "count": 1
+    },
+    "editor-en:skip-link": {
+      "impact": "moderate",
+      "description": "Ensure all skip links have a focusable target",
+      "count": 1
+    },
+    "login-en:color-contrast": {
+      "impact": "serious",
+      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+      "count": 4
+    },
+    "login-en:region": {
+      "impact": "moderate",
+      "description": "Ensure all page content is contained by landmarks",
+      "count": 1
+    },
+    "login-en:skip-link": {
+      "impact": "moderate",
+      "description": "Ensure all skip links have a focusable target",
+      "count": 1
+    },
+    "home-ar:color-contrast": {
+      "impact": "serious",
+      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+      "count": 9
+    },
+    "home-ar:heading-order": {
+      "impact": "moderate",
+      "description": "Ensure the order of headings is semantically correct",
+      "count": 1
+    },
+    "image-resize-ar:color-contrast": {
+      "impact": "serious",
+      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+      "count": 1
+    },
+    "editor-ar:aria-required-children": {
+      "impact": "critical",
+      "description": "Ensure elements with an ARIA role that require child roles contain them",
+      "count": 1
+    },
+    "editor-ar:color-contrast": {
+      "impact": "serious",
+      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+      "count": 2
+    },
+    "editor-ar:label": {
+      "impact": "critical",
+      "description": "Ensure every form element has a label",
+      "count": 1
+    },
+    "editor-ar:nested-interactive": {
+      "impact": "serious",
+      "description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
+      "count": 1
+    },
+    "editor-ar:region": {
+      "impact": "moderate",
+      "description": "Ensure all page content is contained by landmarks",
+      "count": 1
+    },
+    "editor-ar:skip-link": {
+      "impact": "moderate",
+      "description": "Ensure all skip links have a focusable target",
+      "count": 1
+    },
+    "login-ar:color-contrast": {
+      "impact": "serious",
+      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+      "count": 2
+    },
+    "login-ar:region": {
+      "impact": "moderate",
+      "description": "Ensure all page content is contained by landmarks",
+      "count": 1
+    },
+    "login-ar:skip-link": {
+      "impact": "moderate",
+      "description": "Ensure all skip links have a focusable target",
+      "count": 1
+    }
+  }
+}

tests/e2e/a11y.spec.ts

@@ -0,0 +1,254 @@
+/**
+ * Axe accessibility pass -- desktop (chromium project).
+ *
+ * Scoped set: home, one tool per modality, editor, settings, login.
+ * Runs in the default locale (en) and one RTL locale (ar).
+ *
+ * Uses a baseline file (a11y-baseline.json) to avoid failing on known
+ * violations while catching any NEW regressions. To update the baseline
+ * after fixing violations, run with A11Y_UPDATE_BASELINE=1.
+ */
+import fs from "node:fs";
+import path from "node:path";
+import AxeBuilder from "@axe-core/playwright";
+import { expect, test } from "./helpers";
+
+// ---- Baseline machinery ----
+
+interface BaselineFile {
+  _comment: string;
+  violations: Record<string, { impact: string; description: string; count: number }>;
+}
+
+const BASELINE_PATH = path.join(__dirname, "a11y-baseline.json");
+
+function loadBaseline(): BaselineFile {
+  try {
+    return JSON.parse(fs.readFileSync(BASELINE_PATH, "utf-8"));
+  } catch {
+    return { _comment: "", violations: {} };
+  }
+}
+
+function saveBaseline(baseline: BaselineFile): void {
+  fs.writeFileSync(BASELINE_PATH, `${JSON.stringify(baseline, null, 2)}\n`);
+}
+
+interface ViolationEntry {
+  id: string;
+  impact: string | undefined;
+  description: string;
+  nodes: { length: number }[];
+}
+
+function buildKey(pageKey: string, ruleId: string): string {
+  return `${pageKey}:${ruleId}`;
+}
+
+/**
+ * Run axe on the current page and assert no NEW critical/serious violations
+ * beyond the committed baseline.
+ */
+async function auditPage(
+  page: import("@playwright/test").Page,
+  pageKey: string,
+  baseline: BaselineFile,
+  newViolations: { key: string; impact: string; description: string; count: number }[],
+  allViolations: { key: string; impact: string; description: string; count: number }[],
+) {
+  const results = await new AxeBuilder({ page })
+    .withTags(["wcag2a", "wcag2aa", "best-practice"])
+    .analyze();
+
+  for (const v of results.violations as ViolationEntry[]) {
+    const key = buildKey(pageKey, v.id);
+    const entry = {
+      key,
+      impact: v.impact ?? "unknown",
+      description: v.description,
+      count: v.nodes.length,
+    };
+    allViolations.push(entry);
+
+    // If this violation is NOT in the baseline, it is new
+    if (!baseline.violations[key]) {
+      newViolations.push(entry);
+    }
+  }
+}
+
+// ---- Scoped page set ----
+
+const PAGES_EN = [
+  { key: "home-en", path: "/", needsAuth: true },
+  { key: "image-resize-en", path: "/image/resize", needsAuth: true },
+  { key: "video-convert-en", path: "/video/convert-video", needsAuth: true },
+  { key: "audio-convert-en", path: "/audio/convert-audio", needsAuth: true },
+  { key: "document-pdf-to-image-en", path: "/document/pdf-to-image", needsAuth: true },
+  { key: "data-csv-excel-en", path: "/data/csv-excel", needsAuth: true },
+  { key: "editor-en", path: "/editor", needsAuth: true },
+  { key: "login-en", path: "/login", needsAuth: false },
+];
+
+const PAGES_AR = [
+  { key: "home-ar", path: "/", needsAuth: true, locale: "ar" },
+  { key: "image-resize-ar", path: "/image/resize", needsAuth: true, locale: "ar" },
+  { key: "editor-ar", path: "/editor", needsAuth: true, locale: "ar" },
+  { key: "login-ar", path: "/login", needsAuth: false, locale: "ar" },
+];
+
+// ---- Tests ----
+
+// Each test scans 9+ pages with axe; the default 30s timeout is tight.
+test.describe("Axe a11y audit -- desktop EN", () => {
+  test.setTimeout(90_000);
+  test("no new critical/serious violations on scoped pages", async ({
+    loggedInPage: page,
+    browser,
+  }) => {
+    const baseline = loadBaseline();
+    const newViolations: { key: string; impact: string; description: string; count: number }[] = [];
+    const allViolations: { key: string; impact: string; description: string; count: number }[] = [];
+
+    for (const p of PAGES_EN) {
+      if (p.needsAuth) {
+        await page.goto(p.path);
+        await page.waitForLoadState("networkidle");
+        await page.waitForTimeout(500);
+        await auditPage(page, p.key, baseline, newViolations, allViolations);
+      } else {
+        // Login page: use a fresh context without auth
+        const ctx = await browser.newContext({ storageState: { cookies: [], origins: [] } });
+        const anonPage = await ctx.newPage();
+        await anonPage.goto(p.path);
+        await anonPage.waitForLoadState("networkidle");
+        await anonPage.waitForTimeout(500);
+        await auditPage(anonPage, p.key, baseline, newViolations, allViolations);
+        await ctx.close();
+      }
+    }
+
+    // Report all violations by severity
+    const bySeverity: Record<string, number> = {};
+    for (const v of allViolations) {
+      bySeverity[v.impact] = (bySeverity[v.impact] || 0) + v.count;
+    }
+    console.log("a11y violation counts by severity (desktop EN):", JSON.stringify(bySeverity));
+    console.log(`total unique rules violated: ${allViolations.length}`);
+    console.log(`baselined: ${allViolations.length - newViolations.length}`);
+    console.log(`NEW (not in baseline): ${newViolations.length}`);
+
+    if (newViolations.length > 0) {
+      console.log("NEW violations:");
+      for (const v of newViolations) {
+        console.log(`  ${v.key} [${v.impact}] (${v.count} nodes): ${v.description}`);
+      }
+    }
+
+    // Update baseline if requested (skip assertion when generating baseline)
+    if (process.env.A11Y_UPDATE_BASELINE === "1") {
+      for (const v of allViolations) {
+        baseline.violations[v.key] = {
+          impact: v.impact,
+          description: v.description,
+          count: v.count,
+        };
+      }
+      saveBaseline(baseline);
+      console.log("Baseline updated -- skipping assertion.");
+      return;
+    }
+
+    // Gate: fail only on NEW critical or serious violations
+    const newCriticalSerious = newViolations.filter(
+      (v) => v.impact === "critical" || v.impact === "serious",
+    );
+    expect(
+      newCriticalSerious,
+      `${newCriticalSerious.length} NEW critical/serious a11y violation(s) found. ` +
+        `Run with A11Y_UPDATE_BASELINE=1 to baseline after review.\n` +
+        newCriticalSerious.map((v) => `  ${v.key} [${v.impact}]: ${v.description}`).join("\n"),
+    ).toHaveLength(0);
+  });
+});
+
+test.describe("Axe a11y audit -- desktop AR (RTL)", () => {
+  test.setTimeout(60_000);
+  test("no new critical/serious violations on RTL pages", async ({
+    loggedInPage: page,
+    browser,
+  }) => {
+    const baseline = loadBaseline();
+    const newViolations: { key: string; impact: string; description: string; count: number }[] = [];
+    const allViolations: { key: string; impact: string; description: string; count: number }[] = [];
+
+    for (const p of PAGES_AR) {
+      if (p.needsAuth) {
+        // Switch to Arabic locale
+        await page.evaluate(() => {
+          localStorage.setItem("snapotter-locale", "ar");
+        });
+        await page.goto(p.path);
+        await page.waitForLoadState("networkidle");
+        await page.waitForTimeout(500);
+        await auditPage(page, p.key, baseline, newViolations, allViolations);
+      } else {
+        const ctx = await browser.newContext({ storageState: { cookies: [], origins: [] } });
+        const anonPage = await ctx.newPage();
+        // Set Arabic locale before navigating
+        await anonPage.goto("/");
+        await anonPage.evaluate(() => {
+          localStorage.setItem("snapotter-locale", "ar");
+        });
+        await anonPage.goto(p.path);
+        await anonPage.waitForLoadState("networkidle");
+        await anonPage.waitForTimeout(500);
+        await auditPage(anonPage, p.key, baseline, newViolations, allViolations);
+        await ctx.close();
+      }
+    }
+
+    // Reset locale
+    await page.evaluate(() => {
+      localStorage.setItem("snapotter-locale", "en");
+    });
+
+    // Report
+    const bySeverity: Record<string, number> = {};
+    for (const v of allViolations) {
+      bySeverity[v.impact] = (bySeverity[v.impact] || 0) + v.count;
+    }
+    console.log("a11y violation counts by severity (desktop AR):", JSON.stringify(bySeverity));
+    console.log(`total unique rules violated: ${allViolations.length}`);
+    console.log(`NEW (not in baseline): ${newViolations.length}`);
+
+    if (newViolations.length > 0) {
+      console.log("NEW violations:");
+      for (const v of newViolations) {
+        console.log(`  ${v.key} [${v.impact}] (${v.count} nodes): ${v.description}`);
+      }
+    }
+
+    if (process.env.A11Y_UPDATE_BASELINE === "1") {
+      for (const v of allViolations) {
+        baseline.violations[v.key] = {
+          impact: v.impact,
+          description: v.description,
+          count: v.count,
+        };
+      }
+      saveBaseline(baseline);
+      console.log("Baseline updated -- skipping assertion.");
+      return;
+    }
+
+    const newCriticalSerious = newViolations.filter(
+      (v) => v.impact === "critical" || v.impact === "serious",
+    );
+    expect(
+      newCriticalSerious,
+      `${newCriticalSerious.length} NEW critical/serious a11y violation(s) in AR locale.\n` +
+        newCriticalSerious.map((v) => `  ${v.key} [${v.impact}]: ${v.description}`).join("\n"),
+    ).toHaveLength(0);
+  });
+});

tests/e2e/device-a11y.spec.ts

@@ -0,0 +1,229 @@
+/**
+ * Axe accessibility pass -- mobile device (mobile-chromium project).
+ *
+ * Mirrors the desktop a11y spec's scoped set on a real device emulation
+ * (Pixel 7 via mobile-chromium). All tests tagged @mobile for project routing.
+ *
+ * Shares the same a11y-baseline.json as the desktop spec, with mobile-prefixed
+ * page keys so desktop and mobile violations are tracked independently.
+ */
+import fs from "node:fs";
+import path from "node:path";
+import AxeBuilder from "@axe-core/playwright";
+import { expect, test } from "./helpers";
+
+// ---- Baseline machinery (shared with a11y.spec.ts) ----
+
+interface BaselineFile {
+  _comment: string;
+  violations: Record<string, { impact: string; description: string; count: number }>;
+}
+
+const BASELINE_PATH = path.join(__dirname, "a11y-baseline.json");
+
+function loadBaseline(): BaselineFile {
+  try {
+    return JSON.parse(fs.readFileSync(BASELINE_PATH, "utf-8"));
+  } catch {
+    return { _comment: "", violations: {} };
+  }
+}
+
+function saveBaseline(baseline: BaselineFile): void {
+  fs.writeFileSync(BASELINE_PATH, `${JSON.stringify(baseline, null, 2)}\n`);
+}
+
+interface ViolationEntry {
+  id: string;
+  impact: string | undefined;
+  description: string;
+  nodes: { length: number }[];
+}
+
+function buildKey(pageKey: string, ruleId: string): string {
+  return `${pageKey}:${ruleId}`;
+}
+
+async function auditPage(
+  page: import("@playwright/test").Page,
+  pageKey: string,
+  baseline: BaselineFile,
+  newViolations: { key: string; impact: string; description: string; count: number }[],
+  allViolations: { key: string; impact: string; description: string; count: number }[],
+) {
+  const results = await new AxeBuilder({ page })
+    .withTags(["wcag2a", "wcag2aa", "best-practice"])
+    .analyze();
+
+  for (const v of results.violations as ViolationEntry[]) {
+    const key = buildKey(pageKey, v.id);
+    const entry = {
+      key,
+      impact: v.impact ?? "unknown",
+      description: v.description,
+      count: v.nodes.length,
+    };
+    allViolations.push(entry);
+
+    if (!baseline.violations[key]) {
+      newViolations.push(entry);
+    }
+  }
+}
+
+// ---- Scoped page set (mobile, EN + AR) ----
+
+const PAGES_MOBILE_EN = [
+  { key: "mobile-home-en", path: "/", needsAuth: true },
+  { key: "mobile-image-resize-en", path: "/image/resize", needsAuth: true },
+  { key: "mobile-video-convert-en", path: "/video/convert-video", needsAuth: true },
+  { key: "mobile-audio-convert-en", path: "/audio/convert-audio", needsAuth: true },
+  { key: "mobile-document-pdf-to-image-en", path: "/document/pdf-to-image", needsAuth: true },
+  { key: "mobile-data-csv-excel-en", path: "/data/csv-excel", needsAuth: true },
+  { key: "mobile-editor-en", path: "/editor", needsAuth: true },
+  { key: "mobile-login-en", path: "/login", needsAuth: false },
+];
+
+const PAGES_MOBILE_AR = [
+  { key: "mobile-home-ar", path: "/", needsAuth: true, locale: "ar" },
+  { key: "mobile-image-resize-ar", path: "/image/resize", needsAuth: true, locale: "ar" },
+  { key: "mobile-login-ar", path: "/login", needsAuth: false, locale: "ar" },
+];
+
+// ---- Tests ----
+
+test.describe("@mobile Axe a11y audit -- mobile EN", () => {
+  test.setTimeout(90_000);
+  test("no new critical/serious violations on scoped pages", async ({
+    loggedInPage: page,
+    browser,
+  }) => {
+    const baseline = loadBaseline();
+    const newViolations: { key: string; impact: string; description: string; count: number }[] = [];
+    const allViolations: { key: string; impact: string; description: string; count: number }[] = [];
+
+    for (const p of PAGES_MOBILE_EN) {
+      if (p.needsAuth) {
+        await page.goto(p.path);
+        await page.waitForLoadState("networkidle");
+        await page.waitForTimeout(500);
+        await auditPage(page, p.key, baseline, newViolations, allViolations);
+      } else {
+        const ctx = await browser.newContext({ storageState: { cookies: [], origins: [] } });
+        const anonPage = await ctx.newPage();
+        await anonPage.goto(p.path);
+        await anonPage.waitForLoadState("networkidle");
+        await anonPage.waitForTimeout(500);
+        await auditPage(anonPage, p.key, baseline, newViolations, allViolations);
+        await ctx.close();
+      }
+    }
+
+    const bySeverity: Record<string, number> = {};
+    for (const v of allViolations) {
+      bySeverity[v.impact] = (bySeverity[v.impact] || 0) + v.count;
+    }
+    console.log("a11y violation counts by severity (mobile EN):", JSON.stringify(bySeverity));
+    console.log(`total unique rules violated: ${allViolations.length}`);
+    console.log(`NEW (not in baseline): ${newViolations.length}`);
+
+    if (newViolations.length > 0) {
+      console.log("NEW violations:");
+      for (const v of newViolations) {
+        console.log(`  ${v.key} [${v.impact}] (${v.count} nodes): ${v.description}`);
+      }
+    }
+
+    if (process.env.A11Y_UPDATE_BASELINE === "1") {
+      for (const v of allViolations) {
+        baseline.violations[v.key] = {
+          impact: v.impact,
+          description: v.description,
+          count: v.count,
+        };
+      }
+      saveBaseline(baseline);
+      console.log("Baseline updated -- skipping assertion.");
+      return;
+    }
+
+    const newCriticalSerious = newViolations.filter(
+      (v) => v.impact === "critical" || v.impact === "serious",
+    );
+    expect(
+      newCriticalSerious,
+      `${newCriticalSerious.length} NEW critical/serious a11y violation(s) on mobile.\n` +
+        newCriticalSerious.map((v) => `  ${v.key} [${v.impact}]: ${v.description}`).join("\n"),
+    ).toHaveLength(0);
+  });
+});
+
+test.describe("@mobile Axe a11y audit -- mobile AR (RTL)", () => {
+  test.setTimeout(60_000);
+  test("no new critical/serious violations on RTL mobile pages", async ({
+    loggedInPage: page,
+    browser,
+  }) => {
+    const baseline = loadBaseline();
+    const newViolations: { key: string; impact: string; description: string; count: number }[] = [];
+    const allViolations: { key: string; impact: string; description: string; count: number }[] = [];
+
+    for (const p of PAGES_MOBILE_AR) {
+      if (p.needsAuth) {
+        await page.evaluate(() => {
+          localStorage.setItem("snapotter-locale", "ar");
+        });
+        await page.goto(p.path);
+        await page.waitForLoadState("networkidle");
+        await page.waitForTimeout(500);
+        await auditPage(page, p.key, baseline, newViolations, allViolations);
+      } else {
+        const ctx = await browser.newContext({ storageState: { cookies: [], origins: [] } });
+        const anonPage = await ctx.newPage();
+        await anonPage.goto("/");
+        await anonPage.evaluate(() => {
+          localStorage.setItem("snapotter-locale", "ar");
+        });
+        await anonPage.goto(p.path);
+        await anonPage.waitForLoadState("networkidle");
+        await anonPage.waitForTimeout(500);
+        await auditPage(anonPage, p.key, baseline, newViolations, allViolations);
+        await ctx.close();
+      }
+    }
+
+    // Reset locale
+    await page.evaluate(() => {
+      localStorage.setItem("snapotter-locale", "en");
+    });
+
+    const bySeverity: Record<string, number> = {};
+    for (const v of allViolations) {
+      bySeverity[v.impact] = (bySeverity[v.impact] || 0) + v.count;
+    }
+    console.log("a11y violation counts by severity (mobile AR):", JSON.stringify(bySeverity));
+    console.log(`NEW (not in baseline): ${newViolations.length}`);
+
+    if (process.env.A11Y_UPDATE_BASELINE === "1") {
+      for (const v of allViolations) {
+        baseline.violations[v.key] = {
+          impact: v.impact,
+          description: v.description,
+          count: v.count,
+        };
+      }
+      saveBaseline(baseline);
+      console.log("Baseline updated -- skipping assertion.");
+      return;
+    }
+
+    const newCriticalSerious = newViolations.filter(
+      (v) => v.impact === "critical" || v.impact === "serious",
+    );
+    expect(
+      newCriticalSerious,
+      `${newCriticalSerious.length} NEW critical/serious a11y violation(s) on mobile AR.\n` +
+        newCriticalSerious.map((v) => `  ${v.key} [${v.impact}]: ${v.description}`).join("\n"),
+    ).toHaveLength(0);
+  });
+});

tests/e2e/device-visual.spec.ts

@@ -0,0 +1,83 @@
+/**
+ * Device visual regression -- small, curated set.
+ *
+ * Screenshots a few key pages on mobile-chromium (Pixel 7) and
+ * tablet-chromium (Galaxy Tab S9). Uses toHaveScreenshot with
+ * platform-suffixed baselines (darwin locally, linux via CI workflow).
+ *
+ * Tagged @mobile / @tablet so device projects' grep filter picks them up.
+ * Matched by DEVICE_SPECS for project routing.
+ */
+import { expect, openSettings, test } from "./helpers";
+
+// ---------------------------------------------------------------------------
+// Mobile (Pixel 7 -- mobile-chromium)
+// ---------------------------------------------------------------------------
+test.describe("@mobile Device visual regression", () => {
+  test("home page", async ({ loggedInPage: page }) => {
+    await page.goto("/");
+    await page.waitForLoadState("networkidle");
+    await page.waitForTimeout(500);
+
+    await expect(page).toHaveScreenshot("device-home-mobile.png", {
+      fullPage: false,
+    });
+  });
+
+  test("tool page -- image resize (empty state)", async ({ loggedInPage: page }) => {
+    await page.goto("/image/resize");
+    await page.waitForLoadState("networkidle");
+    await page.waitForTimeout(500);
+
+    await expect(page).toHaveScreenshot("device-resize-mobile.png", {
+      fullPage: false,
+    });
+  });
+
+  test("settings dialog", async ({ loggedInPage: page }) => {
+    await page.goto("/");
+    await page.waitForLoadState("networkidle");
+    await openSettings(page);
+    await page.waitForTimeout(500);
+
+    await expect(page).toHaveScreenshot("device-settings-mobile.png", {
+      fullPage: false,
+    });
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Tablet (Galaxy Tab S9 -- tablet-chromium)
+// ---------------------------------------------------------------------------
+test.describe("@tablet Device visual regression", () => {
+  test("home page", async ({ loggedInPage: page }) => {
+    await page.goto("/");
+    await page.waitForLoadState("networkidle");
+    await page.waitForTimeout(500);
+
+    await expect(page).toHaveScreenshot("device-home-tablet.png", {
+      fullPage: false,
+    });
+  });
+
+  test("tool page -- image resize (empty state)", async ({ loggedInPage: page }) => {
+    await page.goto("/image/resize");
+    await page.waitForLoadState("networkidle");
+    await page.waitForTimeout(500);
+
+    await expect(page).toHaveScreenshot("device-resize-tablet.png", {
+      fullPage: false,
+    });
+  });
+
+  test("settings dialog", async ({ loggedInPage: page }) => {
+    await page.goto("/");
+    await page.waitForLoadState("networkidle");
+    await openSettings(page);
+    await page.waitForTimeout(500);
+
+    await expect(page).toHaveScreenshot("device-settings-tablet.png", {
+      fullPage: false,
+    });
+  });
+});