[docs][Dialog] Add non-modal dialog docs & demo

[mnajdova]

One of #38630.

In Material UI there is no documentation around non-modal dialogs. The docs states "A Dialog is a type of modal window that appears in front of app content to provide critical information or ask for a decision. Dialogs disable all app functionality when they appear, and remain on screen until confirmed, dismissed, or a required action has been taken.", but there are also non-modal dialogs scenarios, that would be great for us to document to help people build, for e.g. check https://accessuse.eu/en/non-modal-dialogs.html#:~:text=A%20non%2Dmodal%20dialog%20pops,partly%20covered%20by%20the%20dialog. This page has great examples of both use-cases https://www.nngroup.com/articles/modal-nonmodal-dialog/

This PR adds a non-modal section on the dialog page explaining the use-case and how can one build it.

Demo link: https://deploy-preview-38684--material-ui.netlify.app/material-ui/react-dialog/#non-modal-dialog

[mui-bot]

Netlify deploy preview

• docs/data/material/components/dialogs/dialogs.md

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 72c53d2

[danilo-leal]

Sweet, this is a super helpful distinction/demo to be added!

Overall, about the docs ⎯ I'd love to hear @samuelsycamore's take on this one ⎯ I think the modal vs. non-modal explanation should probably not be inside a callout. Whenever content gets too big inside of them, I start to feel like they deserve a paragraph on their own. Callouts, to me, sound like extra information. That said, it should probably be inside the "Non-modal" section? Might also be interesting to link the NN Group link for further reference, it's indeed a great resource!

All in all, a Material UI docs information hierarchy similar to what we're doing with Base UI would be really beneficial to find these sections quickly!

[mnajdova]

I think the modal vs. non-modal explanation should probably not be inside a callout. Whenever content gets too big inside of them, I start to feel like they deserve a paragraph on their own. Callouts, to me, sound like extra information. That said, it should probably be inside the "Non-modal" section? Might also be interesting to link the NN Group link for further reference, it's indeed a great resource!

Makes total sense, I am on it!

[mnajdova]

@danilo-leal I added a cookie banner example too, please check if we want to adjust the styles there! :)

[danilo-leal]

Pushed a few changes, mostly simplifying the copywriting and demos. I think having two demo blocks is a bit overkill 😬 just one seems enough to demonstrate the idea. Also positioned the "Non-modal dialog" content a bit up in the page's hierarchy (not following any specific order, though, but thought that being below "Limitations" was a bit off).

Hope this is ok! It's looking great to me! 😃

[mnajdova]

Hope this ok! It's looking great to me! 😃

Thanks! Let's wait on Sam's final review.

[oliviertassinari]

I have noticed one blocker:

1. The rest of the page is not interactive, this is a deal breaker IMHO. This is a modal dialog behavior. I think this would be also true if it was a chatbot.

Otherwise:

2. It sets aria-hidden="true" on all the elements of the page, this feels wrong.
3. We want people to click "Allow all", I don't think we can have the least favorable option "Use necessary only" to take the most space on the screen (so the easiest to click). Personally, when I see these banners, I usually click on whatever hides it the fastest. Examples:

Ashby

Stripe

Vercel

4. In terms of where the accept button is positioned, I think https://vercel.com/ has the best design. The closest to the footer on mobile and the closest to the center on desktop, it's likely the least effort to click.
5. The design has issues on desktop: https://tqptrk.csb.app/

[danilo-leal]

@oliviertassinari Wasn't necessarily looking for the best of the best cookie banner design for this demo 😅 but I tweaked it a bit to be even simpler + fixed the desktop issue there. Also, I just noticed the apparently modal behavior (e.g., can't select text on the page), which we should probably fix as this is a non-modal demo. 😬

[oliviertassinari]

True, but we can have a great one 😁, these https://tailwindui.com/components/marketing/elements/banners#component-c5bc8a46a1093693fd286f0b74c631f4 aren't bad at all.

Speaking of great:

• The iframe doesn't load the Roboto font, the font we see is sans-serif on macOS

it seems to be an old issue, I can see the same issue on https://v4.mui.com/components/app-bar/#hide-app-bar.

• I guess we should use <Container> for the body of the page

[mnajdova]

The rest of the page is not interactive, this is a deal breaker IMHO. This is a modal dialog behavior. I think this would be also true if it was a chatbot.

I will look into this, in the end it may be best to have a different component instead of modal for the root element if the dialog should be non-modal - we can have this implemented either as prop or a different component. I will start with prop to see how big of a change it would be.

[oliviertassinari]

@mnajdova I suspect that composing Paper, with Fade and TrapFocus is enough for this. No need for Dialog.

[mnajdova]

@mnajdova I suspect that composing Paper, with Fade and TrapFocus is enough for this. No need for Dialog.

I was testing this a bit, but it's not that straight forward. The TrapFocus does not allow all the functionalities we would need - for e.g. I couldn't set it up to have circular navigation but also allow focusing/taking action by clicking outside of it at the same time. It's not that trivial, maybe we can track the last event and if it is a click outside of it - disable the FocusTrap. I will experiment with this for a bit and report back. I agree it would likely be outside of the scope of the Dialog, but we can likely keep the demo on this page.

[mnajdova]

I am converting to draft, I will ask for a review when I have something better. Btw, I had a false self-approval that it works as the demo was iframe so clicking outside of the demo worked as expected 🤦‍♀️

[mnajdova]

I am happy with the demo now, it's ready for the next round of review. @oliviertassinari you were right about using Fade, TrapFocus and Paper, the tricky part was when to enable/disable the TrapFocus - I've added a focusin event listener for this.

[danilo-leal]

Looks great to me! Thanks for working on this 🤙

The only thing, though, and this can be unrelated, is that the demo typography looks bold 😬 Don't think it's supposed to be like this, but not sure if it's something with this demo in specific or else.

[mnajdova]

@oliviertassinari your changes broke the keyboard behavior - the focus is no longer trapped inside the Cookies banner, and one more thing - there are two more focus stops - the TrapFocus's sentinel start and end. For e.g. check how the behavior on https://www.nngroup.com/articles/modal-nonmodal-dialog/ or gmail's email popup is different.

From the resources I found, there are the requirements:

• ✅ allow interactions outside of it, for e.g. clicking outside of the non-modal dialog should allow selection/focus
• ✅ correct aria attributes: role="modal", aria-modal="false", aria-label to be specified
• ❌ once the focus is inside the non modal dialog it should be circulating inside (needs to be trapped) - this is broken by your last commit, but was working previously - I can revert the changes once we agree
• ❓ provide some keyboard action that will allow users to focus outside of it (I see F6 as a recommendation in the AcessUse acrticle) - I am not sure what should be the recommendation, maybe we want to make users of the website take an action instead allow/disallow the cookies - this can likely be a decision made on an app level)

[oliviertassinari]

your changes broke the keyboard behavior - the focus is no longer trapped inside the Cookies banner, and one more thing - there are two more focus stops - the TrapFocus's sentinel start and end. For e.g. check how the behavior on https://www.nngroup.com/articles/modal-nonmodal-dialog/ or gmail's email popup is different.

@mnajdova Ah yes, I wasn't clear. It's what I described with "Enable the trap focus, deferring the cycling issue to #21569." I don't think the root issue is the demo, but the underlying component.

[mnajdova]

@mnajdova Ah yes, I wasn't clear. It's what I described with "Enable the trap focus, deferring the cycling issue to #21569." I don't think the root issue is the demo, but the underlying component.

Aah, I see now, thanks for the clarification. I will look into this issue first, looks like we need to have similar logic to what I had in the demo, unless something else broke it.

---

PR created for fixing the FocusTrap issue here #38816

[mnajdova]

@samuelsycamore this is ready for final review in terms of copywriting.

[samuelsycamore]

Sorry I missed this before! I'm not sure if anyone else already pointed this out, but the Base UI Modal doc includes this callout:

The term "modal" is sometimes used interchangeably with "dialog," but this is incorrect. 
A dialog may be modal or nonmodal (modeless).

A modal [blocks interaction with the rest of the application](https://en.wikipedia.org/wiki/Modal_window), forcing the user to take action. 
As such, it should be used sparingly—only when the app requires user input before it can continue.

Maybe we should use the same text here? I suppose the purpose is a little different here, but I like this explanation.

[mnajdova]

Maybe we should use the same text here? I suppose the purpose is a little different here, but I like this explanation.

We have the same callout on the Materia UI's modal page: https://mui.com/material-ui/react-modal/ Did you mean that we should duplicate this on the Dialog page too?

[oliviertassinari]

The end result feel great 👌