[joy-ui][Modal] Select Option is not accessible when placed in a Modal or Drawer because aria-hidden is set
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Steps to reproduce
Link to live example: https://stackblitz.com/edit/vitejs-vite-j2pkfu?file=src%2FApp.tsx
Example code:
import { useState } from 'react';
import { Select, Option, Drawer, Button, Box } from '@mui/joy';
function App() {
const [open, setOpen] = useState(false);
return (
<>
<Button onClick={() => setOpen(true)}>Open</Button>
<Drawer open={open} onClose={() => setOpen(false)}>
<Box>
<Select defaultValue="dog">
<Option value="dog">Dog</Option>
<Option value="cat">Cat</Option>
</Select>
</Box>
</Drawer>
</>
);
}
Steps:
- Press the "Open" button to open the Drawer.
- Inspect the elements using dev tools.
Current behavior
When opening the Drawer, the ModalManager will apply aria-hidden="true" to all elements in the root container (<body>) except for the presentation container of the Drawer itself. Most of the time this is desired because only the the content of the Drawer should be accessible.
In my example though, I am nesting a Select component inside the Drawer. The list item menu of the Select (Popper) is placed below the body element and will have the aria-hidden attribute set to true:
It seems that I am still able to use the Select component using the mouse and keyboard. So there seems to be no harm for the regular user, I think.
But we have noticed this bug in a playwright test using getByRole("option") which is strict about visibility and will not find the option because aria-hidden is set.
Expected behavior
The options of the Select should be accessible when placed inside a modal/drawer.
Maybe:
aria-hiddenshould not be set to root-level containers that are part of the current modal.- Or: There should be some documentation on how to solve this issue otherwise.
Context
No response
Your environment
npx @mui/envinfo
System:
OS: Linux 5.4 Ubuntu 20.04.6 LTS (Focal Fossa)
Binaries:
Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
pnpm: 8.10.5 - ~/.local/share/pnpm/pnpm
Browsers:
Chrome: 123.0.6312.105
Search keywords: modal select aria-hidden modalmanager base-ui joy
Search keywords:
Search keywords:
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked StackBlitz reproduction and inspect how Joy UI's ModalManager handles the Drawer presentation container and the Select's Popper under body. Compare the behavior with Playwright getByRole("option"); done means Select options inside a Drawer or Modal remain accessible without aria-hidden="true".
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100