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}