Add `Modals`
Opened this issue · 0 comments
Sn3llius commented
Description
Modals are a type of user interface element that provides a dialog box or pop-up window that appears on top of the main content. They are used to capture the user's attention and require an interaction before the user can return to the main interface. Modals are essential for displaying important information, prompting user actions, and improving the overall user experience. Common use cases include alert messages, forms, confirmation dialogs, and media displays.
Design Guideline
https://m3.material.io/components/dialogs/overview
Suggested Solution
Display and Overlay:
- Create a semi-transparent overlay background that covers the main content.
- Display the modal on top of this overlay, ensuring it is centered and prominent.
Interactivity and Accessibility:
- Ensure the modal traps focus within its elements when opened.
- Support keyboard navigation, allowing users to navigate using e.g. Tab key.
- Provide multiple ways to close the modal, including:
- Clicking a close button.
- Clicking outside the modal (on the overlay). <-- not sure about it
- Pressing the Escape key.
Alternatives
No response
Additional Context
No response
Related Issues/Pull Requests
No response