From 6348e6bb521fc8c32c5ac065a4753743f8348d5a Mon Sep 17 00:00:00 2001
From: Molecule AI Core-UIUX <core-uiux@agents.moleculesai.app>
Date: Tue, 12 May 2026 06:45:39 +0000
Subject: [PATCH] fix(canvas/SearchDialog): split backdrop from dialog for WCAG
 4.1.2 compliance

Restructure SearchDialog so the backdrop div is separate from the dialog
container. The outer div previously served as both backdrop and centering
wrapper, which made it impossible to add accessibility attributes
(aria-hidden="true") without hiding the dialog content from screen
readers.

New structure mirrors ConfirmDialog and KeyboardShortcutsDialog:
  - Backdrop: aria-hidden="true", cursor-pointer, click-to-dismiss
  - Dialog: role="dialog", aria-modal, aria-label, relative z-[71]

Also removes the now-unnecessary stopPropagation() on the dialog div.

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

diff --git a/canvas/src/components/SearchDialog.tsx b/canvas/src/components/SearchDialog.tsx
index ac6a54eb..9f2a2e1f 100644
--- a/canvas/src/components/SearchDialog.tsx
+++ b/canvas/src/components/SearchDialog.tsx
@@ -91,16 +91,19 @@ export function SearchDialog() {
   if (!open) return null;
 
   return (
-    <div
-      className="fixed inset-0 z-[70] flex items-start justify-center pt-[20vh] bg-black/50 backdrop-blur-sm"
-      onClick={() => setOpen(false)}
-    >
+    <div className="fixed inset-0 z-[70] flex items-start justify-center pt-[20vh]">
+      {/* Backdrop — interactive dismiss area; aria-hidden so screen readers ignore it */}
+      <div
+        className="absolute inset-0 bg-black/50 backdrop-blur-sm cursor-pointer"
+        onClick={() => setOpen(false)}
+        aria-hidden="true"
+      />
+      {/* Dialog */}
       <div
         role="dialog"
         aria-modal="true"
         aria-label="Search workspaces"
-        className="w-[420px] bg-surface/95 backdrop-blur-xl border border-line/60 rounded-2xl shadow-2xl shadow-black/50 overflow-hidden"
-        onClick={(e) => e.stopPropagation()}
+        className="relative z-[71] w-[420px] bg-surface/95 backdrop-blur-xl border border-line/60 rounded-2xl shadow-2xl shadow-black/50 overflow-hidden"
       >
         {/* Search input */}
         <div className="flex items-center gap-3 px-4 py-3 border-b border-line/40">