Related Pages: Message Popups, Dialogs
| Table of Contents |
|---|
Description
A popup is a window which appears over the primary screen. It usually appears as a result of a user action. A popup must be dismissed by the user before returning to the primary screen.
Types
Type | Usage | Example |
|---|---|---|
To display warnings, error messages, and important information. |   | |
To collect information from the user, or to allow them to make decisions. |  |
...
A popup window usually appears as a result of a user action, such as clicking a button, icon, or link.
Structure
A popup window consists of:
A colored header, including:
a title.
a closing button (X).
a help button (optional).
A content area, which may contain text, inputs and controls.
Buttons, including:
a primary action button.
a secondary action button, if relevant.
other action buttons, if relevant.
The popup appears over a semi-transparent background.
...
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Focus management
The tab index flow will follow the order displayed below. Shift + Tab will follow the reverse order.
...
In case there are more than 2 dialog buttons at the bottom of the popup, see example below:
...
If the content is not focusable, 1st item to get focus will be the Enter button.
The same logic order as above should apply even if any of the other buttons don’t appear.
Focus visual style on pop-up headers will have a different indication than other LUX components due to the background fill color:
Help, Informative, and Error will use a White color F/ocus
The warning pop-up will use a Black color Focus
 |  |  |  |
Design
See Message Popups and Dialogs.
...