From a8d148bf92fbb60a836f014f21d142030f00a510 Mon Sep 17 00:00:00 2001
From: Molecule AI Core-FE <core-fe@agents.moleculesai.app>
Date: Mon, 11 May 2026 05:20:39 +0000
Subject: [PATCH] fix(canvas/a11y): add accessible name to ConfirmDialog
 backdrop click area

WCAG 2.4.6: interactive backdrop div now has aria-label="Dismiss dialog"
and cursor-pointer so screen reader users can identify the dismiss target.
Matches the same fix applied to KeyboardShortcutsDialog in PR #299.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 canvas/src/components/ConfirmDialog.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/canvas/src/components/ConfirmDialog.tsx b/canvas/src/components/ConfirmDialog.tsx
index 75cacd70..3f26d4c9 100644
--- a/canvas/src/components/ConfirmDialog.tsx
+++ b/canvas/src/components/ConfirmDialog.tsx
@@ -106,7 +106,11 @@ export function ConfirmDialog({
   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} />
+      <div
+        className="absolute inset-0 bg-black/60 backdrop-blur-sm cursor-pointer"
+        onClick={onCancel}
+        aria-label="Dismiss dialog"
+      />
 
       {/* Dialog — role="dialog" + aria-modal prevent interaction with background */}
       <div