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,