Modal - Issue with chromevox and current focus

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Video Examples:

https://user-images.githubusercontent.com/12486130/228531170-078c7b82-9ba8-49e8-b736-0caab46c58b5.mp4

https://user-images.githubusercontent.com/12486130/228531203-a9df3a3c-5274-421b-90b4-bf92a5ff2206.mp4

Link to live example: MUI React Dialog Page

Steps:

1. Go to any example on MUI which inherits from Modal: Dialog, Drawers
2. Open Chromevox screen reader for ChromeOS. The shortcut is ctrl + alt + z
3. Interact with component and see focus keeps getting moved outside the component

Current behavior 😯

Interact with component and see focus keeps jumping outside the dialog/drawer.

I removed the -1 tabindex from the dialog container, and placed it on the element with the dialog role instead, which seems to have helped, but that might break the component for others if they are focusing on the outer container.

Expected behavior 🤔

Focus should not be jumping outside the dialog.

Context 🔦

I'm not 100% sure if this is the same issue mentioned on Issue #23827

Any of the MUI Dialogs/Drawers are giving some focus issues when using the chromevox screen reader on ChromeOS.

Your environment 🌎

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Start by reproducing the behavior on the MUI React Dialog and Drawer examples with ChromeVox on ChromeOS. Compare focus behavior in the Modal-based components, including the reported tabindex change, and review Issue #23827 for related context. Done means focus no longer jumps outside the dialog or drawer while interacting with it.