Fixed problems with radio button grouping. Also added headings to chat area.

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,7 +117,8 @@
                       <input id="password" type="password" name="password"
                              autocomplete="current-password" class="form-control"/>
                     </div>
-                    <label>Enable at start:</label>
+                    <fieldset>
+                      <legend>Enable at start:</legend>
                       <div class="present-switch">
                         <p class="switch-radio">
                           <input id="presentoff" type="radio" name="presentradio" value="" checked/>
@@ -131,6 +133,7 @@
                           <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">
+              <a id="disconnectbutton" aria-label="Logout">
-                <span class="logout-icon"><i class="fas fa-sign-out-alt"></i></span>
+                <span class="logout-icon"><i class="fas fa-sign-out-alt" aria-hidden="true"></i></span>
                 <span class="logout-text">Logout</span>
               </a>
             </div>

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");
     }
 };