mirror of
https://github.com/snapotter-hq/SnapOtter.git
synced 2026-08-03 07:46:42 +02:00
fix(a11y): WCAG AA contrast retune for the Otter Orange palette (#567)
Fixes #557. Vivid fill, ink label: brand #E07832 stays on fills while primary-foreground flips to #1A1814 (5.83:1); new theme-aware ink tokens carry orange, destructive, and success text roles; opacity-modified text purged; landing, demo, and the docs fund button retuned. Guarded by a CSS-parsing unit contrast test, rebuilt axe baselines with zero contrast entries, a new landing axe smoke, and fully regenerated darwin visual baselines.
This commit is contained in:
@@ -0,0 +1,26 @@
|
||||
import AxeBuilder from "@axe-core/playwright";
|
||||
import { expect, test } from "@playwright/test";
|
||||
|
||||
/**
|
||||
* Color-contrast smoke for the landing site (issue #557). The landing shares
|
||||
* the Otter palette with the app but had no axe coverage, so AA regressions
|
||||
* shipped unnoticed. Scans the pages that exercise every palette role:
|
||||
* hero + CTA gradient + category cards (/), tool grid chips (/tools),
|
||||
* dark sections and comparison table (/enterprise), prose links (/faq),
|
||||
* and the SEO card grids (/self-hosted).
|
||||
*/
|
||||
|
||||
const PAGES = ["/", "/tools", "/enterprise", "/faq", "/self-hosted"];
|
||||
|
||||
for (const path of PAGES) {
|
||||
test(`landing ${path} has no color-contrast violations`, async ({ page }) => {
|
||||
await page.goto(path);
|
||||
await page.waitForLoadState("networkidle");
|
||||
const results = await new AxeBuilder({ page }).withTags(["wcag2aa"]).analyze();
|
||||
const contrast = results.violations.filter((v) => v.id === "color-contrast");
|
||||
const offenders = contrast.flatMap((v) =>
|
||||
v.nodes.map((n) => `${n.target.join(" ")}: ${n.failureSummary?.split("\n")[1] ?? ""}`),
|
||||
);
|
||||
expect(offenders, `color-contrast violations on ${path}`).toEqual([]);
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user