Improve accessibility for screen reader users#318
Open
stormdragon2976 wants to merge 12 commits intojech:masterfrom
Open
Improve accessibility for screen reader users#318stormdragon2976 wants to merge 12 commits intojech:masterfrom
stormdragon2976 wants to merge 12 commits intojech:masterfrom
Conversation
…tion 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.
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 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 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.
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>.
… to /help command.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request makes Galene significantly more accessible for screen reader users, especially people using Orca on Linux or NVDA on Windows.
The changes focus on making the web client easier to understand and operate without relying on visual layout alone. They add or improve accessible labels, headings, keyboard interaction, focus behavior, and announcements so that common meeting tasks are reachable with a screen reader and keyboard.
Summary:
/help.This also includes a small typo fix in an error message found while updating against current
master.Verification:
node --check static/galene.js: passed.go test ./...: passed.