From dc07e8dca803b69a1c3a227e04278caef2908702 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Laussel=20LO=C3=AFc?= Date: Wed, 5 Sep 2018 23:13:50 +0300 Subject: [PATCH] Update toast documentation following pull #27155 Also remove close button everywhere just let it when autohide is set to false --- js/tests/visual/toast.html | 3 -- site/docs/4.1/components/toasts.md | 49 ++++++++++++++++-------------- 2 files changed, 27 insertions(+), 25 deletions(-) diff --git a/js/tests/visual/toast.html b/js/tests/visual/toast.html index d069a163a7..1178073f55 100644 --- a/js/tests/visual/toast.html +++ b/js/tests/visual/toast.html @@ -31,9 +31,6 @@ Bootstrap 11 mins ago -
Hello, world! This is a toast message with autohide in 2 seconds diff --git a/site/docs/4.1/components/toasts.md b/site/docs/4.1/components/toasts.md index 12fbf60d23..553b79fbe4 100644 --- a/site/docs/4.1/components/toasts.md +++ b/site/docs/4.1/components/toasts.md @@ -71,9 +71,6 @@ Plus, they'll easily stack. Bootstrap just now -
See? Just like this. @@ -85,9 +82,6 @@ Plus, they'll easily stack. Bootstrap 2 seconds ago -
Heads up, toasts will stack automatically @@ -99,16 +93,39 @@ Plus, they'll easily stack. ## Accessibility -Toasts are intended to be small interruptions to your visitors or users, so to help those on screen readers, you should wrap your toasts in an [`aria-live` region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). This allows screen readers the ability to see suggested interruptions without any visual cues. -To improve accessibility level, we strongly recomend to use `autohide: false` and add a `close` button into the header to let user dismiss that element. -You also need to adapt the `role` and `aria-live` level depending on the content. If it's an important message like error, use an `alert` role `assertive` otherwise use a role `status` with a `polite` level. +Toasts are intended to be small interruptions to your visitors or users, so to help those on screen readers, you should wrap your toasts in an [`aria-live` region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). This allows screen readers the ability to see suggested interruptions without any visual cues. If the information needed is important for the process, e.g. for a list of errors in a form, then use the [alert component]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/alerts/) instead of toast. + +You also need to adapt the `role` and `aria-live` level depending on the content. If it's an important message like an error, use `role="alert" aria-live="assertive"`, otherwise use `role="status" aria-live="polite"` attributes. + +As the content you're displaying changes, be sure to update the [`delay` timeout](#options) to ensure people have enough time to read the toast. {% highlight html %} -
+ {% endhighlight %} +When using `autohide: false`, you must add a close button to allow users to dismiss the toast. + +
+{% capture example %} + +{% endcapture %} +{% include example.html content=example %} +
+ ## Placement Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle. If you're only ever going to show one toast at a time, put the positioning styles right on the `.toast.` @@ -121,9 +138,6 @@ Place toasts with custom CSS as you need them. The top right is often used for n Bootstrap 11 mins ago -
Hello, world! This is a toast message. @@ -148,9 +162,6 @@ For systems that generate more notifications, consider using a wrapping element Bootstrap just now -
See? Just like this. @@ -162,9 +173,6 @@ For systems that generate more notifications, consider using a wrapping element Bootstrap 2 seconds ago -
Heads up, toasts will stack automatically @@ -190,9 +198,6 @@ You can also get fancy with flexbox utilities. Bootstrap 11 mins ago -
Hello, world! This is a toast message.