xRangerDEandClaude Opus 4.7
afef213b45
All five modal-overlay containers (update, clip-cutter, events-viewer, chat-viewer, template-guide) were rendering as plain divs from an accessibility perspective. Screen readers would announce nothing distinguishing when one of them opened, and the close-X buttons would read as "x button" with no semantic meaning. Added on each .modal-overlay: - role="dialog" — tells assistive tech this is a modal region - aria-modal="true" — instructs the reader to ignore content outside the dialog while it is open (matches the keyboard escape + click- outside-to-dismiss behavior the renderer already implements) - aria-labelledby="<existingTitleId>" — every modal already had a uniquely-IDd h2; pointed each dialog at its own title so the reader announces e.g. "Stream events dialog" on open Added on each .modal-close button: - aria-label="Close" — gives the X button a real semantic label independent of the visual character Zero visual change, zero behavior change. Just makes the app actually usable for someone running NVDA/JAWS/Orca/VoiceOver. WCAG 4.1.2 + 2.1.1 + 1.3.1 alignment. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>