feat(notification)!: replace iconDescription prop with statusIconDescription, closeButtonDescription (#1591)

Fixes #672, fixes #1563

* breaking: remove `iconDescription` prop from `InlineNotification`, `ToastNotification`

* breaking: require `iconDescription` prop in `NotificationIcon`

* feat: add new `statusIconDescription` and `closeButtonDescription` to `InlineNotification`, `ToastNotification`

src/Notification/InlineNotification.svelte

@@ -27,8 +27,14 @@
   /** Set to `true` to hide the close button */
   export let hideCloseButton = false;
 
-  /** 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";
 
   import { createEventDispatcher, onMount } from "svelte";
   import NotificationIcon from "./NotificationIcon.svelte";
@@ -82,7 +88,11 @@
     on:mouseleave
   >
     <div class:bx--inline-notification__details="{true}">
-      <NotificationIcon notificationType="inline" kind="{kind}" />
+      <NotificationIcon
+        notificationType="inline"
+        kind="{kind}"
+        iconDescription="{statusIconDescription}"
+      />
       <div class:bx--inline-notification__text-wrapper="{true}">
         <p class:bx--inline-notification__title="{true}">
           <slot name="title">{title}</slot>
@@ -96,7 +106,7 @@
     <slot name="actions" />
     {#if !hideCloseButton}
       <NotificationButton
-        iconDescription="{iconDescription}"
+        iconDescription="{closeButtonDescription}"
         notificationType="inline"
         on:click="{close}"
       />

src/Notification/NotificationIcon.svelte

@@ -12,7 +12,7 @@
   export let notificationType = "toast";
 
   /** Specify the ARIA label for the icon */
-  export let iconDescription = "Closes notification";
+  export let iconDescription;
 
   import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
   import ErrorFilled from "../icons/ErrorFilled.svelte";

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}