diff --git a/docs/src/pages/components/InlineNotification.svx b/docs/src/pages/components/InlineNotification.svx index cca32a98..eb986ae7 100644 --- a/docs/src/pages/components/InlineNotification.svx +++ b/docs/src/pages/components/InlineNotification.svx @@ -7,6 +7,10 @@ components: ["InlineNotification", "NotificationActionButton"] import Preview from "../../components/Preview.svelte"; +Notification that appears inline. + +See also: [ToastNotification](ToastNotification) + ## Default (error) diff --git a/docs/src/pages/components/ToastNotification.svx b/docs/src/pages/components/ToastNotification.svx index 63a8f03c..571b6289 100644 --- a/docs/src/pages/components/ToastNotification.svx +++ b/docs/src/pages/components/ToastNotification.svx @@ -3,6 +3,13 @@ import Preview from "../../components/Preview.svelte"; +Toasts are non-modal, time-based window elements used to display short messages; +they usually appear at the top of the screen and disappear after a few seconds. + +See [detailed +usage](https://carbondesignsystem.com/components/notification/usage). +See also: [InlineNotification](InlineNotification) + ## Default (error) @@ -30,6 +37,19 @@ Set `fullWidth` to `true` for the notification to span the full width of its con {new Date().toLocaleString()} +## Accessible icon descriptions + +The status icon and close button icon descriptions appear on cursor hover and are read +by assistive technology. Default descriptions are provided in English and can be +overridden via `statusIconDescription` and `closeButtonDescription`. + + + ## Hidden close button diff --git a/src/Notification/ToastNotification.svelte b/src/Notification/ToastNotification.svelte index 0048fd47..cdc72ea6 100644 --- a/src/Notification/ToastNotification.svelte +++ b/src/Notification/ToastNotification.svelte @@ -27,8 +27,14 @@ /** Specify the caption text */ export let caption = ""; - /** Specify the ARIA label for the icon */ - export let iconDescription = "Closes notification"; + /** + * Specify the ARIA label for the status icon + * @type {string} + * */ + export let statusIconDescription = kind + " icon"; + + /** Specify the ARIA label for the close button */ + export let closeButtonDescription = "Close notification"; /** Set to `true` to hide the close button */ export let hideCloseButton = false; @@ -90,7 +96,7 @@ on:mouseenter on:mouseleave > - +

{title} @@ -105,7 +111,7 @@

{#if !hideCloseButton} {/if}