Accessible Navigation

// 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 AccessibleNav from "./AccessibleNav";

expect.extend(toHaveNoViolations);

const items = [
  { href: "/", label: "Home" },
  { href: "/pricing", label: "Pricing" },
];

test("renders nav landmark with its accessible name", () => {
  render(<AccessibleNav items={items} currentHref="/" />);
  expect(screen.getByRole("navigation", { name: "Main" })).toBeInTheDocument();
});

test("marks the current page with aria-current", () => {
  render(<AccessibleNav items={items} currentHref="/pricing" />);
  expect(screen.getByRole("link", { name: "Pricing" }))
    .toHaveAttribute("aria-current", "page");
});

test("hamburger toggles aria-expanded", async () => {
  const user = userEvent.setup();
  render(<AccessibleNav items={items} currentHref="/" />);
  const ham = screen.getByRole("button", { name: /open menu/i });
  expect(ham).toHaveAttribute("aria-expanded", "false");
  await user.click(ham);
  expect(ham).toHaveAttribute("aria-expanded", "true");
});

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

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

test("exposes a single nav landmark with aria-label", () => {
  render(
    <AccessibleNav
      items={[{ href: "/", label: "Home" }]}
      currentHref="/"
      label="Main"
    />
  );
  expect(screen.getByRole("navigation", { name: "Main" })).toBeInTheDocument();
});

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

test("navigation page has no serious a11y violations", async ({ page }) => {
  await page.goto("/en/accessible-navigation");
  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("mobile hamburger opens and Escape closes", async ({ page }) => {
  await page.setViewportSize({ width: 400, height: 800 });
  await page.goto("/en/accessible-navigation");

  const ham = page.getByRole("button", { name: /open menu/i });
  await ham.click();
  await expect(ham).toHaveAttribute("aria-expanded", "true");

  await page.keyboard.press("Escape");
  await expect(ham).toHaveAttribute("aria-expanded", "false");
  await expect(ham).toBeFocused();
});