From 5e4b9ae439f8fd60cd02e09e00d0227fc060acca Mon Sep 17 00:00:00 2001
From: Storm Dragon <stormdragon2976@gmail.com>
Date: Fri, 28 Nov 2025 00:11:51 -0500
Subject: [PATCH] Fixed problems with radio button grouping. Also added
 headings to chat area.

---
 static/galene.html | 41 ++++++++++++++++++++++-------------------
 static/galene.js   | 14 +++++++++++---
 2 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/static/galene.html b/static/galene.html
index bd31c52..7222d50 100644
--- a/static/galene.html
+++ b/static/galene.html
@@ -29,7 +29,7 @@
           <header>
             <nav class="topnav navbar navbar-expand navbar-light fixed-top">
               <div id="header">
-                <button class="collapse" aria-label="Collapse left panel" id="sidebarCollapse">
+                <button class="collapse" aria-label="Toggle left panel" aria-expanded="true" id="sidebarCollapse">
                   <i class="fas fa-align-left" aria-hidden="true"></i>
                 </button>
                 <h1 id="title" class="header-title">Galène</h1>
@@ -73,6 +73,7 @@
                   <button class="close-chat" id="close-chat" aria-label="Hide chat">
                     <span class="close-icon"></span>
                   </button>
+                  <h2 id="chat-history-heading" class="sr-only">Chat History</h2>
                   <div id="box"></div>
                   <div id="chat-announcements" aria-live="polite" aria-atomic="true" class="sr-only"></div>
                   <div class="reply">
@@ -116,21 +117,23 @@
                       <input id="password" type="password" name="password"
                              autocomplete="current-password" class="form-control"/>
                     </div>
-                    <label>Enable at start:</label>
-                    <div class="present-switch">
-                      <p class="switch-radio">
-                        <input id="presentoff" type="radio" name="presentradio" value="" checked/>
-                        <label for="presentoff">Nothing</label>
-                      </p>
-                      <p class="switch-radio">
-                        <input id="presentmike" type="radio" name="presentradio" value="mike"/>
-                        <label for="presentmike">Microphone</label>
-                      </p>
-                      <p class="switch-radio">
-                        <input id="presentboth" type="radio" name="presentradio" value="both"/>
-                        <label for="presentboth">Camera and microphone</label>
-                      </p>
-                    </div>
+                    <fieldset>
+                      <legend>Enable at start:</legend>
+                      <div class="present-switch">
+                        <p class="switch-radio">
+                          <input id="presentoff" type="radio" name="presentradio" value="" checked/>
+                          <label for="presentoff">Nothing</label>
+                        </p>
+                        <p class="switch-radio">
+                          <input id="presentmike" type="radio" name="presentradio" value="mike"/>
+                          <label for="presentmike">Microphone</label>
+                        </p>
+                        <p class="switch-radio">
+                          <input id="presentboth" type="radio" name="presentradio" value="both"/>
+                          <label for="presentboth">Camera and microphone</label>
+                        </p>
+                      </div>
+                    </fieldset>
                     <div class="clear"></div>
                     <div class="connect">
                       <input id="connectbutton" type="submit" class="btn btn-blue" value="Connect"/>
@@ -159,11 +162,11 @@
             <div class="profile-info">
               <span id="userspan"></span>
               <span id="permspan"></span>
-              <span id="chpwspan" class="invisible"><a id="change-password">Change password</a></span>
+              <span id="chpwspan" class="invisible"><a id="change-password" aria-label="Change password">Change password</a></span>
             </div>
             <div class="user-logout">
-              <a id="disconnectbutton">
-                <span class="logout-icon"><i class="fas fa-sign-out-alt"></i></span>
+              <a id="disconnectbutton" aria-label="Logout">
+                <span class="logout-icon"><i class="fas fa-sign-out-alt" aria-hidden="true"></i></span>
                 <span class="logout-text">Logout</span>
               </a>
             </div>
diff --git a/static/galene.js b/static/galene.js
index f0c3fd1..4f6942f 100644
--- a/static/galene.js
+++ b/static/galene.js
@@ -3441,7 +3441,7 @@ function addToChatbox(id, peerId, dest, nick, time, privileged, history, kind, m
         }
 
         if(doHeader) {
-            let header = document.createElement('p');
+            let header = document.createElement('h3');
             let user = document.createElement('span');
             let u = dest && serverConnection.users[dest];
             let name = (u && u.username);
@@ -4523,15 +4523,23 @@ function closeNav() {
 }
 
 document.getElementById('sidebarCollapse').onclick = function(e) {
-    document.getElementById("left-sidebar").classList.toggle("active");
+    let sidebar = document.getElementById("left-sidebar");
+    sidebar.classList.toggle("active");
     document.getElementById("mainrow").classList.toggle("full-width-active");
+    // Update aria-expanded to reflect the state
+    let isCollapsed = sidebar.classList.contains("active");
+    e.currentTarget.setAttribute("aria-expanded", isCollapsed ? "false" : "true");
 };
 
 document.getElementById('sidebarCollapse').onkeydown = function(e) {
     if(e.key === 'Enter' || e.key === ' ') {
         e.preventDefault();
-        document.getElementById("left-sidebar").classList.toggle("active");
+        let sidebar = document.getElementById("left-sidebar");
+        sidebar.classList.toggle("active");
         document.getElementById("mainrow").classList.toggle("full-width-active");
+        // Update aria-expanded to reflect the state
+        let isCollapsed = sidebar.classList.contains("active");
+        e.currentTarget.setAttribute("aria-expanded", isCollapsed ? "false" : "true");
     }
 };