mui / mui/material-ui

[Menu] iOS Voiceover focus trapped after selecting a menuItem

Open
#19,689 1 comment 7 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

accessibility scope: menu
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

  • [ X ] The issue is present in the latest release.
  • [ X ] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

With voiceover enabled on iOS, when the user opens a menu and selects an option, the menu closes as expected however the focus gets trapped on the selected menu item even though the menu has closed.

Expected Behavior 🤔

Once a user opens and selects a menuItem, the menu should close and focus should go back to the Menu Button

Steps to Reproduce 🕹

https://codesandbox.io/s/mui-icon-button-menu-gomtg

Steps:

With voiceover enabled on iOS:

  1. Navigate to Icon Menu Button
  2. Double-tap to open the menu
  3. Swipe to Select an option from the menu
  4. Notice that the menu closes and the focus gets stuck on the selected menu item even though the menu is closed

Context 🔦

It would be great if the focus would shift back to the Menu button.

Your Environment 🌎

Tech Version
OS iOs 13.1.2
Material-UI v4.7.0
React v16.12.0
Browser Safari
Screenreader VoiceOver

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

Reproduce the behavior in the linked CodeSandbox with iOS VoiceOver, then trace the Menu and MenuItem focus handling when the menu closes. Done means the menu closes after selection and VoiceOver focus returns to the Menu Button rather than remaining on the selected item.

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
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.