Popover - Cannot close Popover when using screen reader (Voiceover w/ Safari on Mac and iPad)
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
- The issue is present in the latest release.
- I have searched the issues of this repository and believe that this is not a duplicate.
Current Behavior 😯
Currently you are unable to close a Popover when you are using a screen reader. I tested this on Safari on Mac and iPad with Voiceover. You end up getting into a focus trap where you cannot tab anymore once the Popover opens, so you cannot get back to the button that opened it to close it again.
Expected Behavior 🤔
You should be able to tab away when a Popover is open so you can close it again.
Steps to Reproduce 🕹
Steps:
- Go the MUI site's Popover page https://v4-3-3.material-ui.com/components/popover/
- Turn on your screen reader
- Tab down to the Open Popover button in the first example, "Simple Popover"
- Click the space bar or enter to press the button. Notice that the focus has not shifted to being onside the Popover and the content is read out.
- Try to tab or back tab to get away from the Popover content and get to a different interactive element on the screen. You are unable to do so.
The only behavior I can do is press the up arrow key which will send the focus to text at the bottom of the screen and read it out, but you cannot get to interactive elements so there's no way to close the Popover.
Context 🔦
This is blocking screen reader users from being able to close the Popover and creates a focus trap so they are not able to use any other interactive elements on a screen once a Popover has been opened.
Your Environment 🌎
| Tech | Version |
|---|---|
| Material-UI | v4.3.3 |
| React | |
| Browser | Safari (best browser for using Voiceover) |
| TypeScript | |
| etc. | iOS Sierra v10.12.6 |
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 by reproducing the Popover example at the linked MUI site with VoiceOver in Safari, then trace the Popover focus behavior. Done means a screen-reader user can move focus away from the open Popover, reach another interactive element, and close it.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 32/100