dequelabs / dequelabs/cauldron

Toast Component - Auto-dismiss Enhancement

Open
#2,099 0 comments 0 reactions 0 assignees View on GitHub
rfc rfc:accepted
Dominant language
TypeScript
Stars
127
Forks
31
Avg merge
2d 12h
Merged PRs (30d)
8

Description

# 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

```ts
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

```tsx
setShow(false)}
autoHide
>
Your changes have been saved!

```

### Referencing Implementations

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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.