47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
import { render } from "@testing-library/react";
|
|
import { describe, expect, it, vi } from "vitest";
|
|
|
|
import InputText from "./InputText";
|
|
|
|
vi.mock("react-i18next", () => ({
|
|
useTranslation: () => ({
|
|
t: (key: string) => key,
|
|
i18n: { exists: () => false },
|
|
}),
|
|
}));
|
|
|
|
describe("InputText accessibility attributes", () => {
|
|
it("links text inputs to their error descriptions", () => {
|
|
const { container } = render(
|
|
<InputText
|
|
id="email"
|
|
name="email"
|
|
title="Email"
|
|
type="email"
|
|
defaultValue="not-an-email"
|
|
ariaDescribedBy="email-error"
|
|
ariaInvalid
|
|
/>,
|
|
);
|
|
|
|
const input = container.querySelector("input");
|
|
// Subframe's TextInput associates its label implicitly by wrapping the input in the
|
|
// <label> element (a valid WCAG name source), rather than via an explicit for/id pair.
|
|
const label = input?.closest("label");
|
|
|
|
expect(label).not.toBeNull();
|
|
expect(label?.textContent).toContain("Email");
|
|
expect(input?.getAttribute("aria-describedby")).toBe("email-error");
|
|
expect(input?.getAttribute("aria-invalid")).toBe("true");
|
|
});
|
|
|
|
it("links textareas to their error descriptions", () => {
|
|
const { container } = render(<InputText id="message" name="message" title="Message" rows={4} defaultValue="" ariaDescribedBy="message-error" isError />);
|
|
|
|
const textarea = container.querySelector("textarea");
|
|
|
|
expect(textarea?.getAttribute("aria-describedby")).toBe("message-error");
|
|
expect(textarea?.getAttribute("aria-invalid")).toBe("true");
|
|
});
|
|
});
|