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) => ( - +