Inactive tabpanels aren't hidden from the accessibility tree.

[MichaelAllenWarner]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.7.17

What browser are you using?

Chrome

Reproduction URL

The problem is evident in the example at the top of this page from the docs, so I hope you won't mind if I don't go to the trouble of making a repo for this purpose.

Describe your issue

Inactive tabpanels aren't hidden from the accessibility tree. As a result, screen-readers announce them, which is undesired behavior.

If I'm not mistaken, the problem stems from changes made in #1837. Perhaps simply adding aria-hidden="true" to the inactive tabpanel span-elements would fix this?

The video below demonstrates the problem (using VoiceOver on Chrome on Mac). You can see that VO announces the inactive "Popular" and "Trending" tabpanels after the active "Recent" tabpanel.

Screen.Recording.2023-08-21.at.9.10.57.AM.mov

[thecrypticace]

Hey, what version of macOS and Chrome are you using? While I see that they show up in the accessibility tree — VoiceOver doesn't navigate over to those tab panels or even mention their existence for me.

[MichaelAllenWarner]

Chrome: 116.0.5845.110
macOS: 13.3 (22E252)

Strangely, I'm seeing inconsistent behavior: sometimes I get tab-panel announcements (in which case the problem I reported seems to always arise—i.e., even the inactive tab-panels get announced), and sometimes I get no tab-panel announcement at all like you reported (which also doesn't seem right). I wonder if the iframe is somehow to blame for the inconsistency, though, because on another project I'm working on (without iframe) I get the "announce all tab-panels" behavior every time.

[thecrypticace]

Well I tried it outside of the iframe by navigating to the example on the website directly (currently happens to be here: https://headlessui.com/examples/react-tabs-hero — but it's not meant to be viewed outside of the page so the styling looks strange viewing it directly)

I'm on Chrome 116.0.5845.96 which is a hair behind you so maybe it's related to some patch to Chrome. I'll restart it and give it another look. I'm also on macOS 13.5.1 so I don't know if that's also related — I'll keep poking at it to see if I can reproduce it.

[MichaelAllenWarner]

I'll try to find time this week to put together a public repository that I can to link to here. (Like I said, it's happening consistently in the project I'm working on.)

Also, I think I can consistently reproduce the behavior on https://headlessui.com/examples/react-tabs-hero by first using the keyboard to Tab to the tab-list and then hitting ←/→ to change which tab is selected, before using VO to move to the tab-panel:

Screen.Recording.2023-08-23.at.4.29.46.PM.mov

[thecrypticace]

Given that you can reliably reproduce it on the example a repro probably isn't necessary since that is the repro :D

I tried with an updated Chrome and didn't see any change in behavior. One interesting thing is that chrome reports the size of these as 1x0 and I wonder if something changed in macOS recently to ignore "invisible" things in VoiceOver. I'll spin up a VM with 13.3 and see. 🤔

In anywise it's obviously an issue. I'm not sure why we don't have aria-hidden on those but that should fix it so I'll prep a PR and poke through git history / PRs / issues to see if there's an intentional reason we left it off (or if we just forgot).

[MichaelAllenWarner]

Okay, I won't bother with the reproduction then!

The "visually-hidden" approach to inactive tab-panels strikes me as a little funky. My instinct would be to just go display: none, but maybe the flex/grid thing mentioned here is why display: none wasn't used.

In any case, my guess is that just adding aria-hidden="true" would do the trick here.

[RobinMalfait]

Hey, thank you for this bug report! 🙏

This should be fixed by #2708, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.
• npm install @headlessui/vue@insiders.