Add dialog component about qwik-ui HOT 12 CLOSED

I'd suggest looking into Radix Dialog implementation.
I remember hearing somewhere that there's a problem with the native HTML Dialog, but can't seem to find the reference.
Also found this while digging:
https://a11y-dialog.netlify.app/

from qwik-ui.

@hamatoyogi Thank you very much. I will have a look at it.

from qwik-ui.

I came accros than one recently while investigating on trap users' focus

👉 https://micromodal.vercel.app/

if it can still give ideas :)

from qwik-ui.

What's the progress with the modal @GregOnNet , happy to hear from you 🤗

I'm happy to give some of my time if you see fit.

from qwik-ui.

Here, we have a summary why currently the native <dialog>-Element is not a git fit for us: https://a11y-dialog.netlify.app/further-reading/dialog-element

from qwik-ui.

Here we have the a11y-Spec for a Dialog: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/

from qwik-ui.

Both Radix and a11y-dialog use a ReadDOM.createPortal to instanciate the Dialg:

• Radix
• a11-dialig-react

from qwik-ui.

Very interesting reads.
I went through various code bases and read different APIs.
To me, a11y-dialog seems to be a good start.
The design- and a11y-decisions are well documented.

Next up, I study the vanilla JS implementation: https://github.com/KittyGiraudel/a11y-dialog/blob/main/src/a11y-dialog.ts#L1
I also take the React and Solid implementations into account.

I am no React expert, that's why I will start with vanilla JS first to understand the concepts.

from qwik-ui.

I'd suggest looking into Radix Dialog implementation. I remember hearing somewhere that there's a problem with the native HTML Dialog, but can't seem to find the reference. Also found this while digging: https://a11y-dialog.netlify.app/

If my not mistaken, the API allows apps to open native HTML modals only on user interaction. Which limit many usages.

from qwik-ui.

Hi @tleperou,

thanks for the offer.

I did not write any code so far.
Maybe I got a bit lost in researching all the a11y-resources.

Can I reach you in Discord? I am happy to pair with you. 🧑‍💻🧑‍💻

from qwik-ui.

Hi @tleperou,

I checked this repository yesterday.

It is a lightweight & good to understand code base.
However, having a look at the issues, there are a lot of edge cases this solution cannot handle.

That's why I want to drop this idea for now.

from qwik-ui.

🙌

here's my discord ID thameus#6784.

Dialog is a vast topic. As you mentioned, getting in the accessibility details is something!

Do you have come across any considerations about managing/exposing the state?

While working on the combobox, I experimented several options and ended with that way of exposing the state.

Indeed, the repo of the modal has some blocking issues. That demonstrates the challenge it can be.

from qwik-ui.