refactor(OverflowMenu): ariaLabel to aria-label (NEW) (#13280)

* fix(CodeSnippet): a11y tabstop + attributes * fix(CSS): add Carbon CSS to focus outline * refactor(OverflowMenu): ariaLabel to aria-label NEW * Delete CodeSnippet.js error from a rebase/merge * Delete _code-snippet.scss error from rebase/merge * revert(missingFiles): they'll be ignored on merge --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Mar 9, 2023 · da1781b · da1781b
1 parent 2d94846
commit da1781b
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 20 deletions.
diff --git 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 = () => (
     </BreadcrumbItem>
     <BreadcrumbItem href="#">Breadcrumb 2</BreadcrumbItem>
     <BreadcrumbItem data-floating-menu-container>
-      <OverflowMenu ariaLabel="Overflow menu in a breadcrumb">
+      <OverflowMenu aria-label="Overflow menu in a breadcrumb">
         <OverflowMenuItem itemText="Breadcrumb 3" />
         <OverflowMenuItem itemText="Breadcrumb 4" />
       </OverflowMenu>

diff --git a/packages/react/src/components/DataTable/TableToolbarMenu.tsx b/packages/react/src/components/DataTable/TableToolbarMenu.tsx
@@ -46,7 +46,7 @@ const TableToolbarMenu: React.FC<TableToolbarMenuProps> = ({
   );
   return (
     <OverflowMenu
-      ariaLabel={iconDescription}
+      aria-label={iconDescription}
       renderIcon={renderIcon}
       className={toolbarActionClasses}
       title={iconDescription}

diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu-test.js b/packages/react/src/components/OverflowMenu/OverflowMenu-test.js
@@ -16,7 +16,7 @@ describe('OverflowMenu', () => {
   describe('Renders as expected', () => {
     it('should support a custom `className` prop on the button element', () => {
       const { container } = render(
-        <OverflowMenu open ariaLabel="Overflow menu" className="extra-class">
+        <OverflowMenu open aria-label="Overflow menu" className="extra-class">
           <OverflowMenuItem className="test-child" itemText="one" />
           <OverflowMenuItem className="test-child" itemText="two" />
         </OverflowMenu>
@@ -30,7 +30,7 @@ describe('OverflowMenu', () => {
       const { container } = render(
         <OverflowMenu
           data-testid="test"
-          ariaLabel="Overflow menu"
+          aria-label="Overflow menu"
           className="extra-class">
           <OverflowMenuItem className="test-child" itemText="one" />
           <OverflowMenuItem className="test-child" itemText="two" />
@@ -45,7 +45,7 @@ describe('OverflowMenu', () => {
       render(
         <OverflowMenu
           flipped={true}
-          ariaLabel="Overflow menu"
+          aria-label="Overflow menu"
           className="extra-class">
           <OverflowMenuItem className="test-child" itemText="one" />
           <OverflowMenuItem className="test-child" itemText="two" />
@@ -63,7 +63,7 @@ describe('OverflowMenu', () => {
       const onClick = jest.fn();
       render(
         <OverflowMenu
-          ariaLabel="Overflow menu"
+          aria-label="Overflow menu"
           className="extra-class"
           onClick={onClick}>
           <OverflowMenuItem className="test-child" itemText="one" />
@@ -79,7 +79,7 @@ describe('OverflowMenu', () => {
       const onClose = jest.fn();
       render(
         <OverflowMenu
-          ariaLabel="Overflow menu"
+          aria-label="Overflow menu"
           className="extra-class"
           onClose={onClose}>
           <OverflowMenuItem className="test-child" itemText="one" />
@@ -96,7 +96,7 @@ describe('OverflowMenu', () => {
       const onFocus = jest.fn();
       render(
         <OverflowMenu
-          ariaLabel="Overflow menu"
+          aria-label="Overflow menu"
           className="extra-class"
           onFocus={onFocus}>
           <OverflowMenuItem className="test-child" itemText="one" />
@@ -110,7 +110,7 @@ describe('OverflowMenu', () => {
 
     it('should render open if open is true', () => {
       render(
-        <OverflowMenu open ariaLabel="Overflow menu" className="extra-class">
+        <OverflowMenu open aria-label="Overflow menu" className="extra-class">
           <OverflowMenuItem className="test-child" itemText="one" />
           <OverflowMenuItem className="test-child" itemText="two" />
         </OverflowMenu>
@@ -125,7 +125,7 @@ describe('OverflowMenu', () => {
     it('should render icon from renderIcon', () => {
       render(
         <OverflowMenu
-          ariaLabel="Overflow menu"
+          aria-label="Overflow menu"
           className="extra-class"
           renderIcon={() => <Filter aria-label="filter icon" />}>
           <OverflowMenuItem className="test-child" itemText="one" />
@@ -143,7 +143,7 @@ describe('OverflowMenu', () => {
       render(
         <OverflowMenu
           open
-          ariaLabel="Overflow menu"
+          aria-label="Overflow menu"
           className="extra-class"
           size="lg">
           <OverflowMenuItem className="test-child" itemText="one" />
@@ -156,7 +156,7 @@ describe('OverflowMenu', () => {
 
     it('should open on click', () => {
       render(
-        <OverflowMenu ariaLabel="Overflow menu" className="extra-class">
+        <OverflowMenu aria-label="Overflow menu" className="extra-class">
           <OverflowMenuItem className="test-child" itemText="one" />
           <OverflowMenuItem className="test-child" itemText="two" />
         </OverflowMenu>

diff --git 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}
       </ul>

diff --git 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
-  <OverflowMenu ariaLabel="overflow-menu" align="bottom">
+  <OverflowMenu aria-label="overflow-menu" align="bottom">
     <OverflowMenuItem itemText="Stop app" />
     <OverflowMenuItem itemText="Restart app" />
     <OverflowMenuItem itemText="Rename app" />

diff --git 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 = () => (
-  <OverflowMenu ariaLabel="overflow-menu">
+  <OverflowMenu aria-label="overflow-menu">
     <OverflowMenuItem itemText="Stop app" />
     <OverflowMenuItem itemText="Restart app" />
     <OverflowMenuItem itemText="Rename app" />
@@ -43,7 +43,7 @@ export const RenderCustomIcon = () => (
 );
 
 export const Playground = (args) => (
-  <OverflowMenu ariaLabel="overflow-menu" {...args}>
+  <OverflowMenu aria-label="overflow-menu" {...args}>
     <OverflowMenuItem itemText="Stop app" />
     <OverflowMenuItem itemText="Restart app" />
     <OverflowMenuItem itemText="Rename app" />