Accessible Accordion

// Jest + @testing-library/react + jest-axe
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { axe, toHaveNoViolations } from "jest-axe";
import AccessibleAccordion from "./AccessibleAccordion";

expect.extend(toHaveNoViolations);

const items = [
  { id: "a", title: "A", content: "A content" },
  { id: "b", title: "B", content: "B content" },
];

test("toggles aria-expanded on click", async () => {
  const user = userEvent.setup();
  render(<AccessibleAccordion items={items} />);
  const btn = screen.getByRole("button", { name: "A" });
  expect(btn).toHaveAttribute("aria-expanded", "false");
  await user.click(btn);
  expect(btn).toHaveAttribute("aria-expanded", "true");
});

test("exclusive mode closes other items when opening one", async () => {
  const user = userEvent.setup();
  render(<AccessibleAccordion items={items} exclusive defaultOpen="a" />);
  const a = screen.getByRole("button", { name: "A" });
  const b = screen.getByRole("button", { name: "B" });
  expect(a).toHaveAttribute("aria-expanded", "true");
  await user.click(b);
  expect(a).toHaveAttribute("aria-expanded", "false");
  expect(b).toHaveAttribute("aria-expanded", "true");
});

test("has no axe violations", async () => {
  const { container } = render(<AccessibleAccordion items={items} />);
  expect(await axe(container)).toHaveNoViolations();
});

// Vitest + @testing-library/react
import { expect, test } from "vitest";
import { render, screen } from "@testing-library/react";
import AccessibleAccordion from "./AccessibleAccordion";

test("renders each title as a button inside a heading", () => {
  render(
    <AccessibleAccordion items={[{ id: "x", title: "X", content: "X" }]} />
  );
  expect(screen.getByRole("button", { name: "X" })).toBeInTheDocument();
});

// Playwright + @axe-core/playwright
import { test, expect } from "@playwright/test";
import AxeBuilder from "@axe-core/playwright";

test("accordion page has no serious a11y violations", async ({ page }) => {
  await page.goto("/en/accessible-accordion");
  const results = await new AxeBuilder({ page })
    .withTags(["wcag2a", "wcag2aa", "wcag22aa"])
    .analyze();
  const serious = results.violations.filter(
    (v) => v.impact === "critical" || v.impact === "serious"
  );
  expect(serious).toEqual([]);
});

test("native details toggles with Space", async ({ page }) => {
  await page.goto("/en/accessible-accordion");
  const summary = page.getByText("What is accessibility?");
  await summary.focus();
  await page.keyboard.press("Space");
  await expect(summary.locator("..")).toHaveAttribute("open", "");
});