From 486ce7fb4c8e8d4120fdbb7cff1ef00e07473960 Mon Sep 17 00:00:00 2001
From: Storm Dragon <stormdragon2976@gmail.com>
Date: Fri, 22 May 2026 14:25:16 -0400
Subject: [PATCH] More ui accessibility improvements.

---
 distro-packages/Arch-Linux/skald-git/PKGBUILD |   2 +-
 static/skald.css                              |  98 ++++--
 static/skald.html                             |   4 +-
 static/skald.js                               | 305 ++++++++++--------
 4 files changed, 256 insertions(+), 153 deletions(-)

diff --git a/distro-packages/Arch-Linux/skald-git/PKGBUILD b/distro-packages/Arch-Linux/skald-git/PKGBUILD
index 901eb0f..b33a353 100644
--- a/distro-packages/Arch-Linux/skald-git/PKGBUILD
+++ b/distro-packages/Arch-Linux/skald-git/PKGBUILD
@@ -2,7 +2,7 @@
 # shellcheck shell=bash disable=SC2034,SC2154
 
 pkgname=skald-git
-pkgver=0.0.0.r1527.g47d1308
+pkgver=0.0.0.r1528.gaac197e
 pkgrel=1
 pkgdesc='Audio-only hall-based conferencing server'
 arch=('x86_64' 'aarch64')
diff --git a/static/skald.css b/static/skald.css
index 8f05f0a..032aabc 100644
--- a/static/skald.css
+++ b/static/skald.css
@@ -1,6 +1,6 @@
 /* Accessibility: Visible focus indicators for keyboard navigation */
 button:focus,
-[role="button"]:focus,
+[role="separator"]:focus,
 select:focus,
 input:focus,
 textarea:focus,
@@ -1003,38 +1003,50 @@ header .collapse:hover {
 }
 
 #users .user-p {
+    display: block;
     position: relative;
     padding: 10px !important;
     border-bottom: 1px solid #f0f0f0;
+    border-left: 0;
+    border-right: 0;
+    border-top: 0;
     height: 40px;
     line-height: 18px;
     margin: 0 !important;
     cursor: pointer;
     overflow: hidden;
     white-space: pre;
+    width: 100%;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: left;
 }
 
-#left-sidebar.active #users > div {
+#left-sidebar.active #users > .user-p {
     padding: 10px 5px !important;
 }
 
-#users > div:hover {
+#users > .user-p:hover,
+#users > .user-p:focus {
     background-color: #f2f2f2;
 }
 
-#users > div::before {
-    content: "\f111";
-    font-family: 'Font Awesome 6 Free';
+#users .user-status-icon {
     color: #20b91e;
     margin-right: 5px;
     font-weight: 900;
 }
 
-#users > div.user-status-raisehand::before {
+#users .user-status-icon::before {
+    content: "\f111";
+}
+
+#users .user-status-raisehand .user-status-icon::before {
     content: "\f256";
 }
 
-#users > div::after {
+#users .user-microphone-icon {
     font-family: 'Font Awesome 6 Free';
     color: #808080;
     margin-left: 5px;
@@ -1042,7 +1054,7 @@ header .collapse:hover {
     float: right;
 }
 
-#users > div.user-status-microphone::after {
+#users .user-microphone-icon::before {
     content: "\f130";
 }
 
@@ -1186,22 +1198,64 @@ header .collapse:hover {
     color: #000;
 }
 
-:root{
-    --contextualMenuBg: #eee;
-    --contextualMenuShadow: 1px 1px 1px #444; */
-    --contextualMenuRadius: 0px; */
-    --contextualMenuText: black;
-
-    --contextualSubMenuBg: #eee;
-
-    --contextualHover: #ddd;
-
-    --contextualOverflowIcon: #999;
-    --contextualSeperator: #999;
+:root {
+    --skald-menu-bg: #eee;
+    --skald-menu-shadow: 1px 1px 1px #444;
+    --skald-menu-radius: 0;
+    --skald-menu-text: black;
+    --skald-menu-hover: #ddd;
+    --skald-menu-separator: #999;
 }
 
-.contextualMenu{
+.skald-action-menu {
+    position: absolute;
     z-index: 2999;
+    margin: 0;
+    padding: 8px 0;
+    min-width: 14em;
+    list-style: none;
+    background: var(--skald-menu-bg);
+    box-shadow: var(--skald-menu-shadow);
+    border-radius: var(--skald-menu-radius);
+    color: var(--skald-menu-text);
+    font-size: 13px;
+}
+
+.skald-action-menu li {
+    margin: 0;
+    padding: 0;
+}
+
+.skald-action-menu-item {
+    width: 100%;
+    border: 0;
+    padding: 5px 8px;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    font: inherit;
+    text-align: left;
+}
+
+.skald-action-menu-item:focus,
+.skald-action-menu-item:hover {
+    background: var(--skald-menu-hover);
+}
+
+.skald-action-menu-separator {
+    border-top: 1px solid var(--skald-menu-separator);
+    margin: 5px 0;
+    padding: 0;
+}
+
+.message-actions {
+    margin-left: 0.5em;
+    border: 0;
+    background: transparent;
+    color: #404064;
+    cursor: pointer;
+    font: inherit;
+    text-decoration: underline;
 }
 
 .file-progress {
diff --git a/static/skald.html b/static/skald.html
index 0563446..e722a95 100644
--- a/static/skald.html
+++ b/static/skald.html
@@ -12,7 +12,6 @@
     <link rel="stylesheet" type="text/css" href="/third-party/fontawesome/css/solid.min.css"/>
     <link rel="stylesheet" type="text/css" href="/third-party/fontawesome/css/regular.min.css"/>
     <link rel="stylesheet" type="text/css" href="/third-party/toastify/toastify.css"/>
-    <link rel="stylesheet" type="text/css" href="/third-party/contextual/contextual.css"/>
   </head>
 
   <body>
@@ -82,7 +81,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"></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 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>
@@ -217,7 +216,6 @@
 
     <script src="/protocol.js" defer></script>
     <script src="/third-party/toastify/toastify.js" defer></script>
-    <script src="/third-party/contextual/contextual.js" defer></script>
     <script src="/skald.js" defer></script>
   </body>
 </html>
diff --git a/static/skald.js b/static/skald.js
index 77854bc..8352325 100644
--- a/static/skald.js
+++ b/static/skald.js
@@ -449,6 +449,7 @@ function setConnected(connected) {
         connectionbox.classList.add('invisible');
         closeNav();
         setLeftPanelExpanded(true);
+        updateChatResizerValueFromLayout();
         displayUsername();
         window.onresize = function(e) {
             scheduleReconsiderDownRate();
@@ -1632,55 +1633,115 @@ document.getElementById('invite-dialog').onclose = function(e) {
     makeToken(template);
 };
 
+let currentActionMenu = null;
+let currentActionMenuTrigger = null;
+
+function closeActionMenu(restoreFocus) {
+    document.removeEventListener('click', closeActionMenuOnOutside);
+    if(currentActionMenu)
+        currentActionMenu.remove();
+    if(currentActionMenuTrigger)
+        currentActionMenuTrigger.setAttribute('aria-expanded', 'false');
+    if(restoreFocus && currentActionMenuTrigger)
+        currentActionMenuTrigger.focus();
+    currentActionMenu = null;
+    currentActionMenuTrigger = null;
+}
+
+function canModerateChat() {
+    return !!(serverConnection && serverConnection.permissions &&
+              serverConnection.permissions.indexOf('op') >= 0);
+}
+
 /**
- * Adds keyboard navigation to Contextual menu
- * @param {HTMLElement} menuElement
+ * @param {{label?: string, type?: string, onClick?: function(): void}[]} items
+ * @param {HTMLElement} trigger
+ * @param {string} label
  */
-function makeContextualMenuAccessible(menuElement) {
-    // Find all menu items
-    let menuItems = menuElement.querySelectorAll('.contextualMenuItem:not(.disabled)');
-    if(menuItems.length === 0) return;
+function openActionMenu(items, trigger, label) {
+    closeActionMenu(false);
 
-    let currentIndex = 0;
+    let menu = document.createElement('ul');
+    menu.classList.add('skald-action-menu');
+    menu.setAttribute('role', 'menu');
+    menu.setAttribute('aria-label', label);
 
-    // Make menu items focusable and add ARIA
-    menuItems.forEach((item, index) => {
-        item.setAttribute('role', 'menuitem');
-        item.setAttribute('tabindex', index === 0 ? '0' : '-1');
-    });
-
-    // Focus first item
-    menuItems[0].focus();
-
-    // Add keyboard navigation
-    menuElement.addEventListener('keydown', function(e) {
-        if(e.key === 'Escape') {
-            e.preventDefault();
-            contextualCore.CloseMenu();
+    let buttons = [];
+    items.forEach(item => {
+        let li = document.createElement('li');
+        if(item.type === 'seperator') {
+            li.classList.add('skald-action-menu-separator');
+            li.setAttribute('role', 'separator');
+            menu.appendChild(li);
             return;
         }
 
-        if(e.key === 'ArrowDown') {
+        let button = document.createElement('button');
+        button.type = 'button';
+        button.classList.add('skald-action-menu-item');
+        button.setAttribute('role', 'menuitem');
+        button.textContent = item.label || 'Action';
+        button.addEventListener('click', function(e) {
+            e.stopPropagation();
+            closeActionMenu(true);
+            if(item.onClick)
+                item.onClick();
+        });
+        li.appendChild(button);
+        menu.appendChild(li);
+        buttons.push(button);
+    });
+
+    if(buttons.length === 0)
+        return;
+
+    menu.addEventListener('click', function(e) {
+        e.stopPropagation();
+    });
+    menu.addEventListener('keydown', function(e) {
+        let index = buttons.indexOf(document.activeElement);
+        if(e.key === 'Escape') {
             e.preventDefault();
-            menuItems[currentIndex].setAttribute('tabindex', '-1');
-            currentIndex = (currentIndex + 1) % menuItems.length;
-            menuItems[currentIndex].setAttribute('tabindex', '0');
-            menuItems[currentIndex].focus();
+            closeActionMenu(true);
+        } else if(e.key === 'ArrowDown') {
+            e.preventDefault();
+            buttons[(index + 1 + buttons.length) % buttons.length].focus();
         } else if(e.key === 'ArrowUp') {
             e.preventDefault();
-            menuItems[currentIndex].setAttribute('tabindex', '-1');
-            currentIndex = currentIndex === 0 ? menuItems.length - 1 : currentIndex - 1;
-            menuItems[currentIndex].setAttribute('tabindex', '0');
-            menuItems[currentIndex].focus();
-        } else if(e.key === 'Enter' || e.key === ' ') {
+            buttons[(index - 1 + buttons.length) % buttons.length].focus();
+        } else if(e.key === 'Home') {
             e.preventDefault();
-            // Click the parent li element which has the actual click handler
-            let parentLi = menuItems[currentIndex].parentElement;
-            if(parentLi) {
-                parentLi.click();
-            }
+            buttons[0].focus();
+        } else if(e.key === 'End') {
+            e.preventDefault();
+            buttons[buttons.length - 1].focus();
         }
     });
+
+    document.body.appendChild(menu);
+    currentActionMenu = menu;
+    currentActionMenuTrigger = trigger;
+    trigger.setAttribute('aria-haspopup', 'menu');
+    trigger.setAttribute('aria-expanded', 'true');
+
+    let rect = trigger.getBoundingClientRect();
+    let left = rect.left;
+    let top = rect.bottom;
+    if(left + menu.offsetWidth > window.innerWidth)
+        left = Math.max(0, window.innerWidth - menu.offsetWidth);
+    if(top + menu.offsetHeight > window.innerHeight)
+        top = Math.max(0, rect.top - menu.offsetHeight);
+    menu.style.left = `${left}px`;
+    menu.style.top = `${top}px`;
+
+    window.setTimeout(() => {
+        document.addEventListener('click', closeActionMenuOnOutside);
+    }, 0);
+    buttons[0].focus();
+}
+
+function closeActionMenuOnOutside() {
+    closeActionMenu(false);
 }
 
 /**
@@ -1740,19 +1801,7 @@ function userMenu(elt) {
             }});
         }
     }
-    /** @ts-ignore */
-    new Contextual({
-        items: items,
-    });
-
-    // Add keyboard navigation after menu is created
-    setTimeout(() => {
-        let menu = document.querySelector('.contextualMenu');
-        if(menu) {
-            menu.setAttribute('role', 'menu');
-            makeContextualMenuAccessible(menu);
-        }
-    }, 0);
+    openActionMenu(items, elt, `Actions for ${user.username || 'participant'}`);
 }
 
 /**
@@ -1761,27 +1810,32 @@ function userMenu(elt) {
  */
 function addUser(id, userinfo) {
     let div = document.getElementById('users');
-    let user = document.createElement('div');
+    let user = document.createElement('button');
     user.id = 'user-' + id;
+    user.type = 'button';
     user.classList.add("user-p");
-    user.setAttribute('role', 'button');
-    user.setAttribute('tabindex', '0');
+    user.setAttribute('aria-haspopup', 'menu');
+    user.setAttribute('aria-expanded', 'false');
+    let statusIcon = document.createElement('span');
+    statusIcon.classList.add('user-status-icon', 'fas');
+    statusIcon.setAttribute('aria-hidden', 'true');
+    user.appendChild(statusIcon);
+    let name = document.createElement('span');
+    name.classList.add('user-name');
+    user.appendChild(name);
+    let microphoneIcon = document.createElement('span');
+    microphoneIcon.classList.add('user-microphone-icon', 'fas');
+    microphoneIcon.setAttribute('aria-hidden', 'true');
+    microphoneIcon.hidden = true;
+    user.appendChild(microphoneIcon);
     setUserStatus(id, user, userinfo, false);
     user.addEventListener('click', function(e) {
+        e.stopPropagation();
         let elt = e.currentTarget;
         if(!elt || !(elt instanceof HTMLElement))
-            throw new Error("Couldn't find user div");
+            throw new Error("Couldn't find user button");
         userMenu(elt);
     });
-    user.addEventListener('keydown', function(e) {
-        if(e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            let elt = e.target;
-            if(!elt || !(elt instanceof HTMLElement))
-                throw new Error("Couldn't find user div");
-            userMenu(elt);
-        }
-    });
 
     let us = div.children;
 
@@ -1832,19 +1886,21 @@ function changeUser(id, userinfo) {
  */
 function setUserStatus(id, elt, userinfo, notify) {
     let username = userinfo.username ? userinfo.username : '(anon)';
-    elt.textContent = username;
+    let name = elt.querySelector('.user-name');
+    if(!name)
+        throw new Error("Couldn't find user name span");
+    if(name.textContent !== username)
+        name.textContent = username;
 
     let wasRaised = elt.classList.contains('user-status-raisehand');
     if(userinfo.data.raisehand) {
         elt.classList.add('user-status-raisehand');
-        elt.setAttribute('aria-label', `${username} (hand raised)`);
         if(notify && !wasRaised) {
             announceUrgent(`${username}: hand raised`);
             playNotificationSound('hand-raised');
         }
     } else {
         elt.classList.remove('user-status-raisehand');
-        elt.setAttribute('aria-label', username);
         if(notify && wasRaised) {
             announceUrgent(`${username}: hand lowered`);
             playNotificationSound('hand-lowered');
@@ -1866,6 +1922,11 @@ function setUserStatus(id, elt, userinfo, notify) {
 
     if(microphone)
         statusParts.push('microphone on');
+    elt.classList.toggle('user-status-microphone', microphone);
+    let microphoneIcon = elt.querySelector('.user-microphone-icon');
+    if(!microphoneIcon)
+        throw new Error("Couldn't find user microphone icon span");
+    microphoneIcon.hidden = !microphone;
     elt.setAttribute('aria-label', statusParts.join(', '));
 }
 
@@ -2559,14 +2620,6 @@ function addToChatbox(id, peerId, dest, nick, time, privileged, history, kind, m
     if(peerId) {
         container.dataset.peerId = peerId;
         container.dataset.username = nick;
-        container.addEventListener('click', function(e) {
-            if(e.detail !== 2)
-                return;
-            let elt = e.currentTarget;
-            if(!elt || !(elt instanceof HTMLElement))
-                throw new Error("Couldn't find chat message div");
-            chatMessageMenu(elt);
-        });
     }
 
     /** @type{HTMLElement} */
@@ -2634,6 +2687,20 @@ function addToChatbox(id, peerId, dest, nick, time, privileged, history, kind, m
         lastMessage = {};
     }
     container.appendChild(footer);
+    if(peerId && canModerateChat()) {
+        let actions = document.createElement('button');
+        actions.type = 'button';
+        actions.classList.add('message-actions');
+        actions.setAttribute('aria-haspopup', 'menu');
+        actions.setAttribute('aria-expanded', 'false');
+        actions.setAttribute('aria-label', `Actions for message from ${nick || '(anon)'}`);
+        actions.textContent = 'Actions';
+        actions.addEventListener('click', function(e) {
+            e.stopPropagation();
+            chatMessageMenu(container, actions);
+        });
+        footer.appendChild(actions);
+    }
 
     let box = document.getElementById('box');
     box.appendChild(row);
@@ -2657,10 +2724,10 @@ function addToChatbox(id, peerId, dest, nick, time, privileged, history, kind, m
 
 /**
  * @param {HTMLElement} elt
+ * @param {HTMLElement} trigger
  */
-function chatMessageMenu(elt) {
-    if(!(serverConnection && serverConnection.permissions &&
-         serverConnection.permissions.indexOf('op') >= 0))
+function chatMessageMenu(elt, trigger) {
+    if(!canModerateChat())
         return;
 
     let messageId = elt.dataset.id;
@@ -2691,19 +2758,7 @@ function chatMessageMenu(elt) {
         serverConnection.userAction('kick', peerId);
     }});
 
-    /** @ts-ignore */
-    new Contextual({
-        items: items,
-    });
-
-    // Add keyboard navigation after menu is created
-    setTimeout(() => {
-        let menu = document.querySelector('.contextualMenu');
-        if(menu) {
-            menu.setAttribute('role', 'menu');
-            makeContextualMenuAccessible(menu);
-        }
-    }, 0);
+    openActionMenu(items, trigger, `Actions for message from ${u}`);
 }
 
 /**
@@ -3480,24 +3535,49 @@ document.getElementById('input').onkeypress = function(e) {
     }
 };
 
+function updateChatResizerValue(leftPercent) {
+    let resizer = document.getElementById('resizer');
+    if(!resizer)
+        return;
+    let rounded = Math.round(leftPercent);
+    resizer.setAttribute('aria-valuenow', rounded.toString());
+    resizer.setAttribute('aria-valuetext', `Chat width ${rounded} percent`);
+}
+
+function updateChatResizerValueFromLayout() {
+    let mainrow = document.getElementById("mainrow");
+    let left = document.getElementById("left");
+    if(!mainrow || !left || mainrow.offsetWidth === 0)
+        return;
+    updateChatResizerValue(left.offsetWidth * 100 / mainrow.offsetWidth);
+}
+
+function setChatWidth(leftPercent) {
+    let full_width = document.getElementById("mainrow").offsetWidth;
+    let left = document.getElementById("left");
+    let right = document.getElementById("right");
+
+    let min_left_width = 300 * 100 / full_width;
+    if(leftPercent < min_left_width)
+        return false;
+
+    left.style.flex = leftPercent.toString();
+    right.style.flex = (100 - leftPercent).toString();
+    updateChatResizerValue(leftPercent);
+    return true;
+}
+
 function chatResizer(e) {
     e.preventDefault();
     let full_width = document.getElementById("mainrow").offsetWidth;
     let left = document.getElementById("left");
-    let right = document.getElementById("right");
 
     let start_x = e.clientX;
     let start_width = left.offsetWidth;
 
     function start_drag(e) {
         let left_width = (start_width + e.clientX - start_x) * 100 / full_width;
-        // set min chat width to 300px
-        let min_left_width = 300 * 100 / full_width;
-        if (left_width < min_left_width) {
-          return;
-        }
-        left.style.flex = left_width.toString();
-        right.style.flex = (100 - left_width).toString();
+        setChatWidth(left_width);
     }
     function stop_drag(e) {
         document.documentElement.removeEventListener(
@@ -3524,21 +3604,12 @@ document.getElementById('resizer').addEventListener('keydown', function(e) {
         e.preventDefault();
         let full_width = document.getElementById("mainrow").offsetWidth;
         let left = document.getElementById("left");
-        let right = document.getElementById("right");
         let current_width = left.offsetWidth;
         let step = 20; // pixels per keypress
 
         let new_width = e.key === 'ArrowLeft' ? current_width - step : current_width + step;
         let left_percent = new_width * 100 / full_width;
-
-        // set min chat width to 300px
-        let min_left_width = 300 * 100 / full_width;
-        if (left_percent < min_left_width) {
-            return;
-        }
-
-        left.style.flex = left_percent.toString();
-        right.style.flex = (100 - left_percent).toString();
+        setChatWidth(left_percent);
     }
 }, false);
 
@@ -3697,16 +3768,6 @@ document.getElementById('close-chat').onclick = function(e) {
     document.getElementById('show-chat').focus();
 };
 
-document.getElementById('close-chat').onkeydown = function(e) {
-    if(e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault();
-        setVisibility('left', false);
-        setVisibility('show-chat', true);
-        resizePeers();
-        document.getElementById('show-chat').focus();
-    }
-};
-
 document.getElementById('show-chat').onclick = function(e) {
     e.preventDefault();
     setVisibility('left', true);
@@ -3715,16 +3776,6 @@ document.getElementById('show-chat').onclick = function(e) {
     document.getElementById('close-chat').focus();
 };
 
-document.getElementById('show-chat').onkeydown = function(e) {
-    if(e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault();
-        setVisibility('left', true);
-        setVisibility('show-chat', false);
-        resizePeers();
-        document.getElementById('close-chat').focus();
-    }
-};
-
 async function serverConnect() {
     if(serverConnection && serverConnection.socket)
         serverConnection.close();