refactor(Notification): ariaLabel to aria-label (#13281)

* refactor(Notification): ariaLabel to aria-label * fix(Notification): rm stories default dupes * fix(InlineNotification): rm deprecated prop --------- Co-authored-by: Francine Lucca <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Mar 13, 2023 · c6c83ce · c6c83ce
1 parent 4871a96
commit c6c83ce
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 17 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -111,9 +111,10 @@ Map {
         "isRequired": true,
         "type": "string",
       },
-      "ariaLabel": Object {
+      "aria-label": Object {
         "type": "string",
       },
+      "ariaLabel": [Function],
       "children": Object {
         "type": "node",
       },
@@ -4026,6 +4027,9 @@ Map {
       "role": "status",
     },
     "propTypes": Object {
+      "aria-label": Object {
+        "type": "string",
+      },
       "children": Object {
         "type": "node",
       },
@@ -5064,7 +5068,7 @@ Map {
   },
   "NotificationButton" => Object {
     "defaultProps": Object {
-      "ariaLabel": "close notification",
+      "aria-label": "close notification",
       "notificationType": "toast",
       "renderIcon": Object {
         "$$typeof": Symbol(react.forward_ref),
@@ -5088,9 +5092,10 @@ Map {
       "type": "button",
     },
     "propTypes": Object {
-      "ariaLabel": Object {
+      "aria-label": Object {
         "type": "string",
       },
+      "ariaLabel": [Function],
       "className": Object {
         "type": "string",
       },
@@ -8456,9 +8461,10 @@ Map {
       "timeout": 0,
     },
     "propTypes": Object {
-      "ariaLabel": Object {
+      "aria-label": Object {
         "type": "string",
       },
+      "ariaLabel": [Function],
       "caption": Object {
         "type": "string",
       },

diff --git a/packages/react/src/components/Notification/Notification.js b/packages/react/src/components/Notification/Notification.js
@@ -7,6 +7,7 @@
 
 import PropTypes from 'prop-types';
 import React, { useEffect, useRef, useState } from 'react';
+import deprecate from '../../prop-types/deprecate';
 import cx from 'classnames';
 import {
   Close,
@@ -96,7 +97,8 @@ NotificationActionButton.propTypes = {
 };
 
 export function NotificationButton({
-  ariaLabel,
+  ['aria-label']: ariaLabel,
+  ariaLabel: deprecatedAriaLabel,
   className,
   type,
   renderIcon: IconTag,
@@ -119,8 +121,8 @@ export function NotificationButton({
       {...rest}
       // eslint-disable-next-line react/button-has-type
       type={type}
-      aria-label={ariaLabel}
-      title={ariaLabel}
+      aria-label={deprecatedAriaLabel || ariaLabel}
+      title={deprecatedAriaLabel || ariaLabel}
       className={buttonClassName}>
       {IconTag && <IconTag className={iconClassName} name={name} />}
     </button>
@@ -129,9 +131,18 @@ export function NotificationButton({
 
 NotificationButton.propTypes = {
   /**
-   * Specify a label to be read by screen readers on the notification button
+   * Specify a label to be read by screen readers on the container node
    */
-  ariaLabel: PropTypes.string,
+  ['aria-label']: PropTypes.string,
+
+  /**
+   * Deprecated, please use `aria-label` instead.
+   * Specify a label to be read by screen readers on the container note.
+   */
+  ariaLabel: deprecate(
+    PropTypes.string,
+    'This prop syntax has been deprecated. Please use the new `aria-label`.'
+  ),
 
   /**
    * Specify an optional className to be applied to the notification button
@@ -162,7 +173,7 @@ NotificationButton.propTypes = {
 };
 
 NotificationButton.defaultProps = {
-  ariaLabel: 'close notification',
+  ['aria-label']: 'close notification',
   notificationType: 'toast',
   type: 'button',
   renderIcon: Close,
@@ -206,6 +217,8 @@ NotificationIcon.propTypes = {
 };
 
 export function ToastNotification({
+  ['aria-label']: ariaLabel,
+  ariaLabel: deprecatedAriaLabel,
   role,
   onClose,
   onCloseButtonClick,
@@ -300,6 +313,7 @@ export function ToastNotification({
           notificationType="toast"
           onClick={handleCloseButtonClick}
           aria-hidden="true"
+          aria-label={deprecatedAriaLabel || ariaLabel}
           tabIndex="-1"
         />
       )}
@@ -311,7 +325,16 @@ ToastNotification.propTypes = {
   /**
    * Provide a description for "close" icon button that can be read by screen readers
    */
-  ariaLabel: PropTypes.string,
+  ['aria-label']: PropTypes.string,
+
+  /**
+   * Deprecated, please use `aria-label` instead.
+   * Provide a description for "close" icon button that can be read by screen readers
+   */
+  ariaLabel: deprecate(
+    PropTypes.string,
+    'This prop syntax has been deprecated. Please use the new `aria-label`.'
+  ),
 
   /**
    * Specify the caption
@@ -396,6 +419,7 @@ ToastNotification.defaultProps = {
 };
 
 export function InlineNotification({
+  ['aria-label']: ariaLabel,
   children,
   title,
   subtitle,
@@ -466,6 +490,7 @@ export function InlineNotification({
           notificationType="inline"
           onClick={handleCloseButtonClick}
           aria-hidden="true"
+          aria-label={ariaLabel}
           tabIndex="-1"
         />
       )}
@@ -474,6 +499,11 @@ export function InlineNotification({
 }
 
 InlineNotification.propTypes = {
+  /**
+   * Provide a description for "close" icon button that can be read by screen readers
+   */
+  ['aria-label']: PropTypes.string,
+
   /**
    * Specify the content
    */
@@ -547,7 +577,8 @@ InlineNotification.defaultProps = {
 
 export function ActionableNotification({
   actionButtonLabel,
-  ariaLabel,
+  ['aria-label']: ariaLabel,
+  ariaLabel: deprecatedAriaLabel,
   children,
   role,
   onActionButtonClick,
@@ -637,7 +668,7 @@ export function ActionableNotification({
 
       {!hideCloseButton && (
         <NotificationButton
-          aria-label={ariaLabel}
+          aria-label={deprecatedAriaLabel || ariaLabel}
           notificationType="actionable"
           onClick={handleCloseButtonClick}
         />
@@ -655,7 +686,16 @@ ActionableNotification.propTypes = {
   /**
    * Provide a description for "close" icon button that can be read by screen readers
    */
-  ariaLabel: PropTypes.string,
+  ['aria-label']: PropTypes.string,
+
+  /**
+   * Deprecated, please use `aria-label` instead.
+   * Provide a description for "close" icon button that can be read by screen readers
+   */
+  ariaLabel: deprecate(
+    PropTypes.string,
+    'This prop syntax has been deprecated. Please use the new `aria-label`.'
+  ),
 
   /**
    * Specify the content

diff --git a/packages/react/src/components/Notification/stories/ActionableNotification.stories.js b/packages/react/src/components/Notification/stories/ActionableNotification.stories.js
@@ -23,7 +23,7 @@ export default {
     kind: 'error',
     lowContrast: false,
     hideCloseButton: false,
-    ariaLabel: 'closes notification',
+    ['aria-label']: 'closes notification',
     statusIconDescription: 'notification',
     onClose: action('onClose'),
     onCloseButtonClick: action('onCloseButtonClick'),
@@ -43,6 +43,11 @@ export const Default = () => (
 export const Playground = (args) => <ActionableNotification {...args} />;
 
 Playground.argTypes = {
+  ['aria-label']: {
+    table: {
+      disable: true,
+    },
+  },
   ariaLabel: {
     table: {
       disable: true,

diff --git a/packages/react/src/components/Notification/stories/InlineNotification.stories.js b/packages/react/src/components/Notification/stories/InlineNotification.stories.js
@@ -23,7 +23,7 @@ export default {
     kind: 'error',
     lowContrast: false,
     hideCloseButton: false,
-    ariaLabel: 'closes notification',
+    ['aria-label']: 'closes notification',
     statusIconDescription: 'notification',
     onClose: action('onClose'),
     onCloseButtonClick: action('onCloseButtonClick'),
@@ -45,6 +45,11 @@ Playground.argTypes = {
       disable: true,
     },
   },
+  ['aria-label']: {
+    table: {
+      disable: true,
+    },
+  },
   ariaLabel: {
     table: {
       disable: true,

diff --git a/packages/react/src/components/Notification/stories/ToastNotification.stories.js b/packages/react/src/components/Notification/stories/ToastNotification.stories.js
@@ -23,7 +23,7 @@ export default {
     kind: 'error',
     lowContrast: false,
     hideCloseButton: false,
-    ariaLabel: 'closes notification',
+    ['aria-label']: 'closes notification',
     statusIconDescription: 'notification',
     onClose: action('onClose'),
     onCloseButtonClick: action('onCloseButtonClick'),
@@ -48,6 +48,11 @@ Playground.argTypes = {
       disable: true,
     },
   },
+  ['aria-label']: {
+    table: {
+      disable: true,
+    },
+  },
   ariaLabel: {
     table: {
       disable: true,