From dfda9dab6fc3a7760d9ecae7ea8b6a6553c72469 Mon Sep 17 00:00:00 2001 From: Jesse Hull Date: Thu, 2 Mar 2023 13:39:30 -0500 Subject: [PATCH 1/3] refactor(Notification): ariaLabel to aria-label --- .../__snapshots__/PublicAPI-test.js.snap | 15 ++-- .../components/Notification/Notification.js | 70 ++++++++++++++++--- .../stories/ActionableNotification.stories.js | 6 ++ .../stories/InlineNotification.stories.js | 6 ++ .../stories/ToastNotification.stories.js | 6 ++ 5 files changed, 89 insertions(+), 14 deletions(-) diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index f56ee3089ede..43dcc7613f88 100644 --- 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", }, @@ -4023,6 +4024,10 @@ Map { "role": "status", }, "propTypes": Object { + "aria-label": Object { + "type": "string", + }, + "ariaLabel": [Function], "children": Object { "type": "node", }, @@ -5060,7 +5065,7 @@ Map { }, "NotificationButton" => Object { "defaultProps": Object { - "ariaLabel": "close notification", + "aria-label": "close notification", "notificationType": "toast", "renderIcon": Object { "$$typeof": Symbol(react.forward_ref), @@ -5084,9 +5089,10 @@ Map { "type": "button", }, "propTypes": Object { - "ariaLabel": Object { + "aria-label": Object { "type": "string", }, + "ariaLabel": [Function], "className": Object { "type": "string", }, @@ -8440,9 +8446,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 index 6cd2cc981d8f..87a1d2784ac6 100644 --- 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 && } @@ -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,8 @@ ToastNotification.defaultProps = { }; export function InlineNotification({ + ['aria-label']: ariaLabel, + ariaLabel: deprecatedAriaLabel, children, title, subtitle, @@ -466,6 +491,7 @@ export function InlineNotification({ notificationType="inline" onClick={handleCloseButtonClick} aria-hidden="true" + aria-label={deprecatedAriaLabel || ariaLabel} tabIndex="-1" /> )} @@ -474,6 +500,20 @@ export function InlineNotification({ } InlineNotification.propTypes = { + /** + * Provide a description for "close" icon button that can be read by screen readers + */ + ['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 */ @@ -547,7 +587,8 @@ InlineNotification.defaultProps = { export function ActionableNotification({ actionButtonLabel, - ariaLabel, + ['aria-label']: ariaLabel, + ariaLabel: deprecatedAriaLabel, children, role, onActionButtonClick, @@ -637,7 +678,7 @@ export function ActionableNotification({ {!hideCloseButton && ( @@ -655,7 +696,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 index 5416b8182ba6..338a8ce7568d 100644 --- a/packages/react/src/components/Notification/stories/ActionableNotification.stories.js +++ b/packages/react/src/components/Notification/stories/ActionableNotification.stories.js @@ -23,6 +23,7 @@ export default { kind: 'error', lowContrast: false, hideCloseButton: false, + ['aria-label']: 'closes notification', ariaLabel: 'closes notification', statusIconDescription: 'notification', onClose: action('onClose'), @@ -43,6 +44,11 @@ export const Default = () => ( export const Playground = (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 index b8ec96c41817..852b29c90ac3 100644 --- a/packages/react/src/components/Notification/stories/InlineNotification.stories.js +++ b/packages/react/src/components/Notification/stories/InlineNotification.stories.js @@ -23,6 +23,7 @@ export default { kind: 'error', lowContrast: false, hideCloseButton: false, + ['aria-label']: 'closes notification', ariaLabel: 'closes notification', statusIconDescription: 'notification', onClose: action('onClose'), @@ -45,6 +46,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 index 0411cb537379..2c63aeb1af7b 100644 --- a/packages/react/src/components/Notification/stories/ToastNotification.stories.js +++ b/packages/react/src/components/Notification/stories/ToastNotification.stories.js @@ -23,6 +23,7 @@ export default { kind: 'error', lowContrast: false, hideCloseButton: false, + ['aria-label']: 'closes notification', ariaLabel: 'closes notification', statusIconDescription: 'notification', onClose: action('onClose'), @@ -48,6 +49,11 @@ Playground.argTypes = { disable: true, }, }, + ['aria-label']: { + table: { + disable: true, + }, + }, ariaLabel: { table: { disable: true, From a1b5229b45c5cc65a83f9200c16edf5376cb41b2 Mon Sep 17 00:00:00 2001 From: Jesse Hull Date: Mon, 6 Mar 2023 13:10:06 -0500 Subject: [PATCH 2/3] fix(Notification): rm stories default dupes --- .../Notification/stories/ActionableNotification.stories.js | 1 - .../Notification/stories/InlineNotification.stories.js | 1 - .../components/Notification/stories/ToastNotification.stories.js | 1 - 3 files changed, 3 deletions(-) diff --git a/packages/react/src/components/Notification/stories/ActionableNotification.stories.js b/packages/react/src/components/Notification/stories/ActionableNotification.stories.js index 338a8ce7568d..545d5f3bdade 100644 --- a/packages/react/src/components/Notification/stories/ActionableNotification.stories.js +++ b/packages/react/src/components/Notification/stories/ActionableNotification.stories.js @@ -24,7 +24,6 @@ export default { lowContrast: false, hideCloseButton: false, ['aria-label']: 'closes notification', - ariaLabel: 'closes notification', statusIconDescription: 'notification', onClose: action('onClose'), onCloseButtonClick: action('onCloseButtonClick'), diff --git a/packages/react/src/components/Notification/stories/InlineNotification.stories.js b/packages/react/src/components/Notification/stories/InlineNotification.stories.js index 852b29c90ac3..962f80a053c8 100644 --- a/packages/react/src/components/Notification/stories/InlineNotification.stories.js +++ b/packages/react/src/components/Notification/stories/InlineNotification.stories.js @@ -24,7 +24,6 @@ export default { lowContrast: false, hideCloseButton: false, ['aria-label']: 'closes notification', - ariaLabel: 'closes notification', statusIconDescription: 'notification', onClose: action('onClose'), onCloseButtonClick: action('onCloseButtonClick'), diff --git a/packages/react/src/components/Notification/stories/ToastNotification.stories.js b/packages/react/src/components/Notification/stories/ToastNotification.stories.js index 2c63aeb1af7b..5d7266e8280b 100644 --- a/packages/react/src/components/Notification/stories/ToastNotification.stories.js +++ b/packages/react/src/components/Notification/stories/ToastNotification.stories.js @@ -24,7 +24,6 @@ export default { lowContrast: false, hideCloseButton: false, ['aria-label']: 'closes notification', - ariaLabel: 'closes notification', statusIconDescription: 'notification', onClose: action('onClose'), onCloseButtonClick: action('onCloseButtonClick'), From dcd5318e1afd641b922338b59f23992fe3a62130 Mon Sep 17 00:00:00 2001 From: Jesse Hull Date: Mon, 6 Mar 2023 15:52:49 -0500 Subject: [PATCH 3/3] fix(InlineNotification): rm deprecated prop --- .../__tests__/__snapshots__/PublicAPI-test.js.snap | 1 - .../src/components/Notification/Notification.js | 12 +----------- 2 files changed, 1 insertion(+), 12 deletions(-) diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 15853c5bcd0e..6717822cab5d 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -4028,7 +4028,6 @@ Map { "aria-label": Object { "type": "string", }, - "ariaLabel": [Function], "children": Object { "type": "node", }, diff --git a/packages/react/src/components/Notification/Notification.js b/packages/react/src/components/Notification/Notification.js index 87a1d2784ac6..15e10c731257 100644 --- a/packages/react/src/components/Notification/Notification.js +++ b/packages/react/src/components/Notification/Notification.js @@ -420,7 +420,6 @@ ToastNotification.defaultProps = { export function InlineNotification({ ['aria-label']: ariaLabel, - ariaLabel: deprecatedAriaLabel, children, title, subtitle, @@ -491,7 +490,7 @@ export function InlineNotification({ notificationType="inline" onClick={handleCloseButtonClick} aria-hidden="true" - aria-label={deprecatedAriaLabel || ariaLabel} + aria-label={ariaLabel} tabIndex="-1" /> )} @@ -505,15 +504,6 @@ InlineNotification.propTypes = { */ ['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 */