Tearsheet research: Dialog native element

[RichKummer]

Referencing core's dialog epic: #13807

Need additional background on migration to <dialog> native HTML element across modal elements in Carbon core and Product.

[RichKummer]

01/17/25 – Native HTML Dialog element from Web Dev Simplified

https://www.youtube.com/watch?v=ywtkJkxJsdg

• Before the native HTML dialog element, devs would need to have a separate ‘overlay’ element to handle the opaque background.
  • Would also need to expressly close the modal by default and coreograph the modal and overlay.
  • Accessibility: Tabbing with the modal open would circle back to the page content unless you trapped focus in the modal.
• With the new native <dialog> element:
  • No longer need a separate overlay element.
  • New function/method for show() and showModal() ⭐
    • If a user opens a modal, it’s the only thing the user can interact with (they cannot interact with anything on the page, but you can scroll).
    • If a user opens a dialog, the user can still interact with other elements on the page. You can think of this like a tooltip.
  • Easier to overwrite with custom styles.
    • Includes the psuedo-element dialog::backdrop to alter the overlay background.
  • Positioned in center by default.
  • By default, dialog can be closed by using Esc key.
• Thoughts on Tearsheet:
  • We should treat Tearsheet as a modal in this case, since the focus should remain in the Tearsheet without escaping to the rest of the page.
    • This may require a bit more nuance with stacking, but the most front-facing Tearsheet should have focus inside it. If that is dismissed, focus moves to the second Tearsheet in the order (and so on).