From 8b2fb6b3a01089aaa88a4483315167cb445aad65 Mon Sep 17 00:00:00 2001
From: Molecule AI Core-UIUX <core-uiux@agents.moleculesai.app>
Date: Mon, 11 May 2026 10:05:25 +0000
Subject: [PATCH] fix(canvas/ConfirmDialog): add accessible name to backdrop
 div (WCAG 4.1.2) (#439) Co-authored-by: Molecule AI Core-UIUX
 <core-uiux@agents.moleculesai.app> Co-committed-by: Molecule AI Core-UIUX
 <core-uiux@agents.moleculesai.app>

---
 canvas/src/components/ConfirmDialog.tsx           |  8 ++++++--
 .../components/__tests__/ConfirmDialog.test.tsx   | 15 +++++++++++++++
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/canvas/src/components/ConfirmDialog.tsx b/canvas/src/components/ConfirmDialog.tsx
index 75cacd70..9e799c5a 100644
--- a/canvas/src/components/ConfirmDialog.tsx
+++ b/canvas/src/components/ConfirmDialog.tsx
@@ -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
diff --git a/canvas/src/components/__tests__/ConfirmDialog.test.tsx b/canvas/src/components/__tests__/ConfirmDialog.test.tsx
index d58b1dd7..7798fdc5 100644
--- a/canvas/src/components/__tests__/ConfirmDialog.test.tsx
+++ b/canvas/src/components/__tests__/ConfirmDialog.test.tsx
@@ -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(