Accessible Dialog (Non-Modal)

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

expect.extend(toHaveNoViolations);

function Fixture() {
  const [open, setOpen] = useState(false);
  const btnRef = useRef(null);
  return (
    <>
      <button ref={btnRef} onClick={() => setOpen(true)}>Open</button>
      <AccessibleDialog
        open={open}
        onClose={() => setOpen(false)}
        title="Cart"
        triggerRef={btnRef}
      >
        <button>Checkout</button>
      </AccessibleDialog>
      <a href="#elsewhere">Outside link</a>
    </>
  );
}

test("exposes role=dialog with accessible name but NOT aria-modal", async () => {
  const user = userEvent.setup();
  render(<Fixture />);
  await user.click(screen.getByRole("button", { name: "Open" }));
  const dlg = screen.getByRole("dialog", { name: "Cart" });
  expect(dlg).toBeInTheDocument();
  expect(dlg).not.toHaveAttribute("aria-modal", "true");
});

test("Tab leaves the dialog (non-modal — no trap)", async () => {
  const user = userEvent.setup();
  render(<Fixture />);
  await user.click(screen.getByRole("button", { name: "Open" }));
  const checkout = screen.getByRole("button", { name: "Checkout" });
  const outside = screen.getByRole("link", { name: "Outside link" });
  checkout.focus();
  // Jump past the close button, then into the page:
  await user.tab(); // close button
  await user.tab(); // trigger (Open)
  await user.tab(); // outside link
  expect(outside).toHaveFocus();
});

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

// Vitest + @testing-library/react
import { expect, test } from "vitest";
import { useState } from "react";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import AccessibleDialog from "./AccessibleDialog";

test("Escape closes the dialog", async () => {
  const user = userEvent.setup();
  function F() {
    const [open, setOpen] = useState(true);
    return (
      <AccessibleDialog open={open} onClose={() => setOpen(false)} title="X">
        <button>OK</button>
      </AccessibleDialog>
    );
  }
  render(<F />);
  await user.keyboard("{Escape}");
  expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
});

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

test("dialog page has no serious a11y violations", async ({ page }) => {
  await page.goto("/en/accessible-dialog");
  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("drawer opens, Escape closes, focus returns to trigger", async ({ page }) => {
  await page.goto("/en/accessible-dialog");
  const trigger = page.getByRole("button", { name: /cart/i });
  await trigger.click();
  await expect(page.getByRole("dialog", { name: /your cart/i })).toBeVisible();
  await page.keyboard.press("Escape");
  await expect(trigger).toBeFocused();
});