mirror of
https://github.com/snapotter-hq/SnapOtter.git
synced 2026-08-03 07:46:42 +02:00
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.
146 lines
5.5 KiB
JSON
146 lines
5.5 KiB
JSON
{
|
|
"_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
|
|
}
|
|
}
|
|
}
|