🎨 Palette: Improve background overlay accessibility in modals#435
🎨 Palette: Improve background overlay accessibility in modals#435
Conversation
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, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
💡 What: Standardized background overlay implementation for modale dialogs.
🎯 Why: Having
onClickbound to the main wrapper or an overlay withoutaria-hidden="true"causes screen readers to pick up the entire background as an interactive element.📸 Before/After: Visuals remain unchanged, but the DOM structure ensures the click handler is attached to a hidden sibling of the dialog rather than its parent wrapper.
♿ Accessibility: Ensures assistive technologies ignore the modal backdrop overlay while maintaining its click-to-dismiss behavior.
PR created automatically by Jules for task 6973499334968866107 started by @ford442