toasts

Toasts

What is needed?

All toasts share the required common class "dqpl-toast". Within the dqpl-toast element, the message should be wrapped in a div with the "dqpl-toast-message" class. In addition, all toasts with the exception of "Action Needed" toasts should have a close button with the classes "dqpl-toast-dismiss fa fa-close" along with a proper accessible name (aria-label="Dismiss foo notification"). Remember to apply aria-hidden="true" to any icons in the toasts.

Confirmation Toasts

The toast element should have the "dqpl-toast-success" class. Within the "dqpl-toast-message" element an icon element with the "fa fa-info-circle" classes should be used.

Caution Toasts

The toast element should have the "dqpl-toast-warning" class. Within the "dqpl-toast-message" element an icon element with the "fa fa-warning" classes should be used.

Action Needed Toasts

The toast element should have the "dqpl-toast-error" class. Within the "dqpl-toast-message" element an icon element with the "fa fa-minus-circle" classes should be used. When an "Action Needed" toast is displayed a "dqpl-scrim-light" element should be displayed as an overlay over the main workspace (the topbar and sidebar will still be visible above the scrim). Remember to ensure that keyboard users will not be able to interact with the content behind the scrim.

Animation

Toggling the display of toasts should be done with fade-ins and fade-outs

Example HTML

<div class="dqpl-toast dqpl-toast-success">
  <div class="dqpl-toast-message">
    <div class="fa fa-info-circle" aria-hidden="true"></div><span>I propose a toast!</span>
  </div>
  <button class="dqpl-toast-dismiss fa fa-close" type="button" aria-label="Dismiss notification"></button>
</div>
<div class="dqpl-toast dqpl-toast-warning">
  <div class="dqpl-toast-message">
    <div class="fa fa-warning" aria-hidden="true"></div><span>THIS TOAST IS STALE!</span>
  </div>
  <button class="dqpl-toast-dismiss fa fa-close" type="button" aria-label="Dismiss notification"></button>
</div>
<div class="dqpl-toast dqpl-toast-error">
  <div class="dqpl-toast-message">
    <div class="fa fa-minus-circle" aria-hidden="true"></div><span>The toast is burnt. Please<a href="/toasty">make some more toast</a></span>
  </div>
  <button class="dqpl-toast-dismiss fa fa-close" type="button" aria-label="Dismiss notification"></button>
</div>
<div class="dqpl-scrim-light"></div>

Implementation options

There are a couple of recommended ways of implementing the toasts which we leave up to the implementer's discretion...

• If the toast contains interactive items (like links) we recommend that focus is shifted to the toast to give the user the ability to interact with that control without having to tab around to find it.
• If the toast contains a simple message that gets auto-hidden, we recommend NOT shifting focus and utilizing role="alert" which will announce the message to AT.