fix(OverflowMenu): remove default tabindex and SVG focusable attribute (

#6976) * fix(OverflowMenu): remove default tabindex value * fix(OverflowMenu): remove `focusable` icon prop * test(OverflowMenu): remove initial tabindex value check * chore: update snapshots Co-authored-by: DAK <40970507+dakahn@users.noreply.github.com>
carbon-design-system · Oct 19, 2020 · 0e7d909 · 0e7d909
1 parent b162614
commit 0e7d909
Show file tree

Hide file tree

Showing 4 changed files with 0 additions and 32 deletions.
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -2439,7 +2439,6 @@ exports[`DataTable should render 1`] = `
                       }
                     }
                     selectorPrimaryFocus="[data-overflow-menu-primary-focus]"
-                    tabIndex={0}
                     title="Settings"
                   >
                     <ClickListener
@@ -2454,22 +2453,19 @@ exports[`DataTable should render 1`] = `
                         onClose={[Function]}
                         onKeyDown={[Function]}
                         open={false}
-                        tabIndex={0}
                         title="Settings"
                         type="button"
                       >
                         <ForwardRef(Settings16)
                           aria-label="Settings"
                           className="bx--overflow-menu__icon"
-                          focusable="false"
                           onClick={[Function]}
                           onKeyDown={[Function]}
                         >
                           <Icon
                             aria-label="Settings"
                             className="bx--overflow-menu__icon"
                             fill="currentColor"
-                            focusable="false"
                             height={16}
                             onClick={[Function]}
                             onKeyDown={[Function]}
@@ -3450,7 +3446,6 @@ exports[`DataTable sticky header should render 1`] = `
                       }
                     }
                     selectorPrimaryFocus="[data-overflow-menu-primary-focus]"
-                    tabIndex={0}
                     title="Settings"
                   >
                     <ClickListener
@@ -3465,22 +3460,19 @@ exports[`DataTable sticky header should render 1`] = `
                         onClose={[Function]}
                         onKeyDown={[Function]}
                         open={false}
-                        tabIndex={0}
                         title="Settings"
                         type="button"
                       >
                         <ForwardRef(Settings16)
                           aria-label="Settings"
                           className="bx--overflow-menu__icon"
-                          focusable="false"
                           onClick={[Function]}
                           onKeyDown={[Function]}
                         >
                           <Icon
                             aria-label="Settings"
                             className="bx--overflow-menu__icon"
                             fill="currentColor"
-                            focusable="false"
                             height={16}
                             onClick={[Function]}
                             onKeyDown={[Function]}

diff --git a/...ages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap b/...ages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap
@@ -46,7 +46,6 @@ exports[`DataTable.TableToolbarMenu should render 1`] = `
         }
       }
       selectorPrimaryFocus="[data-overflow-menu-primary-focus]"
-      tabIndex={0}
       title="Add"
     >
       <ClickListener
@@ -61,22 +60,19 @@ exports[`DataTable.TableToolbarMenu should render 1`] = `
           onClose={[Function]}
           onKeyDown={[Function]}
           open={false}
-          tabIndex={0}
           title="Add"
           type="button"
         >
           <ForwardRef(Download16)
             aria-label="Add"
             className="bx--overflow-menu__icon"
-            focusable="false"
             onClick={[Function]}
             onKeyDown={[Function]}
           >
             <Icon
               aria-label="Add"
               className="bx--overflow-menu__icon"
               fill="currentColor"
-              focusable="false"
               height={16}
               onClick={[Function]}
               onKeyDown={[Function]}

diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu-test.js b/packages/react/src/components/OverflowMenu/OverflowMenu-test.js
@@ -72,17 +72,6 @@ describe('OverflowMenu', () => {
       ).toEqual('uniqueId');
     });
 
-    it('should apply a tabindex to the menu', () => {
-      const defaultMenu = mount(
-        <OverflowMenu>
-          <div>Child</div>
-        </OverflowMenu>
-      ).childAt(0);
-      // Enzyme doesn't seem to allow props() in a forwardRef-wrapped class component
-      expect(defaultMenu.find('OverflowMenu').instance().props.tabIndex).toBe(
-        0
-      );
-    });
     it('should specify light version as expected', () => {
       rootWrapper.setProps({ light: true });
       expect(rootWrapper.props().light).toEqual(true);

diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.js b/packages/react/src/components/OverflowMenu/OverflowMenu.js
@@ -209,11 +209,6 @@ class OverflowMenu extends Component {
      * be focused when the OverflowMenu opens
      */
     selectorPrimaryFocus: PropTypes.string,
-
-    /**
-     * The `tabindex` attribute.
-     */
-    tabIndex: PropTypes.number,
   };
 
   static defaultProps = {
@@ -227,7 +222,6 @@ class OverflowMenu extends Component {
     onKeyDown: () => {},
     onClose: () => {},
     onOpen: () => {},
-    tabIndex: 0,
     menuOffset: getMenuOffset,
     menuOffsetFlip: getMenuOffset,
     light: false,
@@ -443,7 +437,6 @@ class OverflowMenu extends Component {
   render() {
     const {
       id,
-      tabIndex,
       ariaLabel,
       children,
       iconDescription,
@@ -533,7 +526,6 @@ class OverflowMenu extends Component {
       onKeyDown: this.handleKeyDown,
       className: overflowMenuIconClasses,
       'aria-label': iconDescription,
-      focusable: 'false', // Prevent `<svg>` in trigger icon from getting focus for IE11
     };
 
     return (
@@ -548,7 +540,6 @@ class OverflowMenu extends Component {
           onClick={this.handleClick}
           aria-label={ariaLabel}
           id={id}
-          tabIndex={tabIndex}
           ref={mergeRefs(this._triggerRef, ref)}>
           <IconElement {...iconProps}>
             {iconDescription && <title>{iconDescription}</title>}