Fix accessibility labels and context menu activation

Add descriptive ARIA labels to unlabeled controls and fix keyboard
activation for context menu items.

Changes:
- Add aria-label to chat message textarea ("Message or /command")
- Add aria-labels to Enable/Disable buttons ("Enable/Disable camera and microphone")
- Fix Enter/Space key activation in context menus by clicking parent <li> element

The context menu fix ensures that keyboard users can properly activate
menu items with Enter or Space. Previously, these keys had no effect
because the click handler is attached to the parent <li> element, not
the focused <div>.
This commit is contained in:
Storm Dragon
2025-11-27 00:53:30 -05:00
parent c0929247e7
commit ef2eeb073f
2 changed files with 8 additions and 4 deletions
+3 -3
View File
@@ -37,12 +37,12 @@
<ul class="nav-menu">
<li>
<button id="presentbutton" class="invisible btn btn-success">
<button id="presentbutton" class="invisible btn btn-success" aria-label="Enable camera and microphone">
<i class="fas fa-play" aria-hidden="true"></i><span class="nav-text"> Enable</span>
</button>
</li>
<li>
<button id="unpresentbutton" class="invisible btn btn-cancel">
<button id="unpresentbutton" class="invisible btn btn-cancel" aria-label="Disable camera and microphone">
<i class="fas fa-stop" aria-hidden="true"></i><span class="nav-text"> Disable</span>
</button>
</li>
@@ -77,7 +77,7 @@
<div id="chat-announcements" aria-live="polite" aria-atomic="true" class="sr-only"></div>
<div class="reply">
<form id="inputform">
<textarea id="input" class="form-reply"></textarea>
<textarea id="input" class="form-reply" aria-label="Message or /command"></textarea>
<input id="inputbutton" type="submit" value="&#10148;" class="btn btn-default" aria-label="Send message"/>
</form>
</div>
+5 -1
View File
@@ -2577,7 +2577,11 @@ function makeContextualMenuAccessible(menuElement) {
menuItems[currentIndex].focus();
} else if(e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
menuItems[currentIndex].click();
// Click the parent li element which has the actual click handler
let parentLi = menuItems[currentIndex].parentElement;
if(parentLi) {
parentLi.click();
}
}
});
}