Invalid accessible label for menu list due to inert

[ashleyryan]

Provide a general summary of the issue here

Our menu and listbox components are built using the useMenu and useListbox hooks inside of a Popover component. The list element in each gets an aria-labelledby pointing at the trigger element. However, once the popover is open, inert is applied to the page, and that trigger element is now no longer visible, resulting in the list element not having an accessible name.

You can reproduce this on the useMenu doc page by inspecting the MenuList element and looking at the Accessibility details of the element. Interestingly, it says the accessible name of the list is "▼", which is wrapped in an aria-hidden. If I remove the inert from the root element, dev tools correctly identifies the name of the list as "Actions".

Note: we have noticed that the list will be labelled correctly if the trigger element has an aria-label, but it doesn't get the button text as it's label without it.

🤔 Expected Behavior?

The menu-list element is correctly labelled by the trigger element, in this case "Actions".

😯 Current Behavior

Elements in the popover are not correctly labelled by their trigger elements on the page due to the inert property.

💁 Possible Solution

I believe this may be related to the switch to using inert in 1.11/August 2025 release

#8372

🔦 Context

No response

🖥️ Steps to Reproduce

• Go to the useMenu doc page: https://react-aria.adobe.com/Menu/useMenu#menuitem
• Inspect the accessible label of the MenuList html element in devtools, notice that the name does NOT include "Actions"
• Remove the "inert" from the div element directly below the body element. Notice how the accessible label now does include "Actions"

Version

We are on 1.14.0, but I can reproduce it on the old doc site on 1.15.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

OSX Tahoe

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

Good catch, it is definitely a bit strange that the accessibility tree successfully links the inert menu button's aria-label to the menu but not the button's text itself, feels like an inconsistency that https://html.spec.whatwg.org/dev/interaction.html#inert-subtrees doesn't really seem to spell out what is expected here. Perhaps we could always exclude a Popover's trigger from being hidden via inert when the Popover is open similar to how it is done for ComboBox?

[snowystinger]

Possibly a duplicate of #9437 ?

[LFDanLu]

yep that looks like the same core issue

[LFDanLu]

I've filed https://issues.chromium.org/issues/489792331, will see what we get back from the Chrome team

[nataliadiak]

If the aim is to have aria-labelledby work across an inert boundary, that would need a browser-level update since name computation happens within the accessibility tree, beyond the control of libraries. To avoid losing the label source for now, the only library-level workaround is structural: keep the referenced label target outside the inert region.

[LFDanLu]

we can certainly try to do that as mentioned by excluding the menu trigger button from the inert region, but its interesting that Firefox and Safari both work here though. Will wait on Chrome to see if they will fix or not, but if it takes too long perhaps we can patch this

[snowystinger]

If we take away inert on the trigger, then we should probably put aria-hidden on it like we used to do so that screen readers cannot navigate to it accidentally. We'll need to do some serious testing if we try to work around this.