Modals

A modal is a type of dialog that appears on top of the main content interrupting the flow and requiring user input. All the content underneath a modal is inert, and users cannot interact with it. An overlay visually dims inert content, so it is difficult to discern or interact with it.

Usage

A modal is a powerful tool that can either draw user's attention on a critical task or away from it. For this reason, you have to consider when to use it carefully. Modals do their best in:

• Grabbing 100% of the user's attention to have an immediate response on a task that is blocking or potentially destructive for the experience
• Collecting critical information related to the current task that potentially would lesser the user effort in the future
• Showing additional content in context (e.g. larger image or video) or out-of-context (e.g. notification)
• Splitting complex tasks into smaller steps
• Announcing feature release

Designing modals

Don't include multiple steps in a modal, open a modal over another one, or open and close modals consecutively.

Don't use modals to notify messages and errors status. Always keep these kind of information on the main page without interrupting the user flow.

Placement

On a desktop, the content max width is set by default to 600px but it can be variable based on situations, just keep in mind readability of the content while changing the width.

On mobile, the modal fill the 100% of the width of the screen, making the content easier to read when displayed on small screens, while the height will grow based on the content until it reachs the 95% of the viewport height.

Accessibility

The Modal component provided by Wanda is fully accessible and handle all the following internally so you don't have to care about it.

Interactions

The following rules are useful when you define custom modal content, in these cases you have to pay attention to a bunch of thing to pass accessibility criteria.

Modals must give the user the possibility to navigate them via keyboard to guarantee accessibility. Follow the steps below to ensure a smooth user experience:

• Make the element that triggers the modal keyboard-accessible
• Once the modal is open, move the focus on the first focusable element of it
• Remember to trap focus inside the modal until it is closed
• Once the modal is closed, return the focus to the trigger element

Make sure that the following interactions are valid within the modal:

• Tab moves focus to the next focusable element inside the modal. If the focus is on the last element, moves it again to the first one.
• Shift + Tab moves focus to the previous focusable element inside the modal. If the focus is on the first element, moves it again to the last one.
• Escape closes the modal.

Assistive technologies

The modal element must have the role="dialog" and aria-modal="true" properties to allow assistive technologies to identify it as the modal container. Everything is required to operate the modal are descendants of this element.

An element with dialog role has either:

A value for aria-labelledby that refers to the element containing the title of the modal if the modal has a visible label. A value for aria-label if the modal does not have a visible label.

Since marking a modal by setting aria-modal prevents users from perceiving content outside the modal, be sure to mark a modal only when both:

• Application code prevents all users from interacting in any way with content outside of it.
• Visual styling obscures the content outside of it.