test(ConfirmDialog): add 6 WCAG accessibility tests
Some checks failed
Block internal-flavored paths / Block forbidden paths (pull_request) Successful in 10s
CI / Detect changes (pull_request) Successful in 24s
Harness Replays / detect-changes (pull_request) Successful in 16s
E2E API Smoke Test / detect-changes (pull_request) Successful in 33s
E2E Staging Canvas (Playwright) / detect-changes (pull_request) Successful in 35s
Secret scan / Scan diff for credential-shaped strings (pull_request) Successful in 18s
Handlers Postgres Integration / detect-changes (pull_request) Successful in 42s
qa-review / approved (pull_request) Failing after 19s
sop-checklist / all-items-acked (pull_request) [info tier:low] acked: 0/7 — missing: comprehensive-testing, local-postgres-e2e, staging-smoke, +4 — body-unfilled: comprehensive-testing, l
security-review / approved (pull_request) Failing after 19s
sop-tier-check / tier-check (pull_request) Successful in 17s
Runtime PR-Built Compatibility / detect-changes (pull_request) Successful in 39s
sop-checklist-gate / gate (pull_request) Successful in 21s
lint-required-no-paths / lint-required-no-paths (pull_request) Successful in 1m17s
CI / Platform (Go) (pull_request) Successful in 9s
CI / Shellcheck (E2E scripts) (pull_request) Successful in 6s
CI / Python Lint & Test (pull_request) Successful in 6s
Harness Replays / Harness Replays (pull_request) Successful in 7s
E2E API Smoke Test / E2E API Smoke Test (pull_request) Successful in 9s
Handlers Postgres Integration / Handlers Postgres Integration (pull_request) Successful in 6s
Runtime PR-Built Compatibility / PR-built wheel + import smoke (pull_request) Successful in 5s
CI / Canvas (Next.js) (pull_request) Successful in 9m49s
CI / Canvas Deploy Reminder (pull_request) Has been skipped
CI / all-required (pull_request) Successful in 1s
E2E Staging Canvas (Playwright) / Canvas tabs E2E (pull_request) Successful in 11m21s

Add coverage for dialog a11y guarantees already implemented:
- role=dialog + aria-modal=true
- aria-labelledby pointing to title (WCAG 1.3.1)
- Escape → onCancel, Enter → onConfirm (WCAG 2.1.1)
- Focus moves to first button on open (WCAG 2.4.3)
- Backdrop click → onCancel
- aria-label on backdrop (WCAG 4.1.2)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Molecule AI · core-uiux 2026-05-13 14:28:00 +00:00
parent 8f9c220f66
commit 19f9e463af

View File

@ -1,12 +1,114 @@
// @vitest-environment jsdom
import { describe, it, expect, vi, afterEach } from "vitest";
import { render, screen, fireEvent, cleanup } from "@testing-library/react";
import { describe, it, expect, vi, afterEach, beforeEach } from "vitest";
import { render, screen, fireEvent, cleanup, act } from "@testing-library/react";
import { ConfirmDialog } from "../ConfirmDialog";
afterEach(() => {
cleanup();
});
describe("ConfirmDialog — WCAG dialog accessibility", () => {
it("dialog has role=dialog and aria-modal=true", () => {
render(
<ConfirmDialog
open
title="Are you sure?"
message="This action cannot be undone."
onConfirm={vi.fn()}
onCancel={vi.fn()}
/>
);
const dialog = screen.getByRole("dialog");
expect(dialog).toBeTruthy();
expect(dialog.getAttribute("aria-modal")).toBe("true");
});
it("dialog has aria-labelledby pointing to the title", () => {
render(
<ConfirmDialog
open
title="Delete workspace"
message="This will permanently delete the workspace."
onConfirm={vi.fn()}
onCancel={vi.fn()}
/>
);
const dialog = screen.getByRole("dialog");
const labelledBy = dialog.getAttribute("aria-labelledby");
expect(labelledBy).toBeTruthy();
const titleEl = document.getElementById(labelledBy!);
expect(titleEl?.textContent?.trim()).toBe("Delete workspace");
});
it("Escape key invokes onCancel", () => {
const onCancel = vi.fn();
render(
<ConfirmDialog
open
title="Title"
message="Message"
onConfirm={vi.fn()}
onCancel={onCancel}
/>
);
fireEvent.keyDown(window, { key: "Escape" });
expect(onCancel).toHaveBeenCalledTimes(1);
});
it("Enter key invokes onConfirm", () => {
const onConfirm = vi.fn();
render(
<ConfirmDialog
open
title="Title"
message="Message"
onConfirm={onConfirm}
onCancel={vi.fn()}
/>
);
fireEvent.keyDown(window, { key: "Enter" });
expect(onConfirm).toHaveBeenCalledTimes(1);
});
it("moves focus to the first button when dialog opens (WCAG 2.4.3)", async () => {
const onConfirm = vi.fn();
render(
<ConfirmDialog
open
title="Title"
message="Message"
onConfirm={onConfirm}
onCancel={vi.fn()}
/>
);
// Flush requestAnimationFrame so ConfirmDialog's internal rAF focus fires
await act(async () => {
await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
});
const firstButton = screen.getAllByRole("button")[0];
expect(document.activeElement).toBe(firstButton);
});
});
describe("ConfirmDialog — backdrop", () => {
it("backdrop click invokes onCancel", () => {
const onCancel = vi.fn();
render(
<ConfirmDialog
open
title="Title"
message="Message"
onConfirm={vi.fn()}
onCancel={onCancel}
/>
);
const backdrop = document.querySelector('[aria-label="Dismiss dialog"]') as HTMLElement;
expect(backdrop).toBeTruthy();
fireEvent.click(backdrop);
expect(onCancel).toHaveBeenCalledTimes(1);
});
});
describe("ConfirmDialog singleButton prop", () => {
it("renders Cancel button by default", () => {
render(