Invalid accessible label for menu list due to inert
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### 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](https://react-aria.adobe.com/Menu/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
https://github.com/adobe/react-spectrum/pull/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_
Contributor guide
Research direction
Reproduce the issue on the useMenu documentation page in Chrome by inspecting MenuList with and without the inert attribute. Trace the useMenu and useListbox hooks through the Popover labeling behavior, and review PR 8372 for the inert change. Done means the open menu or listbox is named "Actions" from the trigger text without requiring an aria-label.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100