0155749028
Adds aria and keyboard interaction tests for the Dialog component (10 new tests, 53 total passing). Also fixes DialogContent to render with the `open` attribute so the <dialog> element is accessible in JSDOM.
91 lines
2.7 KiB
TypeScript
91 lines
2.7 KiB
TypeScript
import { render, screen } from "@solidjs/testing-library";
|
|
import { describe, expect, it } from "vitest";
|
|
import { Dialog } from "../../../src/components/dialog/index";
|
|
|
|
describe("Dialog ARIA", () => {
|
|
it("content has role=dialog", () => {
|
|
render(() => (
|
|
<Dialog defaultOpen>
|
|
<Dialog.Content data-testid="content">
|
|
<Dialog.Title>Title</Dialog.Title>
|
|
</Dialog.Content>
|
|
</Dialog>
|
|
));
|
|
expect(screen.getByRole("dialog")).toBeTruthy();
|
|
});
|
|
|
|
it("content has aria-modal when modal prop is true", () => {
|
|
render(() => (
|
|
<Dialog defaultOpen modal>
|
|
<Dialog.Content>
|
|
<Dialog.Title>Title</Dialog.Title>
|
|
</Dialog.Content>
|
|
</Dialog>
|
|
));
|
|
expect(screen.getByRole("dialog").getAttribute("aria-modal")).toBe("true");
|
|
});
|
|
|
|
it("content does not have aria-modal when modal is false", () => {
|
|
render(() => (
|
|
<Dialog defaultOpen modal={false}>
|
|
<Dialog.Content>
|
|
<Dialog.Title>Title</Dialog.Title>
|
|
</Dialog.Content>
|
|
</Dialog>
|
|
));
|
|
expect(screen.getByRole("dialog").getAttribute("aria-modal")).toBeNull();
|
|
});
|
|
|
|
it("content is linked to title via aria-labelledby", () => {
|
|
render(() => (
|
|
<Dialog defaultOpen>
|
|
<Dialog.Content>
|
|
<Dialog.Title>My Title</Dialog.Title>
|
|
</Dialog.Content>
|
|
</Dialog>
|
|
));
|
|
const dialog = screen.getByRole("dialog");
|
|
const title = screen.getByText("My Title");
|
|
expect(dialog.getAttribute("aria-labelledby")).toBe(title.id);
|
|
});
|
|
|
|
it("content is linked to description via aria-describedby", () => {
|
|
render(() => (
|
|
<Dialog defaultOpen>
|
|
<Dialog.Content>
|
|
<Dialog.Title>Title</Dialog.Title>
|
|
<Dialog.Description>My description</Dialog.Description>
|
|
</Dialog.Content>
|
|
</Dialog>
|
|
));
|
|
const dialog = screen.getByRole("dialog");
|
|
const desc = screen.getByText("My description");
|
|
expect(dialog.getAttribute("aria-describedby")).toBe(desc.id);
|
|
});
|
|
|
|
it("trigger has aria-haspopup=dialog", () => {
|
|
render(() => (
|
|
<Dialog>
|
|
<Dialog.Trigger>Open</Dialog.Trigger>
|
|
<Dialog.Content>
|
|
<Dialog.Title>Title</Dialog.Title>
|
|
</Dialog.Content>
|
|
</Dialog>
|
|
));
|
|
expect(screen.getByText("Open").getAttribute("aria-haspopup")).toBe("dialog");
|
|
});
|
|
|
|
it("trigger aria-expanded reflects open state", () => {
|
|
render(() => (
|
|
<Dialog>
|
|
<Dialog.Trigger>Open</Dialog.Trigger>
|
|
<Dialog.Content>
|
|
<Dialog.Title>Title</Dialog.Title>
|
|
</Dialog.Content>
|
|
</Dialog>
|
|
));
|
|
const trigger = screen.getByText("Open");
|
|
expect(trigger.getAttribute("aria-expanded")).toBe("false");
|
|
});
|
|
});
|