SnapOtter/tests/e2e-landing/a11y-contrast.spec.ts

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([]);
  });
}