fix(notification): update status icon description prop (#5266)

* fix(notification): update status icon description prop * fix(notification): make props required for a11y
carbon-design-system · Feb 10, 2020 · 3e77d6d · 3e77d6d
1 parent b8c1e1c
commit 3e77d6d
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 6 deletions.
diff --git a/packages/react/src/components/Notification/Notification-story.js b/packages/react/src/components/Notification/Notification-story.js
@@ -35,6 +35,10 @@ const notificationProps = () => ({
     'Icon description (iconDescription)',
     'describes the close button'
   ),
+  statusIconDescription: text(
+    'Status icon description (statusIconDescription)',
+    'describes the status icon'
+  ),
   hideCloseButton: boolean('Hide close button (hideCloseButton)', false),
   onCloseButtonClick: action('onCloseButtonClick'),
 });

diff --git a/packages/react/src/components/Notification/Notification.js b/packages/react/src/components/Notification/Notification.js
@@ -238,8 +238,9 @@ NotificationIcon.propTypes = {
 export function ToastNotification({
   role,
   notificationType,
-  onCloseButtonClick, // eslint-disable-line
-  iconDescription, // eslint-disable-line
+  onCloseButtonClick,
+  iconDescription,
+  statusIconDescription,
   className,
   caption,
   subtitle,
@@ -287,7 +288,7 @@ export function ToastNotification({
       <NotificationIcon
         notificationType={notificationType}
         kind={kind}
-        iconDescription={iconDescription}
+        iconDescription={statusIconDescription || `${kind} icon`}
       />
       <NotificationTextDetails
         title={title}
@@ -359,6 +360,11 @@ ToastNotification.propTypes = {
    */
   iconDescription: PropTypes.string.isRequired,
 
+  /**
+   * Provide a description for "status" icon that can be read by screen readers
+   */
+  statusIconDescription: PropTypes.string.isRequired,
+
   /**
    * By default, this value is "toast". You can also provide an alternate type
    * if it makes sense for the underlying `<NotificationTextDetails>` and `<NotificationButton>`
@@ -392,8 +398,9 @@ export function InlineNotification({
   actions,
   role,
   notificationType,
-  onCloseButtonClick, // eslint-disable-line
-  iconDescription, // eslint-disable-line
+  onCloseButtonClick,
+  iconDescription,
+  statusIconDescription,
   className,
   subtitle,
   title,
@@ -426,7 +433,7 @@ export function InlineNotification({
         <NotificationIcon
           notificationType={notificationType}
           kind={kind}
-          iconDescription={iconDescription}
+          iconDescription={statusIconDescription || `${kind} icon`}
         />
         <NotificationTextDetails
           title={title}
@@ -499,6 +506,11 @@ InlineNotification.propTypes = {
    */
   iconDescription: PropTypes.string.isRequired,
 
+  /**
+   * Provide a description for "status" icon that can be read by screen readers
+   */
+  statusIconDescription: PropTypes.string.isRequired,
+
   /**
    * By default, this value is "inline". You can also provide an alternate type
    * if it makes sense for the underlying `<NotificationTextDetails>` and `<NotificationButton>`