Accessible Error Message

// 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 { FieldError } from "./AccessibleErrorMessage";

expect.extend(toHaveNoViolations);

function Fixture() {
  const [v, setV] = useState("");
  const err = v && !/^\S+@\S+\.\S+$/.test(v) ? "Enter a valid email." : "";
  return (
    <>
      <label htmlFor="e">Email</label>
      <input
        id="e" value={v}
        onChange={(x) => setV(x.target.value)}
        aria-invalid={!!err || undefined}
        aria-describedby={err ? "e-err" : undefined}
      />
      {err && <FieldError id="e-err">{err}</FieldError>}
    </>
  );
}

test("invalid input exposes aria-invalid + accessible description", async () => {
  const user = userEvent.setup();
  render(<Fixture />);
  await user.type(screen.getByLabelText(/email/i), "nope");
  const input = screen.getByLabelText(/email/i);
  expect(input).toHaveAttribute("aria-invalid", "true");
  expect(input).toHaveAccessibleDescription(/enter a valid email/i);
});

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 { render, screen } from "@testing-library/react";
import { ErrorRegionProvider, useErrorRegion } from "./AccessibleErrorMessage";

function Trigger() {
  const { announce } = useErrorRegion();
  return <button onClick={() => announce("Payment failed.", { urgent: true })}>Fail</button>;
}

test("urgent announcements use role=alert", async () => {
  const user = (await import("@testing-library/user-event")).default.setup();
  render(<ErrorRegionProvider><Trigger /></ErrorRegionProvider>);
  await user.click(screen.getByRole("button", { name: "Fail" }));
  // Wait a tick for the state flip
  await new Promise((r) => setTimeout(r, 20));
  expect(await screen.findByRole("alert")).toHaveTextContent(/payment failed/i);
});

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

test("error page has no serious a11y violations", async ({ page }) => {
  await page.goto("/en/accessible-error-message");
  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("submit with empty email surfaces inline error", async ({ page }) => {
  await page.goto("/en/accessible-error-message");
  const input = page.getByLabel(/email address/i).first();
  await input.fill("nope");
  await input.blur();
  await expect(input).toHaveAttribute("aria-invalid", "true");
});