From afef213b450f9d60bc951d013a35a9419734714d Mon Sep 17 00:00:00 2001 From: xRangerDE Date: Mon, 11 May 2026 01:50:26 +0200 Subject: [PATCH] a11y: dialog roles + aria-labelledby + aria-label on modal closes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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="" — 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) --- src/index.html | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/index.html b/src/index.html index 58df13f..dfa9a05 100644 --- a/src/index.html +++ b/src/index.html @@ -18,9 +18,9 @@ -