When on mobile galene.css tunes #left-sidebar to appear/disappear
when #sidebarCollapse is tapped. It indeed works ok when in chat mode,
but when in video mode, when #sidebarCollapse is tapped the only thing
that happens is that only "Galène" title of left sidebar window appears
- the other content of that window below the title is completely black
and even more: I only see title bar of the whole screen being scrolled
to the right, but the main area with videos is not scrolled to the
right.
That happens because video is overlaying left sidebar.
-> Fix that by setting z-index on #left-sidebar.active so that it always
comes on top of video.
The chat window appears when #show-chat is clicked. That click leads
to #left becoming visible, which contains chat elements. However when
mobile user taps #input, on-screen keyboard appears, which triggers
screen resize -> setViewportHeight() and the latter calls showVideo()
which hides the chat completely.
-> Fix that by doing showVideo() in setViewportHeight() only if we were
not in chat mode.
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.
This was the intended behaviour, but the default value changed
at some point. This should in principle allow receiving files
larger than available RAM.
Safari doesn't implement filtered drawing on HTML canvas,
it silently ignores the "filter" property of Context2D.
We implement our own blurring by scaling the background down
and then back up.
We used to initialise MediaPipe at worker start, which prevented
us from handling errors. We now do it at filter init, and stop
the stream with an error message if initialisation fails.
Juliusz Chroboczek