feat(notification)!: ToastNotification props

Add new props: statusIconDescription and closeButtonDescription

BREAKING CHANGE: remove iconDescription prop

docs/src/pages/components/InlineNotification.svx

@@ -7,6 +7,10 @@ components: ["InlineNotification", "NotificationActionButton"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
+Notification that appears inline.
+
+See also: [ToastNotification](ToastNotification)
+
 ## Default (error)
 
 <InlineNotification title="Error:" subtitle="An internal server error occurred." />

docs/src/pages/components/ToastNotification.svx

@@ -3,6 +3,13 @@
   import Preview from "../../components/Preview.svelte";
 </script>
 
+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)
 
 <ToastNotification title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />
@@ -30,6 +37,19 @@ Set `fullWidth` to `true` for the notification to span the full width of its con
   <strong slot="caption">{new Date().toLocaleString()}</strong>
 </ToastNotification>
 
+## 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`.
+
+<ToastNotification 
+  title="错误"
+  subtitle="发生内部服务器错误"
+  statusIconDescription="错误图标"
+  closeButtonDescription="关闭通知"
+/>
+
 ## Hidden close button
 
 <ToastNotification hideCloseButton kind="warning" title="Scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="{new Date().toLocaleString()}" />

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
   >
-    <NotificationIcon kind="{kind}" />
+    <NotificationIcon kind="{kind}" iconDescription="{statusIconDescription}" />
     <div class:bx--toast-notification__details="{true}">
       <h3 class:bx--toast-notification__title="{true}">
         <slot name="title">{title}</slot>
@@ -105,7 +111,7 @@
     </div>
     {#if !hideCloseButton}
       <NotificationButton
-        iconDescription="{iconDescription}"
+        iconDescription="{closeButtonDescription}"
         on:click="{close}"
       />
     {/if}