-
Notifications
You must be signed in to change notification settings - Fork 77
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
Modal #25
Comments
Hey, thanks so much for the submission! This is a great start. A few notes:
I've used the word "overlay" previously. What do you think about something like:
I think that nested modals aren't very common so it might be unnecessary to specify "or another dialog box" I like the points under best practices! Do you think we could elaborate a bit on some of those points? For example: When mentioning clear exit routes, specify what kind of exit routes do we mean? Clicking on the backdrop, a visual close button, and Escape key come to mind at first. Speaking of descriptive titles, let's add some example use cases and copywriting tips. Something like we have for Notification. I think we can also take some content from the following resources I've used on Modals: |
If you'd like, feel free to start working on the article locally and throw up a pull request whenever you feel ready. We can iterate from there onwards! |
Hey! thanks for the tips, I`ll work on the article this weekend :D |
Modal
A modal is a dialog box that is displayed on top of the current page or another dialog box.
Functionality
→ Appear as a result of user interaction.
→ Used to provide additional information in context.
→ Used when you want to interrupt the user flow to something more important (e.g alertdialog)
→ Used for requesting input from the user.
Best practices
Implementation
TODO
Examples
https://react-bootstrap.github.io/components/modal/
https://reach.tech/dialog/
https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html
https://design.nib.com.au/language/master/#/organism/modal?_k=bezgi3
Accessibility
https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal
https://www.w3.org/TR/wai-aria-1.1/#dialog
Resources
https://uxplanet.org/best-practices-for-modals-overlays-dialog-windows-c00c66cddd8c
https://xd.adobe.com/ideas/process/ui-design/best-practices-for-designing-overlays/
https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal
https://www.w3.org/TR/wai-aria-1.1/#dialog
Visuals
Any relevant visuals that help describe the component.Additional context
Anything that does not fit into the other categories.The text was updated successfully, but these errors were encountered: