More screen reader accessibility fixes.

distro-packages/Arch-Linux/skald-git/PKGBUILD

@@ -2,7 +2,7 @@
 # shellcheck shell=bash disable=SC2034,SC2154
 
 pkgname=skald-git
-pkgver=0.0.0.r1528.gaac197e
+pkgver=0.0.0.r1529.g486ce7f
 pkgrel=1
 pkgdesc='Audio-only hall-based conferencing server'
 arch=('x86_64' 'aarch64')

static/skald.html

@@ -69,8 +69,6 @@
                   </button>
                   <h2 id="chat-history-heading" class="sr-only">Chat History</h2>
                   <div id="box"></div>
-                  <div id="chat-announcements" role="status" aria-live="polite" aria-atomic="true" class="sr-only"></div>
-                  <div id="urgent-announcements" role="alert" aria-live="assertive" aria-atomic="true" class="sr-only"></div>
                   <div id="audio-streams" aria-hidden="true"></div>
                   <div class="reply">
                     <form id="inputform">
@@ -81,7 +79,7 @@
                 </div>
               </div>
             </div>
-            <div id="resizer" class="connected-only invisible" aria-hidden="true" tabindex="0" role="separator" aria-label="Chat resize handle" aria-orientation="vertical" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" aria-valuetext="Chat width 50 percent"></div>
+            <div id="resizer" class="connected-only invisible" aria-hidden="true" tabindex="0" role="separator" aria-label="Resize chat panel with Left and Right Arrow" aria-orientation="vertical" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" aria-valuetext="Chat width 50 percent"></div>
             <div class="coln-right" id="right">
               <button class="chat-btn show-chat invisible" id="show-chat" aria-label="Show chat">
                 <i class="far fa-comment-alt icon-chat" aria-hidden="true"></i>
@@ -115,6 +113,8 @@
         </div>
       </div>
     </main>
+    <div id="chat-announcements" role="status" aria-live="polite" aria-atomic="true" class="sr-only"></div>
+    <div id="urgent-announcements" role="alert" aria-live="assertive" aria-atomic="true" class="sr-only"></div>
 
     <aside id="sidebarnav" class="sidenav connected-only invisible" aria-hidden="true" aria-label="Settings">
       <div class="sidenav-header">
@@ -198,8 +198,9 @@
 
 
 
-    <dialog id="invite-dialog">
+    <dialog id="invite-dialog" aria-labelledby="invite-dialog-title">
       <form method="dialog">
+        <h2 id="invite-dialog-title" class="sr-only">Invite user</h2>
         <label for="invite-username">Username (optional):</label>
         <input id="invite-username" type="text"/>
         <br>

static/skald.js

@@ -435,10 +435,10 @@ function setConnected(connected) {
         for(let elt of document.querySelectorAll('.connected-only')) {
             if(connected) {
                 elt.classList.remove('invisible');
-                elt.removeAttribute('aria-hidden');
+                setAccessibleHidden(elt, false);
             } else {
                 elt.classList.add('invisible');
-                elt.setAttribute('aria-hidden', 'true');
+                setAccessibleHidden(elt, true);
             }
         }
     }
@@ -2200,6 +2200,12 @@ function gotFileTransfer(f) {
     div.classList.add('message-row');
     let box = document.getElementById('box');
     box.appendChild(div);
+    if(!f.up) {
+        announceChat(
+            `File offer from ${f.username}: ${f.name}. ` +
+            'Choosing Accept will disclose your IP address.',
+        );
+    }
     return div;
 }
 
@@ -3620,6 +3626,7 @@ document.getElementById('resizer').addEventListener('keydown', function(e) {
 function displayError(message, level) {
     if(!level)
         level = "error";
+    let text = String(message);
     let position = 'center';
     let gravity = 'top';
 
@@ -3635,9 +3642,14 @@ function displayError(message, level) {
         break;
     }
 
+    if(level === "info")
+        announceChat(text);
+    else
+        announceUrgent(text);
+
     /** @ts-ignore */
     Toastify({
-        text: message,
+        text: text,
         duration: 8000,  // Increased from 4000 for screen reader users
         close: true,
         position: position,
@@ -3742,6 +3754,13 @@ function toggleLeftPanel() {
     );
 }
 
+function setChatPanelVisible(visible) {
+    let chatPanel = document.getElementById('left');
+    setVisibility('left', visible);
+    if(chatPanel)
+        setAccessibleHidden(chatPanel, !visible);
+}
+
 document.getElementById('sidebarCollapse').onclick = function(e) {
     e.preventDefault();
     toggleLeftPanel();
@@ -3762,7 +3781,7 @@ document.getElementById('closeside').onclick = function(e) {
 
 document.getElementById('close-chat').onclick = function(e) {
     e.preventDefault();
-    setVisibility('left', false);
+    setChatPanelVisible(false);
     setVisibility('show-chat', true);
     resizePeers();
     document.getElementById('show-chat').focus();
@@ -3770,7 +3789,7 @@ document.getElementById('close-chat').onclick = function(e) {
 
 document.getElementById('show-chat').onclick = function(e) {
     e.preventDefault();
-    setVisibility('left', true);
+    setChatPanelVisible(true);
     setVisibility('show-chat', false);
     resizePeers();
     document.getElementById('close-chat').focus();
@@ -3891,7 +3910,7 @@ document.addEventListener('keydown', function(e) {
 
         if(isChatVisible) {
             // Collapse chat
-            setVisibility('left', false);
+            setChatPanelVisible(false);
             setVisibility('show-chat', true);
             resizePeers();
 
@@ -3909,7 +3928,7 @@ document.addEventListener('keydown', function(e) {
             }, 100);
         } else {
             // Expand chat
-            setVisibility('left', true);
+            setChatPanelVisible(true);
             setVisibility('show-chat', false);
             resizePeers();