[Dialog/Modal] Dialog and Modals should trap focus.

[ryanmitts]

• [ x] This is not a v0.x issue.
• [ x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Dialogs and modals should trap your browsers focus when tabbing to just that open dialog of modal. This is for accessibility and ease of keyboard use of a site.

The breaking behavior is when focus reaches the last focusable element of a dialog, the focus should loop around to the first element.

This is described in these recommendations from W3.

Current Behavior 😯

When focus reaches the last focusable element of a dialog, the focus continues outside the dialog area.

Steps to Reproduce 🕹

Link:

1. https://material-ui.com/demos/dialogs/
2. https://material-ui.com/utils/modal/

Context 🔦

This is an issue for accessibility and those who use a keyboard to navigate, you lose track of where your focus is and the focus may be completely behind the dialog that you must interact with.

Your Environment 🌎

Tech	Version
Material-UI	v3.9.2
React	16.4.0
Browser	Chrome 72
TypeScript	2.9.1

[joshwooding]

Is this a duplicate of #13702?

[ryanmitts]

@joshwooding They are related. If this behavior described in this ticket was working, that ticket behavior would (likely) not happen. I feel like this is the root cause of the behavior in that ticket.

[joshwooding]

Although the title is different I think this is covered in #13702 so I'm closing this.
Please contribute to #13702

[oliviertassinari]

@ryanmitts Thank you for raising the problem!