molecule-ai/molecule-core
41
0
Fork 2
Code Issues 43 Pull Requests 14 Actions 22 Packages Projects Releases Wiki Activity

fix(canvas/ConfirmDialog): add accessible name to backdrop div (WCAG 4.1.2) #439

Merged
core-lead merged 4 commits from fix/canvas-confirm-dialog-backdrop-a11y-v2 into main 2026-05-11 10:05:40 +00:00
Conversation 1 Commits 4 Files Changed 2 +21 -2
2 changed files with 21 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
canvas/src/components/ConfirmDialog.tsx
View File

@ -105,8 +105,12 @@ export function ConfirmDialog({
// (e.g. parents with transform, filter, will-change that break position:fixed).
return createPortal(
<div className="fixed inset-0 z-[9999] flex items-center justify-center">
{/* Backdrop */}
<div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onCancel} />
{/* Backdrop — interactive dismiss area; accessible name for screen readers (WCAG 4.1.2) */}
<div
className="absolute inset-0 bg-black/60 backdrop-blur-sm cursor-pointer"
aria-label="Dismiss dialog"
onClick={onCancel}
/>
{/* Dialog — role="dialog" + aria-modal prevent interaction with background */}
<div

15
canvas/src/components/__tests__/ConfirmDialog.test.tsx
View File

@ -73,6 +73,21 @@ describe("ConfirmDialog singleButton prop", () => {
expect(onCancel).toHaveBeenCalledTimes(1);
});
it("backdrop has aria-label for screen reader users (WCAG 4.1.2)", () => {
render(
<ConfirmDialog
open
title="Title"
message="Message"
onConfirm={vi.fn()}
onCancel={vi.fn()}
/>
);
const backdrop = document.querySelector(".bg-black\\/60");
expect(backdrop).toBeTruthy();
expect(backdrop?.getAttribute("aria-label")).toBe("Dismiss dialog");
});
it("singleButton: onConfirm fires on button click", () => {
const onConfirm = vi.fn();
render(