From 86747e71ec8b8c454942d2daced6d0c3109c6c41 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 11 Apr 2026 00:46:47 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20background?=
 =?UTF-8?q?=20overlay=20accessibility=20in=20modals?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Extracted clickable background overlays into distinct `<div aria-hidden="true">` elements across multiple modal components (`AISongModal`, `RbsImportModal`, `VoiceEditor`).

This prevents screen readers from redundantly announcing the empty clickable background area or inappropriately exposing it within the focus/navigation hierarchy, aligning with standard ARIA modal guidelines documented in the codebase.

Co-authored-by: ford442 <9397845+ford442@users.noreply.github.com>
---
 .Jules/palette.md                 |  3 +++
 src/components/AISongModal.tsx    | 13 ++++++++++---
 src/components/RbsImportModal.tsx |  8 ++++++--
 src/components/VoiceEditor.tsx    | 10 ++++++----
 4 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 0a19f42a..c975fe97 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -26,3 +26,6 @@
 ## 2026-04-09 - Standardize Modal Accessibility for Cloud Library
 **Learning:** The `CloudLibrary` component functioned as a modal visually but lacked standard ARIA modal attributes (`role="dialog"`, `aria-modal="true"`, `aria-labelledby`), causing screen readers to announce it incorrectly or not at all.
 **Action:** When implementing custom modals, always include `role="dialog"`, `aria-modal="true"`, an explicit `aria-labelledby` referencing a visually hidden or visible title element, and an `aria-hidden="true"` on the clickable background overlay.
+## 2024-11-20 - Standardize Backdrop Overlay Accessibility
+**Learning:** Components using `fixed inset-0` with a click handler to close a modal will cause screen readers to announce the entire background as a clickable element. This violates accessibility conventions.
+**Action:** When implementing clickable background overlays for custom modals, always separate the clickable backdrop into its own `<div>` sibling of the dialog element, and explicitly mark it with `aria-hidden="true"`.
diff --git a/src/components/AISongModal.tsx b/src/components/AISongModal.tsx
index 8fa0fdc2..1b5b26fa 100644
--- a/src/components/AISongModal.tsx
+++ b/src/components/AISongModal.tsx
@@ -655,10 +655,17 @@ export function AISongModal({ isOpen, onClose, onImport, onShowToast, audioEngin
     <div 
       ref={modalRef}
       className="fixed inset-0 bg-black/70 backdrop-blur-sm z-50 flex items-center justify-center p-2 sm:p-4"
-      onClick={(e) => e.target === e.currentTarget && handleClose()}
     >
+      <div
+        className="absolute inset-0 z-0"
+        onClick={handleClose}
+        aria-hidden="true"
+      />
       <div 
-        className="bg-[#0f1115] border border-emerald-500/30 rounded-xl shadow-[0_0_60px_rgba(16,185,129,0.2)] w-full max-w-3xl max-h-[95vh] sm:max-h-[90vh] flex flex-col animate-in fade-in zoom-in-95 duration-200"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="ai-song-modal-title"
+        className="relative z-10 bg-[#0f1115] border border-emerald-500/30 rounded-xl shadow-[0_0_60px_rgba(16,185,129,0.2)] w-full max-w-3xl max-h-[95vh] sm:max-h-[90vh] flex flex-col animate-in fade-in zoom-in-95 duration-200"
         onDragEnter={handleDragEnter}
         onDragLeave={handleDragLeave}
         onDragOver={(e) => e.preventDefault()}
@@ -671,7 +678,7 @@ export function AISongModal({ isOpen, onClose, onImport, onShowToast, audioEngin
               <span className="text-xl sm:text-2xl">🤖</span>
             </div>
             <div>
-              <h2 className="text-base sm:text-lg font-bold text-white">Import AI Song</h2>
+              <h2 id="ai-song-modal-title" className="text-base sm:text-lg font-bold text-white">Import AI Song</h2>
               <p className="text-[10px] sm:text-xs text-gray-400 hidden sm:block">Import songs from Claude, Gemini, Jules, Copilot, etc.</p>
             </div>
           </div>
diff --git a/src/components/RbsImportModal.tsx b/src/components/RbsImportModal.tsx
index 68cf6789..5a4311fd 100644
--- a/src/components/RbsImportModal.tsx
+++ b/src/components/RbsImportModal.tsx
@@ -384,9 +384,13 @@ export function RbsImportModal({ isOpen, onClose, onImport, onShowToast }: RbsIm
   return (
     <div
       className="fixed inset-0 bg-black/70 backdrop-blur-sm z-50 flex items-center justify-center p-4"
-      onClick={(e) => e.target === e.currentTarget && onClose()}
     >
-      <div role="dialog" aria-modal="true" aria-labelledby="rbs-import-title" className="bg-[#0f1115] border border-amber-500/30 rounded-xl shadow-[0_0_60px_rgba(245,158,11,0.2)] w-full max-w-4xl max-h-[90vh] flex flex-col">
+      <div
+        className="absolute inset-0 z-0"
+        onClick={onClose}
+        aria-hidden="true"
+      />
+      <div role="dialog" aria-modal="true" aria-labelledby="rbs-import-title" className="relative z-10 bg-[#0f1115] border border-amber-500/30 rounded-xl shadow-[0_0_60px_rgba(245,158,11,0.2)] w-full max-w-4xl max-h-[90vh] flex flex-col">
         {/* Header */}
         <div className="flex items-center justify-between p-4 border-b border-gray-800">
           <div className="flex items-center gap-3">
diff --git a/src/components/VoiceEditor.tsx b/src/components/VoiceEditor.tsx
index d895f194..38c43e23 100644
--- a/src/components/VoiceEditor.tsx
+++ b/src/components/VoiceEditor.tsx
@@ -74,17 +74,19 @@ export const VoiceEditor: React.FC<VoiceEditorProps> = ({ onClose }) => {
     return (
         <div
             className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm"
-            role="presentation"
-            onClick={onClose}
         >
+            <div
+                className="absolute inset-0 z-0"
+                onClick={onClose}
+                aria-hidden="true"
+            />
             <div
                 ref={trapRef}
-                className="bg-gray-900 border border-purple-500 rounded-xl p-6 w-[600px] shadow-2xl outline-none"
+                className="relative z-10 bg-gray-900 border border-purple-500 rounded-xl p-6 w-[600px] shadow-2xl outline-none"
                 role="dialog"
                 aria-modal="true"
                 aria-labelledby="voice-designer-title"
                 tabIndex={-1}
-                onClick={e => e.stopPropagation()}
             >
                 <div className="flex justify-between items-center mb-4">
                     <h2 id="voice-designer-title" className="text-xl font-orbitron text-purple-400">VOICE DESIGNER <span className="text-xs text-gray-500 ml-2">(WebGPU)</span></h2>