eBay MIND Patterns
  • Introduction
  • Messaging
    • Alert Dialog
    • Confirm Dialog
    • File Preview Card
    • Form Validation
    • Inline Notice
    • Input Meter
    • Input Validation
    • Page Notice
    • Star Rating (static)
    • Time
    • Toast Dialog
    • Tourtip
  • Input
    • Button
    • Checkbox
    • Chips Combobox
    • Combobox
    • Date Picker
    • File Input
    • Input Dialog
    • Listbox
    • Listbox Button
    • Menu
    • Menu Button
    • Phone Input
    • Radio
    • Select
    • Star Rating (interactive)
    • Switch
    • Toggle Button
    • Toggle Button Group
  • Navigation
    • Breadcrumbs
    • Fake Menu Button
    • Fake Tabs
    • Link
    • Pagination
    • Skip Navigation
    • Tile
  • Disclosure
    • Accordion
    • Carousel
    • Lightbox Dialog
    • Details
    • Flyout
    • Footnote
    • Infotip Button
    • Panel Dialog
    • Pulldown List
    • Segmented Buttons
    • Tabs
    • Tooltip
  • Structure
    • Description List
    • Form
    • Heading
    • Image
    • Item Tile
    • Layout Grid
    • Region
    • Table
    • Table Cell
  • Techniques
    • Active Descendant
    • Ambiguous Label
    • Background Icon
    • Keyboard Trap
    • Live Region
    • Offscreen Text
    • Roving Tabindex
    • Skip to Main Content
    • Alternative Text
  • Anti-Patterns
    • Disabling Pinch-to-Zoom
    • Hand Cursor on Buttons
    • JavaScript HREF
    • Layout Table
    • Mouse Hover on Static Elements
    • Open New Window
    • Setting Focus on Page Load
    • Tabindex-itis
    • Title Tooltip
  • Appendix
    • ARIA Essentials
    • Checklist
    • FAQ
    • Keyboard Interface
    • Known Issues
    • Legacy Patterns
      • Fullscreen Dialog
    • MIND Pattern Template
    • Pattern Naming Scheme
    • References
    • Utilities
Powered by GitBook
On this page
  • Introduction
  • Best Practices
  • Working Examples
  • Terminology
  • Interaction Design
  • Developer Guide
  • ARIA Reference
  1. Messaging

Toast Dialog

A passively spawned non-modal dialog.

PreviousTimeNextTourtip

Last updated 3 months ago

Introduction

A toast dialog is a non-modal, non-intrusive dialog containing a system level notification for the user.

Best Practices

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.

Working Examples

Terminology

This section is not yet available.

Interaction Design

This section provides interaction design for keyboard, screen reader and pointing devices.

Keyboard

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.

Screen Reader

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.

Mouse

This section is not yet available.

Developer Guide

This section is not yet available.

ARIA Reference

This section gives an overview of ARIA usage within the context of this pattern.

role=dialog

Informs the assistive technology that the user is inside of a dialog.

aria-modal=false

Informs assistive technology that the dialog is not modal.

Experience the pattern in action on our companion .

Examine the required markup structure in the .

View a fully styled example on our .

eBay MIND patterns examples website
Bones GitHub project
eBay Skin website
Toast dialog on small screen.
Toast dialog on large screen.