diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index d3d4342c430e..ec3e5bed66d2 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", }, @@ -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 index 6cd2cc981d8f..15e10c731257 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,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 && ( @@ -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 index a4372c1fc921..d1f822d66b17 100644 --- 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) => ; 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 b9ec104df91c..28758367e305 100644 --- 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 index 4af5bacffe31..222908698645 100644 --- 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,