Keyboard interactions

Key
Interaction
Tab
Moves focus to the next button inside the alert dialog (last becomes first). If none of the buttons are selected, the focus is set on the first button.
Shift + Tab
Moves focus to the previous button inside the alert dialog (first becomes last). If none of the buttons are selected, the focus is set on the last button.
Esc
Dismisses the alert dialog. This is equivalent to choosing “Cancel” or an “OK” confirmation.
Esc
Dismisses the alert banner if possible. This is equivalent to selecting the close button.

Cursor guidelines

Cursor
Usage
Default (Arrow)
Use the default cursor for non-interactive elements and text within the alert dialog.
Pointer
Use the pointer cursor for any interactive elements, such as buttons, inside the alert dialog.

WCAG 2.2 compliance

Any criterion not mention in the below table are not applicable to this component or are resolved with underlying requirements, engineering, and styles of the entire system.

1 . Perceivable

Requirement
Criterion
Level
Compliance
Non-text content
1.1.1
A
Non-text elements, such as icons used in alert dialogs, must provide a text alternative that communicates the dialog's purpose. All alert dialogs need an accessible name (for example, via a title, aria-label, or associated text) so screen readers can announce their function.
Info and relationships, Identify purpose
1.3.1, 1.3.6
A, AAA
Alert dialogs should be understandable by assistive technologies like screen readers. This means using the proper semantic HTML or ARIA role of alertdialog should be utilized.
Use of color
1.4.1
A
Color is not used as a means to convey information or distinguish elements.
Contrast
1.4.3
AA
The visual presentation of text has a contrast ratio of at least 4.5:1.
Visual presentation
1.4.8
AAA
The width of text blocks is no more than 80 characters (40 for CJK languages), and text is never justified.
Non-text contrast
1.4.11
AA
The visual presentation of illustrations and component states have a contrast ratio of at least 3:1.
Text spacing
1.4.12
AA
Line height of text is at least 1.5x the font size.

2 . Operable

Requirement
Criterion
Level
Compliance
Keyboard
2.1.1, 2.1.3
A, AAA
All functionality of the component is operable through a keyboard without specific timing for keystrokes.
Keyboard traps
2.1.2
A
Focus can be moved away from the component using only a keyboard.
Seizures and physical reactions
2.3.1, 2.3.2, 2.3.3
A, AAA, AAA
There is no flashing content or unnecessary motion or animation in this component.
Focus order
2.4.3
A
Navigation sequences receive focus in an order that preserves meaning and operability.
Focus visible
2.4.7
AA
Keyboard states use an indicator that is visible with at least 3:1 contrast.