adobe / adobe/react-spectrum

Invalid accessible label for menu list due to inert

Open
#9,737 7 comments 0 reactions 0 assignees View on GitHub
accessibility browser bug bug RAC
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.

Image

### 🤔 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.