Toast Component - Auto-dismiss Enhancement

[scurker]

Toast

Overview

Add auto-dismiss functionality to the Toast component, allowing it to automatically hide when a specific property is set to true. This enhancement improves user experience by reducing the need for manual dismissal of transient notifications while maintaining accessibility standards.

Problem Statement

Currently, the Cauldron Toast component requires either manual dismissal via the close button or programmatic control through the show prop. Many use cases for toast notifications involve temporary status messages that should disappear automatically after being read. We've recently received new guidance that this is an acceptable pattern and can meet WCAG compliance and can help with reducing cognitive load for non-critical notifications.

Component Design

Visual Design

The auto-dismiss behavior is purely functional. No visual design changes needed.

Interface / Props

interface ToastProps {
  // ...existing props

  /**
   * Set to false or undefined to disable auto-dismiss.
   */
  autoHide?: boolean;
}

Accessibility

There's a couple of things we should consider:

1. Pause on hover/focus to allow for the user adequate time to read or understand the notification
2. Set the auto-hide duration to 5 seconds

We will need to document the accessibility considerations around when auto dismissal behavior can and cannot be applied. For example, if there is a action that is exclusively performed via the toast auto dismiss cannot be used.

Responsiveness

N/A

Usage Examples

<Toast 
  show={show} 
  type="confirmation"
  onDismiss={() => setShow(false)}
  autoHide
>
  Your changes have been saved!
</Toast>

Referencing Implementations

• MUI Snackbar: https://mui.com/material-ui/react-snackbar/
• Adobe Spectrum Toast: https://react-spectrum.adobe.com/react-spectrum/Toast.html