mui / mui/material-ui

Popover - Cannot close Popover when using screen reader (Voiceover w/ Safari on Mac and iPad)

Open
#19,965 6 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

accessibility component: Popover scope: popup
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:

  1. Go the MUI site's Popover page https://v4-3-3.material-ui.com/components/popover/
  2. Turn on your screen reader
  3. Tab down to the Open Popover button in the first example, "Simple Popover"
  4. 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.
  5. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.