diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.stories.js b/packages/react/src/components/Breadcrumb/Breadcrumb.stories.js
index 2bfc8b62efd3..c84ddb04ebbe 100644
--- a/packages/react/src/components/Breadcrumb/Breadcrumb.stories.js
+++ b/packages/react/src/components/Breadcrumb/Breadcrumb.stories.js
@@ -45,7 +45,7 @@ export const BreadcrumbWithOverflowMenu = () => (
Breadcrumb 2
-
+
diff --git a/packages/react/src/components/DataTable/TableToolbarMenu.tsx b/packages/react/src/components/DataTable/TableToolbarMenu.tsx
index 2fd3baca6612..ddeb66d47157 100644
--- a/packages/react/src/components/DataTable/TableToolbarMenu.tsx
+++ b/packages/react/src/components/DataTable/TableToolbarMenu.tsx
@@ -46,7 +46,7 @@ const TableToolbarMenu: React.FC = ({
);
return (
{
describe('Renders as expected', () => {
it('should support a custom `className` prop on the button element', () => {
const { container } = render(
-
+
@@ -30,7 +30,7 @@ describe('OverflowMenu', () => {
const { container } = render(
@@ -45,7 +45,7 @@ describe('OverflowMenu', () => {
render(
@@ -63,7 +63,7 @@ describe('OverflowMenu', () => {
const onClick = jest.fn();
render(
@@ -79,7 +79,7 @@ describe('OverflowMenu', () => {
const onClose = jest.fn();
render(
@@ -96,7 +96,7 @@ describe('OverflowMenu', () => {
const onFocus = jest.fn();
render(
@@ -110,7 +110,7 @@ describe('OverflowMenu', () => {
it('should render open if open is true', () => {
render(
-
+
@@ -125,7 +125,7 @@ describe('OverflowMenu', () => {
it('should render icon from renderIcon', () => {
render(
}>
@@ -143,7 +143,7 @@ describe('OverflowMenu', () => {
render(
@@ -156,7 +156,7 @@ describe('OverflowMenu', () => {
it('should open on click', () => {
render(
-
+
diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.js b/packages/react/src/components/OverflowMenu/OverflowMenu.js
index d7ac791fc376..cb28c391cdce 100644
--- a/packages/react/src/components/OverflowMenu/OverflowMenu.js
+++ b/packages/react/src/components/OverflowMenu/OverflowMenu.js
@@ -97,9 +97,18 @@ class OverflowMenu extends Component {
static propTypes = {
/**
- * The ARIA label.
+ * Specify a label to be read by screen readers on the container node
*/
- ariaLabel: PropTypes.string.isRequired,
+ ['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`.'
+ ),
/**
* The child nodes.
@@ -227,7 +236,7 @@ class OverflowMenu extends Component {
static contextType = PrefixContext;
static defaultProps = {
- ariaLabel: null,
+ ['aria-label']: null,
iconDescription: 'Options',
open: false,
direction: DIRECTION_BOTTOM,
@@ -458,7 +467,8 @@ class OverflowMenu extends Component {
const prefix = this.context;
const {
id,
- ariaLabel,
+ ['aria-label']: ariaLabel,
+ ariaLabel: deprecatedAriaLabel,
children,
iconDescription,
direction,
@@ -524,7 +534,7 @@ class OverflowMenu extends Component {
className={overflowMenuOptionsClasses}
tabIndex="-1"
role="menu"
- aria-label={ariaLabel}
+ aria-label={ariaLabel || deprecatedAriaLabel}
onKeyDown={this.handleKeyPress}>
{childrenWithProps}
diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.mdx b/packages/react/src/components/OverflowMenu/OverflowMenu.mdx
index 33824b1dd7dd..46923fc1bf4d 100644
--- a/packages/react/src/components/OverflowMenu/OverflowMenu.mdx
+++ b/packages/react/src/components/OverflowMenu/OverflowMenu.mdx
@@ -38,7 +38,7 @@ The `OverflowMenu` uses an `IconButton` under the hood, which means it can accep
To modify the tooltip's alignment, you may make use of the `align` property as described in the `IconButton` props:
```jsx
-
+
diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.stories.js b/packages/react/src/components/OverflowMenu/OverflowMenu.stories.js
index 339c8100c9f7..54c70d2ee580 100644
--- a/packages/react/src/components/OverflowMenu/OverflowMenu.stories.js
+++ b/packages/react/src/components/OverflowMenu/OverflowMenu.stories.js
@@ -25,7 +25,7 @@ export default {
};
export const Default = () => (
-
+
@@ -43,7 +43,7 @@ export const RenderCustomIcon = () => (
);
export const Playground = (args) => (
-
+