molecule-ai/molecule-core
41
0
Fork 2
Code Issues 103 Pull Requests 156 Actions 206 Packages Projects Releases Wiki Activity

fix(canvas/SearchDialog): split backdrop from dialog for WCAG 4.1.2 compliance

Browse Source 
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>
This commit is contained in:
Molecule AI · core-uiux 2026-05-12 06:45:39 +00:00
parent 8f2a76c0db
commit 6348e6bb52
1 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
canvas/src/components/SearchDialog.tsx
View File

@ -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">