React: How to automatically test React component accessibility?

1npm install -D axe-core @axe-core/react @testing-library/react vitest

1// axe-utils.ts
2import axe, { type AxeResults } from "axe-core";
3
4export async function checkA11y(container: HTMLElement): Promise<AxeResults> {
5  const results = await axe.run(container);
6
7  const violations = results.violations;
8  if (violations.length > 0) {
9    const messages = violations.map(v => {
10      const nodes = v.nodes
11        .map(n => "  - " + n.html + "\n    Fix: " + n.failureSummary)
12        .join("\n");
13      return v.id + ": " + v.help + "\n" + nodes;
14    }).join("\n\n");
15    throw new Error("A11y violations:\n" + messages);
16  }
17  return results;
18}
19
20// button.test.tsx
21import { render, screen } from "@testing-library/react";
22import userEvent from "@testing-library/user-event";
23import { Button } from "./Button";
24import { checkA11y } from "./axe-utils";
25
26describe("Button a11y", () => {
27  it("has no violations in default state", async () => {
28    const { container } = render(<Button>Button</Button>);
29    await checkA11y(container);
30  });
31
32  it("icon-only button has accessible name", async () => {
33    const { container } = render(
34      <Button aria-label="Close"><CloseIcon /></Button>
35    );
36    await checkA11y(container);
37  });
38
39  it("disabled button is accessible", async () => {
40    const { container } = render(
41      <Button disabled>Disabled</Button>
42    );
43    await checkA11y(container);
44  });
45
46  it("loading button announces busy state", async () => {
47    const { container } = render(
48      <Button isLoading>Loading...</Button>
49    );
50    const button = screen.getByRole("button");
51    expect(button).toHaveAttribute("aria-busy", "true");
52    await checkA11y(container);
53  });
54});

1// tests/a11y.spec.ts
2import { test, expect } from "@playwright/test";
3import AxeBuilder from "@axe-core/playwright";
4
5test("homepage is accessible", async ({ page }) => {
6  await page.goto("/");
7  const results = await new AxeBuilder({ page })
8    .include("main")
9    .disableRules(["color-contrast"]) // Exclude specific rules if needed
10    .analyze();
11
12  expect(results.violations).toEqual([]);
13});
14
15test("modal dialog is accessible", async ({ page }) => {
16  await page.goto("/");
17  await page.click("text=Open Modal");
18  const results = await new AxeBuilder({ page })
19    .include("[role=\"dialog\"]")
20    .analyze();
21
22  expect(results.violations).toEqual([]);
23});