Accessible Select

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

expect.extend(toHaveNoViolations);

function Fixture() {
  const [v, setV] = useState("");
  return (
    <AccessibleSelect
      label="Country"
      value={v}
      onChange={(e) => setV(e.target.value)}
      options={[
        { value: "in", label: "India" },
        { value: "us", label: "United States" },
      ]}
    />
  );
}

test("has an accessible name", () => {
  render(<Fixture />);
  expect(screen.getByRole("combobox", { name: "Country" })).toBeInTheDocument();
});

test("selecting an option updates the value", async () => {
  const user = userEvent.setup();
  render(<Fixture />);
  await user.selectOptions(
    screen.getByRole("combobox", { name: "Country" }),
    "India"
  );
  expect(screen.getByRole("combobox")).toHaveValue("in");
});

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

test("exposes optgroup labels", () => {
  function F() {
    const [v, setV] = useState("");
    return (
      <AccessibleSelect
        label="Country"
        value={v}
        onChange={(e) => setV(e.target.value)}
        groups={[{ label: "Asia", options: [{ value: "in", label: "India" }] }]}
      />
    );
  }
  render(<F />);
  expect(screen.getByRole("group", { name: "Asia" })).toBeInTheDocument();
});

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

test("select page has no serious a11y violations", async ({ page }) => {
  await page.goto("/en/accessible-select");
  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("custom listbox: ArrowDown + Enter picks an option", async ({ page }) => {
  await page.goto("/en/accessible-select");
  const trigger = page.getByRole("button", { name: /plan/i });
  await trigger.click();
  await page.keyboard.press("ArrowDown");
  await page.keyboard.press("Enter");
  await expect(trigger).toBeFocused();
});