Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tab panels can't be activated & focus trapped in Tab list while using Windows Narrator #3274

Open
ohueter opened this issue Jun 6, 2024 · 2 comments
Assignees

Comments

@ohueter
Copy link

ohueter commented Jun 6, 2024

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v2.0

What browser are you using?

Chrome & Firefox, Windows 11

Reproduction URL

The behavior be reproduced on the Tabs site: https://headlessui.com/react/tabs

Describe your issue

When the Windows-native screen reader (Windows Narrator) is active, the individual tab panels can't be accessed (pressing Enter or Space does not show the corresponding panel). Furthermore, the focus is trapped in the tab list and can't be advanced to any of the following elements, even outside the Tab component.

The bug does not occur using macOS Voice Over.

Screen recording of the bug:

windows_narrator_headlessui_tabs.mp4
@thecrypticace thecrypticace self-assigned this Jun 13, 2024
@thecrypticace
Copy link
Contributor

Hi! I believe this is a problem with both Chrome and Firefox. After some research I discovered this answer on Microsoft Community and it seems to imply that Windows Narrator does not work correctly with Chrome. And from my testing, possibly not with Firefox either. Some things work and some things do not.

I tested the Headless UI website with Edge and Windows Narrator and it was working fine there:

screen.reader.mov

I'm going to leave this open as a reminder to look closer into this but I suspect there's nothing we can do as I believe the button interactions are just not working.

@ohueter
Copy link
Author

ohueter commented Jun 19, 2024

Hi, thanks a lot for taking a look at this issue!

The post on the Microsoft Community forum sounds discouraging. Luckily (strangely?) that doesn't match our experience, where Narrator is able to navigate most of our web page.

It seems hard to locate what the root cause of this issue may be. Narrator seems to be able to navigate the Radix UI Tabs quite fine:

radix_tabs_narrator.mov

(recorded on https://www.radix-ui.com/themes/docs/components/tabs by a teammate, there seem to be some quirks at the end of the video?)

Maybe you're able to gain some insight from this information. Let's hope most people requiring a screen reader use a better product ;)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants