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.
2026-08-03 07:46:42 +02:00 · 2026-06-20 03:44:26 +08:00
parent 692c8ebf91
commit 0705de8f1b
17 changed files with 27491 additions and 8 deletions
@@ -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
+    }
+  }
+}