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:
+3
-3
@@ -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="➤" class="btn btn-default" aria-label="Send message"/>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
+5
-1
@@ -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();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user