Fix accessible panel toggles

static/skald.html

@@ -29,7 +29,7 @@
           <header class="connected-only invisible" aria-hidden="true">
             <nav class="topnav navbar navbar-expand navbar-light fixed-top">
               <div id="header">
-                <button class="collapse" aria-label="Toggle left panel" aria-expanded="true" id="sidebarCollapse">
+                <button class="collapse" aria-label="Toggle left panel" aria-expanded="true" aria-controls="left-sidebar" id="sidebarCollapse">
                   <i class="fas fa-align-left" aria-hidden="true"></i>
                 </button>
                 <h1 id="title" class="header-title">Skald</h1>
@@ -54,7 +54,7 @@
                 </li>
 
                 <li>
-                  <button class="nav-button nav-link nav-more" id="openside" aria-label="More options" aria-haspopup="true">
+                  <button class="nav-button nav-link nav-more" id="openside" aria-label="More options" aria-haspopup="true" aria-expanded="false" aria-controls="sidebarnav">
                     <span><i class="fas fa-ellipsis-v" aria-hidden="true"></i></span>
                   </button>
                 </li>

static/skald.js

@@ -447,6 +447,8 @@ function setConnected(connected) {
             clearChat();
         userbox.classList.remove('invisible');
         connectionbox.classList.add('invisible');
+        closeNav();
+        setLeftPanelExpanded(true);
         displayUsername();
         window.onresize = function(e) {
             scheduleReconsiderDownRate();
@@ -3604,57 +3606,73 @@ document.getElementById('disconnectbutton').onclick = function(e) {
     closeNav();
 };
 
+/**
+ * @param {HTMLElement} elt
+ * @param {boolean} hidden
+ */
+function setAccessibleHidden(elt, hidden) {
+    if(hidden) {
+        elt.setAttribute('aria-hidden', 'true');
+        elt.inert = true;
+    } else {
+        elt.removeAttribute('aria-hidden');
+        elt.inert = false;
+    }
+}
+
 function openNav() {
-    document.getElementById("sidebarnav").style.width = "250px";
+    let sidebarnav = document.getElementById("sidebarnav");
+    let openside = document.getElementById("openside");
+    sidebarnav.style.width = "250px";
+    setAccessibleHidden(sidebarnav, false);
+    openside.setAttribute("aria-expanded", "true");
 }
 
 function closeNav() {
-    document.getElementById("sidebarnav").style.width = "0";
+    let sidebarnav = document.getElementById("sidebarnav");
+    let openside = document.getElementById("openside");
+    sidebarnav.style.width = "0";
+    setAccessibleHidden(sidebarnav, true);
+    openside.setAttribute("aria-expanded", "false");
+    if(sidebarnav.contains(document.activeElement))
+        openside.focus();
+}
+
+function toggleNav() {
+    let sidebarnav = document.getElementById("sidebarnav");
+    if(sidebarnav.getAttribute("aria-hidden") === "true")
+        openNav();
+    else
+        closeNav();
+}
+
+function setLeftPanelExpanded(expanded) {
+    let sidebar = document.getElementById("left-sidebar");
+    let mainrow = document.getElementById("mainrow");
+    let sidebarCollapse = document.getElementById("sidebarCollapse");
+    sidebar.classList.toggle("active", !expanded);
+    mainrow.classList.toggle("full-width-active", !expanded);
+    sidebarCollapse.setAttribute("aria-expanded", expanded ? "true" : "false");
+    setAccessibleHidden(sidebar, !expanded);
+    if(!expanded && sidebar.contains(document.activeElement))
+        sidebarCollapse.focus();
+}
+
+function toggleLeftPanel() {
+    let sidebarCollapse = document.getElementById("sidebarCollapse");
+    setLeftPanelExpanded(
+        sidebarCollapse.getAttribute("aria-expanded") !== "true",
+    );
 }
 
 document.getElementById('sidebarCollapse').onclick = function(e) {
-    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();
-        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");
-    }
+    e.preventDefault();
+    toggleLeftPanel();
 };
 
 document.getElementById('openside').onclick = function(e) {
-      e.preventDefault();
-      let sidewidth = document.getElementById("sidebarnav").style.width;
-      if (sidewidth !== "0px" && sidewidth !== "") {
-          closeNav();
-          return;
-      } else {
-          openNav();
-      }
-};
-
-document.getElementById('openside').onkeydown = function(e) {
-      if(e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault();
-          let sidewidth = document.getElementById("sidebarnav").style.width;
-          if (sidewidth !== "0px" && sidewidth !== "") {
-              closeNav();
-              return;
-          } else {
-              openNav();
-          }
-      }
+    e.preventDefault();
+    toggleNav();
 };
 
 
@@ -3663,13 +3681,6 @@ document.getElementById('closeside').onclick = function(e) {
     closeNav();
 };
 
-document.getElementById('closeside').onkeydown = function(e) {
-    if(e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault();
-        closeNav();
-    }
-};
-
 
 
 document.getElementById('close-chat').onclick = function(e) {