svelte-ux

svelte-ux copied to clipboard

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

openModal action and transitions

Consider popover (caniuse)