ik/rf4-spotter
1
0
Fork 0
Code Issues Pull Requests Actions 9 Packages Projects Releases Wiki Activity

test: enforce accessibility quality gates

Browse Source
This commit is contained in:
ik
2026-09-07 09:12:30 +07:00
parent fec830879b
commit d69ad9c01d
7 changed files with 1189 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/package-lock.json
Generated
+1163 -3
View File
File diff suppressed because it is too large Load Diff
apps/web/package.json
+6 -2
View File
@@ -10,7 +10,9 @@
"check": "astro check",
"test:unit": "node --test tests/unit/*.test.ts",
"test:e2e": "playwright test",
"test:bootstrap": "playwright test tests/production-bootstrap.spec.ts"
"test:bootstrap": "playwright test tests/production-bootstrap.spec.ts",
"audit:axe": "playwright test tests/accessibility.spec.ts",
"audit:lighthouse": "lighthouse http://127.0.0.1:4321 --quiet --chrome-flags='--headless --no-sandbox' --only-categories=performance,accessibility --output=json --output-path=./lighthouse-report.json"
},
"dependencies": {
"@astrojs/check": "^0.9.10",
@@ -20,6 +22,8 @@
"typescript": "^6.0.0"
},
"devDependencies": {
"@types/node": "^26.4.1"
"@axe-core/playwright": "^4.13.0",
"@types/node": "^26.4.1",
"lighthouse": "^13.4.1"
}
}
apps/web/src/styles/global.css
+2
View File
@@ -25,3 +25,5 @@ footer{min-height:118px;background:var(--deep);color:#dbe4df;padding:28px max(32
.report-form fieldset{border:0;padding:0;margin:0}.report-form legend{width:100%;margin-bottom:18px;font:400 24px Georgia,serif}.report-form legend span,.optional-fields summary span{float:right;font:11px Inter,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:#7c8c89}.field-help{color:#657572;font-size:12px}.optional-fields{margin:26px 0;border-block:1px solid #d6dfd7;padding:18px 0}.optional-fields summary{cursor:pointer;font:400 20px Georgia,serif}.optional-fields[open] summary{margin-bottom:20px}.report-form input:user-invalid,.report-form select:user-invalid{border-color:#b84c3c}
.record-filters select{display:block;width:100%;height:46px;margin-top:7px;padding:0 13px;border:1px solid #ffffff29;border-radius:9px;background:#ffffff0c;color:#fff}.record-filters option{color:var(--ink)}.record-filters>a{align-self:end;height:48px;display:grid;place-items:center;padding:0 12px;color:#dce5e2;font-size:13px}
@media(max-width:720px){.record-row:not(.record-head)>*{display:grid;grid-template-columns:88px 1fr;text-align:left!important;gap:8px}.record-row:not(.record-head)>*:before{content:attr(data-label);font:700 9px Inter,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:#82908e}.record-row{grid-template-columns:1fr}.record-filters>a{height:auto;padding:8px}}
/* WCAG AA secondary text on light surfaces */
.eyebrow,.overline,.result-count,.spot-rank,.spot-topline,.spot-meta,.bait-line div span,.spot-stats span,.data-note,.state,.principles p,.principles article>span,.official-note,.privacy,.field-help,.report-form legend span,.optional-fields summary span,.record-row>span,.record-row>time{color:#4d605d}
apps/web/tests/accessibility.spec.ts
+10
View File
@@ -0,0 +1,10 @@
import AxeBuilder from "@axe-core/playwright";
import { expect, test } from "@playwright/test";
for (const path of ["/", "/records", "/report"]) {
test(`${path} has no serious accessibility violations`, async ({ page }) => {
await page.goto(path);
const results = await new AxeBuilder({ page }).withTags(["wcag2a", "wcag2aa", "wcag21aa"]).analyze();
expect(results.violations.filter(item => ["critical", "serious"].includes(item.impact ?? ""))).toEqual([]);
});
}