Complete 4.5.2: Screen Reader Support - Implement comprehensive ARIA live regions, attributes, and dynamic announcements

This commit is contained in:
VinnyNC 2025-09-30 19:08:23 -04:00
parent 4a9941aa9a
commit 8d7b7dfe80
4 changed files with 382 additions and 2 deletions

View file

@ -516,6 +516,15 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
<!-- Legacy Toast Notification (deprecated) -->
<div class="toast" id="toast" style="display: none;"></div>
<!-- Screen Reader Announcement Regions -->
<div id="sr-stream-announcer" class="sr-only" aria-live="assertive" aria-atomic="true" aria-label="Stream status announcements"></div>
<div id="sr-connection-announcer" class="sr-only" aria-live="assertive" aria-atomic="true" aria-label="Connection status announcements"></div>
<div id="sr-system-announcer" class="sr-only" aria-live="assertive" aria-atomic="true" aria-label="System announcements"></div>
<div id="sr-message-group-announcer" class="sr-only" aria-live="polite" aria-atomic="true" aria-label="Message group announcements"></div>
<div id="sr-viewer-announcer" class="sr-only" aria-live="polite" aria-atomic="true" aria-label="Viewer count announcements"></div>
<div id="sr-activity-announcer" class="sr-only" aria-live="polite" aria-atomic="true" aria-label="Activity announcements"></div>
<div id="sr-form-announcer" class="sr-only" aria-live="assertive" aria-atomic="true" aria-label="Form validation announcements"></div>
<!-- Mobile Bottom Navigation -->
<nav class="mobile-nav" id="mobileNav" role="navigation" aria-label="Mobile navigation">
<button class="mobile-nav-btn" data-action="toggle-chat" aria-label="Toggle chat" aria-expanded="false">
@ -548,6 +557,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
<script src="https://vjs.zencdn.net/8.6.1/video.min.js"></script>
<script defer src="assets/js/app.js?v=1.4.4"></script>
<script defer src="assets/js/api.js?v=1.4.4"></script>
<script defer src="assets/js/screen-reader.js?v=1.4.4"></script>
<script defer src="assets/js/ui-controls.js?v=1.4.4"></script>
<script defer src="assets/js/chat.js?v=1.4.4"></script>
<script defer src="assets/js/video-player.js?v=1.4.4"></script>