[dialog] Use html dialog element

[israelKusayev]

Summary 💡

Since dialog element is supported across all browsers maybe it's time to refactor dialog to use the native <dialog/> tag?

Examples 🌈

👀

Motivation 🔦

https://caniuse.com/dialog

Search keywords:

[ZeeshanTamboli]

Not sure, I think global usage also matters. We need to wait for atleast 90% global usage. Currently it is 82.98%.

[PinkaminaDianePie]

What about now? 93%+ as of today.

[kosciolek]

As of today it's 94.18%

I'm willing to implement this myself, are there any blockers/issues?

[oliviertassinari]

We looked into this for #372. However, it looks to me that the <dialog> native primitive is not usable, not for a general purpose component design system.

The issues that seems to have no user land solutions, so deal breakers:

1. I can't find content on nesting modal <dialog>. It's an important use case in my experience for a library like Base UI A popover on top of a modal dialog should be interactable whatwg/html#9936.
2. I can't find content on how to not make some part of the UI inert when a modal is open, for example, when using Intercom, Drift.com, etc.
3. From https://2023.stateofhtml.com/en-US/usage/#html_functionality_features data, one data point I found valuable: "auto-focusing the first input works poorly when the first input is typically the 'close' button". Especially on mobile, it messes up the scroll. A bit related to unexpected focus results for tabindex + <dialog>.showModal() whatwg/html#1929. Adam shared this same point in https://youtu.be/XYjH_oQ3llg?si=zR8PgY9jeN8-WXHg&t=4568.
4. Grammarly browser extension creates its suggestion popup below the <dialog>

[Link2Twenty]

Hi, here are some thoughts

1. Nesting <dialog> is fine, the most recently opened modal is on top and all other items are inert (including the source modal).
2. It is possible to move elements that shouldn't be inert into the topmost modal using portals, here's an example
3. By having a container div inside the modal with tabIndex -1 and outline:none you can force that div to be the focuses on modal open but not selectable with tab, (this is a trick we use a lot).

Related Issues:

• API to get top layer elements  whatwg/html#9075
• Feature Request: Top Layer Stack Management whatwg/html#10370
• Popover API and top-layer support fkhadra/react-toastify#959

[raythurnvoid]

2. It is possible to move elements that shouldn't be inert into the topmost modal using portals, here's an example

This should be a no-go, the vendors have to make a change in their API, all that shady code to make something that is very simple (just show something on top of everything else even if it appeared earlier)