[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 for a general purpose component design system.

The issues that seems to have:

1. I can't find content that proves that we can nest when using <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.
   => In practice, it seems possible, only a educational issue.
2. Similar to 1. but without nesting. 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.
   => There are workaround, but they involve moving elements in the DOM, not viable at scale?
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.
   => There is a workaround that involves a fake tabbable DOM node.
4. Grammarly like extensions needs suggestion popup, they can't render above a <dialog>
   => There are workaround, but they involve moving elements in the DOM, not viable at scale?
5. Native dialog restores focus immediately; it doesn't wait for the close animation to complete: [dialog] Allow preventing Dialog.Close onClick when animation is in progress #3153 (comment).
   => No solution here?