diff --git a/packages/toast/README.md b/packages/toast/README.md index dea3ddde51d..6cf4e6c94fc 100644 --- a/packages/toast/README.md +++ b/packages/toast/README.md @@ -1,6 +1,6 @@ -## Description +## Overview -`sp-toast` elements display brief, temporary notifications. They are noticeable but do not disrupt the user experience and do not require an action to be taken. +`` elements display brief, temporary notifications. They are noticeable but do not disrupt the user experience and do not require an action to be taken. ### Usage @@ -8,23 +8,32 @@ [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/toast?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/toast) [![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/74g0Hq6Hwy0ehvo7tssT/src/index.ts) -``` +```bash yarn add @spectrum-web-components/toast ``` Import the side effectful registration of `` via: -``` +```ts import '@spectrum-web-components/toast/sp-toast.js'; ``` When looking to leverage the `Toast` base class as a type and/or for extension purposes, do so via: -``` +```ts import { Toast } from '@spectrum-web-components/toast'; ``` -## Example +### Anatomy + +The toast consists of two key parts: + +- The message content in its default slot +- An optional action button using `slot="action"` + +#### Content + +The message in its default slot: ```html @@ -32,7 +41,9 @@ import { Toast } from '@spectrum-web-components/toast'; ``` -### With actions +#### Action Button + +An optional action using `slot="action"`: ```html @@ -48,7 +59,11 @@ import { Toast } from '@spectrum-web-components/toast'; ``` -### Wrapping +### Options + +#### Width and Wrapping + +The toast can be constrained to a specific width, and its content will wrap accordingly: ```html @@ -64,9 +79,17 @@ import { Toast } from '@spectrum-web-components/toast'; ``` -## Variants +#### Variants + +By default, the toast is rendered in gray and does not have an icon. This is used when the message is neutral in tone or when its semantics do not fit in any of the other variants. + +However, the toast supports several variants to convey different types of messages: + + + + -### Negative +Use `variant="negative"` to show an error or failure. ```html @@ -74,7 +97,11 @@ import { Toast } from '@spectrum-web-components/toast'; ``` -### Positive + + + + +Use `variant="positive"` to show a successful action or completion of a task. ```html @@ -82,7 +109,11 @@ import { Toast } from '@spectrum-web-components/toast'; ``` -### Info + + + + +Use `variant="info"` to show an informative message. ```html @@ -90,6 +121,71 @@ import { Toast } from '@spectrum-web-components/toast'; ``` -## Accessibility + + + +### Behaviors + +#### Timeout + +The toast can be configured to automatically dismiss itself after a specified duration. For accessibility reasons, the minimum timeout is 6000ms (6 seconds). For longer messages, it's recommended to add 1000ms for every 120 words. + +```html + + This message will disappear after 6 seconds. + +``` + +#### Close Events + +The toast dispatches a `close` event when it's being closed, either by user action or timeout. This event can be prevented using `event.preventDefault()`. + +### Accessibility + +#### Keyboard Interaction -An `` element is by default rendered with a `role` of `alert`. When rendering the `` to a page, it should be place in a container with a `role` of `region`. +The toast supports keyboard navigation: + +- When an action button is present, it can be accessed using the Tab key +- The close button (when present) can be activated using Enter or Space + +#### Place toasts in a region + +The `` element is rendered with a `role` of `alert` to notify screen readers. When rendering a toast on a page, it should be placed in a container with a `role` of `region` for better accessibility. + +```html +
+ + This is important information that you should read, soon. + +
+``` + +#### Allow time for reading + +Accessibility concerns require that a Toast is available for at least 6000ms before being dismissed. + +The toast ensures that messages are visible for a minimum of 6 seconds to give users enough time to read and comprehend the information. For longer messages, the timeout is automatically extended. + +It is suggested that messages longer than 120 words should receive an additional 1000ms in their timeout for each additional 120 words in the message. + +For example, a message with 240 words should have a timeout of 7000ms, and a message with 360 words should have a timeout of 8000ms. + +#### Provide appropriate labels + +- The toast's variant icon includes an appropriate `icon-label` for screen readers (e.g., "Information" for info variant) +- Action buttons should have clear, descriptive labels + +```html + + This is important information that you should read, soon. + + Ignore warning + + +```