Accessible Input

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

expect.extend(toHaveNoViolations);

function Fixture() {
  const [v, setV] = useState("");
  return (
    <AccessibleInput
      label="Email"
      type="email"
      value={v}
      onChange={(e) => setV(e.target.value)}
      help="We'll never share your email."
      validate={(x) => (/^\S+@\S+\.\S+$/.test(x) ? null : "Enter a valid email.")}
    />
  );
}

test("input has an accessible name and description", async () => {
  render(<Fixture />);
  const input = screen.getByRole("textbox", { name: "Email" });
  expect(input).toHaveAccessibleDescription(/share your email/i);
});

test("announces error on blur, clears on fix", async () => {
  const user = userEvent.setup();
  render(<Fixture />);
  const input = screen.getByRole("textbox", { name: "Email" });
  await user.type(input, "nope");
  await user.tab();
  expect(input).toHaveAttribute("aria-invalid", "true");
  expect(screen.getByRole("status")).toHaveTextContent(/enter a valid email/i);
  await user.clear(input);
  await user.type(input, "you@example.com");
  await user.tab();
  expect(input).not.toHaveAttribute("aria-invalid");
});

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

test("placeholder is NOT the accessible name", () => {
  function F() {
    const [v, setV] = useState("");
    return (
      <AccessibleInput
        label="Email"
        value={v}
        onChange={(e) => setV(e.target.value)}
        placeholder="you@example.com"
      />
    );
  }
  render(<F />);
  // Visible label wins over placeholder:
  expect(screen.getByRole("textbox", { name: "Email" })).toBeInTheDocument();
});

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

test("input page has no serious a11y violations", async ({ page }) => {
  await page.goto("/en/accessible-input");
  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("live-validation announces on blur, not on keystroke", async ({ page }) => {
  await page.goto("/en/accessible-input");
  const input = page.getByLabel(/email address/i).first();
  await input.fill("nope");
  // No announcement yet — still typing
  await expect(page.locator('[role="status"].is-err')).toHaveCount(0);
  await input.blur();
  await expect(page.locator('[role="status"].is-err')).toContainText(/enter an address/i);
});