Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
techniq opened this issue Aug 19, 2022 · 2 comments
Open

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

techniq opened this issue Aug 19, 2022 · 2 comments

Comments

@techniq
Copy link
Owner

techniq commented Aug 19, 2022

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
Copy link
Owner Author

techniq commented Nov 15, 2022

@techniq techniq changed the title [Dialog] Consider using <dialog> element [Dialog] Consider using <dialog> element or popover API Sep 20, 2023
@techniq
Copy link
Owner Author

techniq commented Sep 20, 2023

Consider popover (caniuse)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant