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 makes the Contextual library menus fully keyboard accessible.
Previously, context menus (user menu and chat message menu) were only
usable with a mouse.
Changes:
- Add makeContextualMenuAccessible() helper function
* Adds ARIA role="menu" to menu container
* Adds role="menuitem" to each menu item
* Makes menu items focusable with tabindex
* Automatically focuses first menu item when opened
- Add keyboard navigation support
* Arrow Up/Down: Navigate between menu items
* Enter/Space: Activate selected menu item
* Escape: Close menu
- Apply to both context menus
* User menu (click/Enter on username)
* Chat message menu (double-click on message)
- Focus management
* First item automatically focused when menu opens
* Roving tabindex for efficient keyboard navigation
* Menu closes and returns focus after activation
This makes context menus fully accessible to keyboard and screen reader
users. They can now navigate menus with arrow keys and activate items
with Enter or Space.
This commit adds comprehensive keyboard navigation support for all
interactive elements and adds slash commands for raising hands.
Changes:
- Add /raisehand and /unraisehand slash commands
* Previously only accessible via context menu
* Now keyboard users can raise/lower hand from chat input
* Shows up in /help command list
- Add keyboard event handlers (Enter/Space) for all interactive elements
* User list items now respond to keyboard (open context menu)
* Sidebar collapse button supports keyboard
* Settings panel open/close supports keyboard
* Video show/hide buttons support keyboard
* Chat show/hide buttons support keyboard
* All buttons now have role="button" and tabindex where needed
- Add keyboard support for chat resizer
* Made resizer focusable with tabindex="0"
* Added role="separator" and aria-label
* Left/Right arrow keys resize chat panel
* 20px step per keypress
* Maintains minimum width constraint
These changes make Galene fully keyboard-accessible. Users who cannot
use a mouse can now navigate all controls using Tab, Enter, Space, and
arrow keys.
This commit adds more accessibility enhancements that improve usability
for screen reader and keyboard users with minimal code changes.
Changes:
- Add aria-labels to all icon-only buttons
* Show/hide video and chat toggle buttons
* Video controls (play, volume, pip, fullscreen, stop)
* Chat submit button (send message)
* All buttons converted from spans/divs to proper button elements
- Add aria-label to volume slider
* Screen readers can now identify the volume control
- Increase error message timeout from 4s to 8s
* Gives screen reader users more time to read error messages
* Messages still dismissible with close button
- Add semantic HTML landmarks
* Changed main div to <main> element
* Changed settings sidebar div to <aside> with aria-label
* Added role="region" and aria-label to chat area
* Left sidebar already uses <nav> element
- Fix typo and improve close button
* Fixed id from "clodeside" to "closeside"
* Converted close button from anchor to button element
* Added aria-label "Close settings"
These changes improve navigation for screen reader users through proper
landmarks and ensure all interactive elements are properly labeled.
This commit addresses critical accessibility issues that prevent blind users
and keyboard-only users from using Galene effectively.
Changes:
- Convert navigation buttons from divs to proper button elements with ARIA labels
* Mute button now has aria-pressed state and updates label (Mute/Unmute)
* Share screen button has proper aria-label
* More options button has aria-label and aria-haspopup
* Collapse sidebar button converted to proper button element
* Close chat button converted to proper button element
- Add visible focus indicators for keyboard navigation
* Restore focus outlines for all interactive elements
* Add consistent 2px blue outline for buttons, inputs, selects, and links
* Remove outline: none that was blocking keyboard users
- Add aria-live region for chat messages
* New messages announced to screen readers in real-time
* History messages not announced to avoid spam on page load
* Includes .sr-only CSS class for screen-reader-only content
- Add aria-labels to video stream elements
* Video containers labeled with username
* Video elements labeled to identify stream owner
* Helps screen reader users identify which video belongs to whom
- Add raised hand notifications for screen readers
* Announces when users raise their hand
* User list items show status (hand raised, camera on, microphone on)
* Does not announce when you raise your own hand
* Updates aria-label on user elements with full status
These changes make Galene significantly more accessible for users who rely
on screen readers or keyboard navigation.
Storm Dragon