search

tailwindlabs / headlessui

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
https://headlessui.com
MIT License
26.24k stars 1.09k forks source link

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

Open ohueter opened 5 months ago

ohueter commented 5 months ago

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:

https://github.com/tailwindlabs/headlessui/assets/57348167/d74d04ce-8849-4243-95b8-cd650dc298cd

thecrypticace commented 5 months ago

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:

https://github.com/tailwindlabs/headlessui/assets/614993/f9954e64-3128-4042-9b72-e6395762c6c5

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 commented 5 months ago

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:

https://github.com/tailwindlabs/headlessui/assets/57348167/e221575a-bf4f-4782-9cfe-ae398387be8d

(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 ;)