Toast Dialog
A passively spawned non-modal dialog.
Last updated
A passively spawned non-modal dialog.
Last updated
A toast dialog is a non-modal, non-intrusive dialog containing a system level notification for the user.
A toast dialog is non-modal and should not steal or trap keyboard focus.
When the dialog becomes visible, it must be placed immediately after the current active element in the DOM. This ensures a logical reading and tabbing order in the page.
Experience the pattern in action on our companion eBay MIND patterns examples website.
Examine the required markup structure in the Bones GitHub project.
View a fully styled example on our eBay Skin website.
This section is not yet available.
This section provides interaction design for keyboard, screen reader and pointing devices.
A toast dialog is non-modal and should not steal or trap keyboard focus.
The toast should be positioned in the dom so that the next TAB key press moves focus from the currently focussed element into the toast dialog element.
A toast dialog is non-modal and should not steal or trap screen reader virtual cursor.
The toast should be positioned in the dom so that the virtual cursor moves from the currently focussed element onto the toast dialog element.
The screen reader should announce the title and contents of the toast dialog.
This section is not yet available.
This section is not yet available.
This section gives an overview of ARIA usage within the context of this pattern.
Informs the assistive technology that the user is inside of a dialog.
Informs assistive technology that the dialog is not modal.
