You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: site/src/content/docs/components/toasts.mdx
+7-3Lines changed: 7 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -13,6 +13,10 @@ Things to know when using the toast plugin:
13
13
- Toasts are opt-in for performance reasons, so **you must initialize them yourself**.
14
14
- Toasts will automatically hide if you do not specify `autohide: false`.
15
15
16
+
<Callouttype="warning">
17
+
**Consider whether a toast is the right pattern before using it.** Toasts don’t receive focus when they appear and often disappear automatically, so they work best for brief, supplemental updates. For validation errors, task-critical guidance, or actions that users need to complete, prefer a more persistent pattern such as the [alert component]([[docsref:/components/alerts]]).
18
+
</Callout>
19
+
16
20
<Calloutname="info-prefersreducedmotion" />
17
21
18
22
## Examples
@@ -260,7 +264,7 @@ You can also get fancy with flexbox utilities to align toasts horizontally and/o
260
264
261
265
## Accessibility
262
266
263
-
Toasts are intended to be small interruptions to your visitors or users, so to help those with screen readers and similar assistive technologies, you should wrap your toasts in an [`aria-live` region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Changes to live regions (such as injecting/updating a toast component) are automatically announced by screen readers without needing to move the user’s focus or otherwise interrupt the user. Additionally, include `aria-atomic="true"` to ensure that the entire toast is always announced as a single (atomic) unit, rather than just announcing what was changed (which could lead to problems if you only update part of the toast’s content, or if displaying the same toast content at a later point in time). If the information needed is important for the process, e.g. for a list of errors in a form, then use the [alert component]([[docsref:/components/alerts]]) instead of toast.
267
+
Toasts are intended to be small interruptions to your visitors or users, so to help those with screen readers and similar assistive technologies, you should wrap your toasts in an [`aria-live` region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Changes to live regions (such as injecting/updating a toast component) are automatically announced by screen readers without needing to move the user’s focus or otherwise interrupt the user. Additionally, include `aria-atomic="true"` to ensure that the entire toast is always announced as a single (atomic) unit, rather than just announcing what was changed (which could lead to problems if you only update part of the toast’s content, or if displaying the same toast content at a later point in time). Because toasts don’t receive focus and may be dismissed automatically, they shouldn’t be the only way to present information users may need to act on or review later. If the information needed is important for the process, e.g. for a list of errors in a form, then use the [alert component]([[docsref:/components/alerts]]) instead of toast.
264
268
265
269
Note that the live region needs to be present in the markup *before* the toast is generated or updated. If you dynamically generate both at the same time and inject them into the page, they will generally not be announced by assistive technologies.
266
270
@@ -269,8 +273,8 @@ You also need to adapt the `role` and `aria-live` level depending on the content
269
273
As the content you’re displaying changes, be sure to update the [`delay` timeout](#options) so that users have enough time to read the toast.
0 commit comments