From 8d41a60ac49d5a4bfbb838fae2100f6be1f12d97 Mon Sep 17 00:00:00 2001
From: VinnyNC <vinny@vlyons.net>
Date: Tue, 30 Sep 2025 18:54:16 -0400
Subject: [PATCH] Complete 4.5.2: Screen Reader Support - Add ARIA live regions
 and enhanced attributes for accessibility

---
 index.php | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/index.php b/index.php
index efa7b07..952d6cd 100644
--- a/index.php
+++ b/index.php
@@ -341,10 +341,10 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
                             <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                         </svg>
                     </div>
-                    <div class="stats-card__content">
-                        <div class="stats-card__value" id="statsViewersCount">0</div>
-                        <div class="stats-card__label">Active Viewers</div>
-                    </div>
+                <div class="stats-card__content">
+                    <div class="stats-card__value" id="statsViewersCount" aria-live="polite" aria-label="Active viewers count">0</div>
+                    <div class="stats-card__label">Active Viewers</div>
+                </div>
                 </div>
 
                 <div class="stats-card">
@@ -356,7 +356,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
                         </svg>
                     </div>
                     <div class="stats-card__content">
-                        <div class="stats-card__value" id="statsStreamQuality">HD</div>
+                        <div class="stats-card__value" id="statsStreamQuality" aria-live="polite" aria-label="Current stream quality">HD</div>
                         <div class="stats-card__label">Stream Quality</div>
                     </div>
                 </div>
@@ -369,7 +369,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
                         </svg>
                     </div>
                     <div class="stats-card__content">
-                        <div class="stats-card__value" id="statsUptime">00:00</div>
+                        <div class="stats-card__value" id="statsUptime" aria-live="polite" aria-label="Stream uptime">00:00</div>
                         <div class="stats-card__label">Stream Uptime</div>
                     </div>
                 </div>
@@ -380,7 +380,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
                     <header class="widget__header">
                         <h3 class="widget__title">Recent Activity</h3>
                     </header>
-                    <div class="widget__content" id="recentActivity">
+                    <div class="widget__content" id="recentActivity" aria-live="polite" aria-label="Recent activity updates">
                         <div class="activity-item">
                             <div class="activity-item__avatar">🎥</div>
                             <div class="activity-item__content">
@@ -395,7 +395,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
                     <header class="widget__header">
                         <h3 class="widget__title">Active Users</h3>
                     </header>
-                    <div class="widget__content" id="activeUsers">
+                    <div class="widget__content" id="activeUsers" aria-live="polite" aria-label="Active users list">
                         <div class="user-item">
                             <div class="user-item__status online"></div>
                             <div class="user-item__nickname">Welcome to chat!</div>
@@ -468,7 +468,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
                 </div>
                 <div class="form-group">
                     <div class="chat__nickname-input">
-                        <input type="text" id="nickname" placeholder="Choose a nickname..." maxlength="20" autocomplete="off" aria-label="Enter your nickname">
+                        <input type="text" id="nickname" placeholder="Choose a nickname..." maxlength="20" autocomplete="off" aria-label="Enter your nickname" aria-describedby="nicknameError">
                     </div>
                     <div class="form-error" id="nicknameError" style="display: none;"></div>
                 </div>
@@ -491,7 +491,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
                 <h3 id="chat-input-heading" class="sr-only">Send Message</h3>
                 <div class="form-group">
                     <div class="chat__input-group">
-                        <input type="text" id="messageInput" placeholder="Type a message..." maxlength="1000" autocomplete="off" aria-label="Type your message">
+                        <input type="text" id="messageInput" placeholder="Type a message..." maxlength="1000" autocomplete="off" aria-label="Type your message" aria-describedby="messageError">
                         <button data-action="send-message" aria-label="Send message">Send</button>
                     </div>
                     <div class="form-error" id="messageError" style="display: none;"></div>