[modal][material-ui] Cannot move focus outside even withdisableEnforceFocus

[Val020213]

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/hungry-brahmagupta-57h2pq

Steps to reproduce:

1. Create a Snackbar message containing an Alert component with an onClose prop or another clickable component inside.
2. Create a basic Modal component with the disableEnforceFocus prop set to true and a button that opens the Snackbar message.
3. Observe that when using the Tab key, it’s not possible to navigate to interactive components outside the Modal.

Current behavior

Current Behavior: Even after setting the disableEnforceFocus prop on the Modal, it is not possible to access components outside the Modal when using the Tab key.

Expected behavior

Expected Behavior: According to the Focus trap section in the MUI documentation, the Modal component will move focus back to the body if focus tries to escape it. This is implemented for accessibility purposes but may create usability issues.

However, when using <Modal disableEnforceFocus />, it should be possible to close the Snackbar or interact with other components on the page.

Context

I'm trying to create an accessible user experience where users can open a Snackbar notification from within a Modal, interact with the Snackbar (e.g., close it with an onClose action), and still be able to tab to other interactive components outside the Modal. Setting disableEnforceFocus on the Modal doesn't seem to allow this as expected, so I'm unable to create the intended experience.

I have a global Snackbar provider for my app, where all toast messages are dispatched. Any toast message that isn't opened within the Modal body becomes unfocusable, which disrupts accessibility. Any guidance on enabling this behavior would be greatly appreciated.

Your environment

npx @mui/envinfo

 System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.3.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.15.4 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Chromium (128.0.2739.67)

Search keywords: disableEnforceFocus, ada, accessibility, modal, trapFocus

[mnajdova]

You seem to be looking for something like non-modal Dialog. We have a demo of how you can build one here: https://mui.com/material-ui/react-dialog/#non-modal-dialog

By definition the Modal blocks the interactions outside of it. You were close into setting up the prop on the TrapFocus, but the Modal also has additional logic for preventing this interactions (as it is by definition suppose to do it).

Even after setting the disableEnforceFocus prop on the Modal, it is not possible to access components outside the Modal when using the Tab key.

This is expected, what it means that you have still the circular tab index inside the component, but you can click or interact otherwise with the content outside of it (e.g. by having a keyboard shortcut to go outside of it).

[mnajdova]

If you don't even want to trap focus, then no need to use the FocusTrap component, but I would recommend reading a bit about what's the expectation for users when using Modals, to make sure the app would still be accessible and work as expected.

[Val020213]

Okay, I will do that. Thank you very much for the reference and the time you dedicated.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@Val020213 How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.