[Dialog] Focus lost when opening a dialog from a menu using the keyboard

[mccannk]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

Using a keyboard, opening up a dialog from the menu and then closing it , the focus returns to the top of the page and doesn't remain on the menu

Expected behavior 🤔

Using a keyboard, opening up a dialog from the menu and then close it, the focus remains on the menu

Steps to reproduce 🕹

Steps:

1. User goes to https://codesandbox.io/s/gifted-phoebe-lsk3m6?file=/src/Test.js in Chrome, Firefox or Edge
2. Using a keyboard only, open up the dialog from the menu and then close it
3. Observe now where the focus is

Context 🔦

This fails accessibility as the user's focus returns to the top of the page

Your environment 🌎

System: @emotion/styled: ^11.6.0 => 11.6.0 @mui/base: 5.0.0-alpha.59 @mui/icons-material: ^5.2.1 => 5.2.1 @mui/lab: ^5.0.0-alpha.59 => 5.0.0-alpha.59 @mui/material: ^5.2.3 => 5.2.3 @mui/private-theming: 5.2.3 @mui/styled-engine: 5.2.0 @mui/system: 5.2.3 @mui/types: 7.1.0 @mui/utils: 5.2.3 @types/react: 16.9.51 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2

[michaldudak]

Right, it would be perfect if focus returned to the element it was on before the Dialog appeared. Would you like to contribute to the project by investigating this issue?

[xurxe]

Even though https://github.com/mui/material-ui/issues/34734 is about the Drawer component, the solutions I proposed in my comment touch briefly on the same focus management needs discussed here. It seems to me like there might be an issue with the underlying Modal component and/or with how it's used in these other components, maybe?

[xurxe]

Actually, I was thinking about how the menu closes when the dialog opens, and it occurred to me that the dialog has nothing to return the focus to if the element that opened it is not around anymore.

I tested it by removing handleClose() from lines 31 and 39 i.e. by modifying toggleDialog() and the anonymous click handler on the <MenuItem>. The result was what I suspected: after closing the dialog, focus is returned to the Assignee details menu item, as expected.