Comments (13)
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:
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.
@GregOnNet and I added this in beta a couple months back. Closing
from qwik-ui.
Related Issues (20)
- Tooltip forces placement to top, even if it goes off screen HOT 1
- Tooltip props are inconsistent with those of Popover HOT 2
- Tooltip can only have string contents HOT 2
- qwikui.com and preview over-fetches and over-executes some js bundles HOT 1
- popover: Inconsistent behavior between failback and native popover
- Qwik UI Styled code examples wrong imports HOT 3
- RFC: Checkbox Component and Its API HOT 3
- 🏃♂️ Sprint 01/05/24 HOT 2
- Tabs component should walkthrough it's children
- How does one use the Select after 0.3.8 HOT 1
- 🏃♂️ Sprint 15/05/24 HOT 1
- contributing: `pnpm i` with pnpm v9 after updating deps conflicts with nx
- contributing: nx 18.1.1 to 18.3.5 `pnpm test.utils` error -> parseCLI is not a function HOT 1
- Discussion: Tailwind modifiers HOT 5
- feat(styled kit): create sheets variants for Modal
- [✨](styled kit): make-it-yours font customization
- feat(styled kit): styled select
- Add reusable component tests
- Styled input is broken `Cannot set properties of undefined (setting 'value')` HOT 2
- [✨](headless): add side data-attributes to popover
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from qwik-ui.