[dialog] Use native HTML dialog tag instead of custom markup

[astronautintheocean]

Description

We can now use native HTML dialog tag in order to create modals.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

Why do you need this feature or component?

Using the native HTML dialog component means we can create modals without using a lot of custom markup (like a bunch of div elements). It comes standard with a backdrop customizable via CSS and accessibility features like focus and closing on ESC.

Additional context

This is how Spectrum creates modals:

<div class="spectrum-Modal-wrapper spectrum-CSSExample-dialog">
  <div class="spectrum-Modal is-open">
    <div class="spectrum-Dialog spectrum-Dialog--small" role="dialog" tabindex="-1" aria-modal="true">
      <div class="spectrum-Dialog-grid">
        <h1 class="spectrum-Dialog-heading">Disclaimer</h1>
        <hr class="spectrum-Divider spectrum-Divider--sizeM spectrum-Divider--horizontal spectrum-Dialog-divider">
        <section class="spectrum-Dialog-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper dignissim cras lobortis.</section>
      </div>
    </div>
  </div>
</div>

With native HTML dialog above code could be simplified to:

<dialog>
 // dialog content + buttons goes here
</dialog>

The backdrop is customizable with CSS:

dialog::backdrop { /* example */
    background-color: rgba(0, 0, 0, .5);
    backdrop-filter: blur(15px);
  }

[5t3ph]

Hi @astronautintheocean - thanks for bringing this up! I know @castastrophe already partly addressed this in our work Slack, but I wanted to note some other considerations.

We are huge fans of using native web capabilities in general. That said, since Spectrum is supporting complex web applications, there are scenarios where overlay capabilities are desired but where the native behavior of modal dialogs pose a conflict. This is due to the native modal dialog (one launched using showModal) casting the entire rest of the page as inert.

Typically, this is desirable and the best case for accessibility purposes. However, one common scenario may be to have a "Save" dialog, and while it is still open, a Toast appears to confirm the save. If the Toast is launched from the background page (outside of the modal dialog), it will be visually available but inaccessible via keyboard or assistive technology. Here is a Codepen demonstrating this issue, which also tests use of a basic native popover.

Therefore, before we make this update, we will need to evaluate more use cases and how other common patterns (like Toasts) would be affected. We could use a non-modal version via the show() method, but that loses the ::backdrop and doesn't boost to the top layer. So, there might be a combo of using native dialog vs. native popovers depending on context, which needs further discussion and explicit examples and test cases that consider accessibility as well.

We are tracking this CSSWG issue that would help manage inert behavior and essentially allow opting something like the Toast out of being inert so that it would still be accessible alongside a modal dialog, and likely ultimately provide the cleanest solution once available. See also Scott's comment on that issue that shares other examples of conflict points.

Thanks again, and we definitely will be continuing this discussion!