svelte-ux icon indicating copy to clipboard operation
svelte-ux copied to clipboard

[Dialog] Consider using <dialog> element or popover API

Open techniq opened this issue 2 years ago • 2 comments

The new dialog element has improved accessibility including focus trapper (if opened as a modal), and the browser support is good.

There are a few questions to answer:

  • Can we still transition using .show() / .showModal().
    • Might not be able to use svelte transition, but css transitions/animations.
    • No way to fade out backdrop on close (::backdrop element immediately removed)
    • It looks like we can pass the open prop instead of the using the DOM api, which would then allow svelte transitions, but I don't think you can open it as a model, and thus no ::backdrop, focus trapping, etc.
  • Do we use the built in ::backdrop pseudo element instead of using Backdrop
  • Clicking the backdrop / outside the dialog does not appear to be supported (still use Backdrop component?)
  • Scrolling while modal dialog is open is not restricted
  • Safari support is 15.4+

Sadly, this doesn't appear to help any with portal-ing, stacking context (z-index, CSS inheritance, etc)

REPL experimentation

techniq avatar Aug 19 '22 14:08 techniq

Consider popover (caniuse)

techniq avatar Sep 20 '23 17:09 techniq