vidstack
Player settings-menu problematic for screen reader users
Current Behavior:
The video player settings menu (pop-up) is hard or impossible to reach and use for screen reader users. Specific behaviour depends on screen reader software, OS, and browser.
A. NVDA on Windows (tested on Chrome and Edge)
NVDA (very popular screen reader software) users can toggle the menu, but not reach it. They cannot alter any settings in the player. It is not focusable with the keyboard and screen reader commands.
B. VoiceOver on macOS Safari
The settings can be toggled and reached, but the items themselves aren't available to the screen reader. The focus is stuck on the parent-menu, the items themselves cannot be reached and used.
C. VoiceOver on macOS Chrome
Settings can be toggled and reached, but using the menu is problematic. This seems to be linked to focus handling. When changing settings in a sub-menu, and navigating back to the main menu using the screen reader, the user's focus is left behind in the now closed sub-menu; VoiceOver gets stuck on "you are currently in a menu".
Similarly, when closing the settings altogether, the user's focus is not placed back in the settings toggle button. It stays behind in the now closed menu pop-up. Elements on the page are no longer being read out by VoiceOver.
Expected Behavior:
Screen reader users should be able to toggle, reach, and use the settings without issues.
Steps To Reproduce:
A. NVDA on Windows (tested on Chrome and Edge)
- Start NVDA on Windows
- Open a web page with a Vidstack-player in either Chrome or Edge.
- Navigate to the settings toggle button using the screen reader
- Open the settings menu
- Try to reach the open menu using the screen reader
B. VoiceOver on macOS Safari
- Start VoiceOver on macOS
- Open a web page with a Vidstack-player in Safari.
- Navigate to the settings toggle button using the screen reader
- Open the settings menu
- Navigate to the open menu using the screen reader
- Try to reach an item inside the menu using the screen reader
C. VoiceOver on macOS Chrome
- Start VoiceOver on macOS
- Open a web page with a Vidstack-player in Chrome.
- Navigate to the settings toggle button using the screen reader
- Open the settings menu
- Navigate to the open menu using the screen reader
- Navigate to a sub-menu and back
- Try to have VoiceOver announce any other content, either inside the main menu or on the web page
Reproduction Link: Craftzing.com - Careers
Environment:
A. NVDA on Windows (tested on Chrome and Edge)
- @vidstack/react: "^1.12.13"
- Next.js 14.2.17
- Node v20.11
- Device: Acer Aspire 3
- OS: Windows 11 Home
- Browser: Chrome 137.0.7151.105 / Edge 137.0.3296.68
- Screen reader: NVDA 2024.4.2
B. VoiceOver on macOS Safari
- @vidstack/react: "^1.12.13"
- Next.js 14.2.17
- Node v20.11
- Device: Apple MacBook Pro 14-inch, 2021
- OS: macOS Sonoma 14.6.1
- Browser: Safari
- Screen reader: VoiceOver
C. VoiceOver on macOS Chrome
- @vidstack/react: "^1.12.13"
- Next.js 14.2.17
- Node v20.11
- Device: Apple MacBook Pro 14-inch, 2021
- OS: macOS Sonoma 14.6.1
- Browser: Chrome 137.0.7151.105
- Screen reader: VoiceOver
Might be good to compare with keyboard behaviour, focus behaviour, ARIA roles and attributes in W3C's design pattern for Menu and Menubar to see where things go wrong exactly.
