45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import "@testing-library/jest-dom";
|
|
import * as React from "react";
|
|
import { describe, expect, it } from "vitest";
|
|
import { Button } from "./button";
|
|
import { expectNoA11yViolations, findA11yViolations } from "~/utils/test/a11y";
|
|
import { render } from "@testing-library/react";
|
|
|
|
describe("Button a11y", () => {
|
|
it("renders text button without a11y violations", async () => {
|
|
await expectNoA11yViolations(<Button>Save changes</Button>);
|
|
});
|
|
|
|
it("icon-only button passes when aria-label is supplied", async () => {
|
|
await expectNoA11yViolations(
|
|
<Button aria-label="Close dialog" size="icon">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M6 6l12 12M6 18L18 6" />
|
|
</svg>
|
|
</Button>
|
|
);
|
|
});
|
|
|
|
it("disabled button keeps its accessible name", async () => {
|
|
await expectNoA11yViolations(
|
|
<Button disabled>Submitting</Button>
|
|
);
|
|
});
|
|
|
|
it("destructive variant with text passes", async () => {
|
|
await expectNoA11yViolations(<Button variant="destructive">Delete</Button>);
|
|
});
|
|
|
|
it("icon-only button WITHOUT an accessible name is flagged (negative control)", () => {
|
|
const { container } = render(
|
|
<Button size="icon">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M6 6l12 12M6 18L18 6" />
|
|
</svg>
|
|
</Button>
|
|
);
|
|
const violations = findA11yViolations(container);
|
|
expect(violations.some((v) => v.rule === "button-name")).toBe(true);
|
|
});
|
|
});
|