npm.tax/a11y.e2e.ts at main · serhalp/npm.tax · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
import { expect, type Page, test } from "@playwright/test";
import AxeBuilder from "@axe-core/playwright";

async function expectNoAccessibilityViolations(page: Page) {
  await expect(page.getByRole("heading", { name: "Tune the model" })).toBeVisible();

  const results = await new AxeBuilder({ page })
    .withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa", "wcag22aa"])
    .analyze();

  const violations = results.violations.map(({ description, helpUrl, id, impact, nodes }) => ({
    id,
    impact,
    description,
    helpUrl,
    nodes: nodes.map(({ failureSummary, target }) => ({
      target,
      failureSummary,
    })),
  }));

  expect(violations, JSON.stringify(violations, null, 2)).toEqual([]);
}

for (const theme of ["light", "dark"] as const) {
  test(`home page has no detectable accessibility violations in ${theme} mode`, async ({
    page,
  }) => {
    await page.addInitScript((selectedTheme) => {
      localStorage.setItem("theme", selectedTheme);
    }, theme);

    await page.goto("/");
    await expectNoAccessibilityViolations(page);
  });

  // Collapsed disclosures hide their contents from axe, and the summaries only
  // fail contrast while hovered, so neither is covered by the scan above.
  test(`expanded and hovered disclosures have no violations in ${theme} mode`, async ({ page }) => {
    await page.addInitScript((selectedTheme) => {
      localStorage.setItem("theme", selectedTheme);
    }, theme);

    await page.goto("/");
    // Toggling before hydration leaves `open` on the DOM for React to trip over.
    await page.waitForLoadState("networkidle");
    const summaries = page.locator("details > summary");
    expect(await summaries.count()).toBeGreaterThan(0);
    await summaries.evaluateAll((elements) => {
      for (const element of elements) (element as HTMLElement).click();
    });
    await summaries.last().hover();

    await expectNoAccessibilityViolations(page);
  });

  // The popover is closed until interacted with, so axe never sees its contents
  // on the default scan.
  test(`the defaults popover has no violations in ${theme} mode`, async ({ page }) => {
    await page.addInitScript((selectedTheme) => {
      localStorage.setItem("theme", selectedTheme);
    }, theme);

    await page.goto("/");
    await page.waitForLoadState("networkidle");
    const trigger = page.getByRole("button", { name: "Why these defaults?" });
    await trigger.focus();
    await expect(page.locator("[popover]")).toBeVisible();

    await expectNoAccessibilityViolations(page);
  });
}

test("home page controls expose accessible names", async ({ page }) => {
  await page.goto("/");

  await expect(page.getByRole("slider", { name: "Direct dependencies" })).toBeVisible();
  await expect(page.getByRole("slider", { name: "Transitive dependencies" })).toBeVisible();
  await expect(page.getByRole("slider", { name: "Time period" })).toBeVisible();
  await expect(
    page.getByRole("slider", { name: "Daily breach probability per package" }),
  ).toBeVisible();
  await expect(page.getByRole("textbox", { name: "Package name" })).toBeVisible();
  await expect(page.getByRole("textbox", { name: "Version" })).toBeVisible();
  await expect(
    page.getByRole("textbox", { name: "Exact daily breach probability per package" }),
  ).toBeVisible();
  await expect(page.getByRole("img", { name: /cumulative breach probability/i })).toBeVisible();
});