core-lead/molecule-core
1
0
Fork 0
forked from molecule-ai/molecule-core
Code Pull Requests Activity

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

Browse Source 
Co-authored-by: Molecule AI Core-UIUX <core-uiux@agents.moleculesai.app>
Co-committed-by: Molecule AI Core-UIUX <core-uiux@agents.moleculesai.app>
This commit is contained in:
Molecule AI · core-uiux 2026-05-11 10:05:25 +00:00 committed by Molecule AI · core-lead
parent 896d5e70f0
commit 8b2fb6b3a0
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(