fix(uishell): provide tabindex as a named prop (#10900)

* fix(switcheritem): apply default tabindex before ...rest * fix(uishell): provide tabIndex as a named prop Co-authored-by: Alessandra Davila <aledavila@ibm.com>
carbon-design-system · Mar 14, 2022 · 4c12ad5 · 4c12ad5
1 parent deb2f18
commit 4c12ad5
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -3341,6 +3341,9 @@ Map {
       "role": Object {
         "type": "string",
       },
+      "tabIndex": Object {
+        "type": "number",
+      },
     },
     "render": [Function],
   },
@@ -6201,6 +6204,9 @@ Map {
       "className": Object {
         "type": "string",
       },
+      "tabIndex": Object {
+        "type": "number",
+      },
     },
     "render": [Function],
   },

diff --git a/packages/react/src/components/UIShell/HeaderMenuItem.js b/packages/react/src/components/UIShell/HeaderMenuItem.js
@@ -18,6 +18,7 @@ const HeaderMenuItem = React.forwardRef(function HeaderMenuItem(
     'aria-current': ariaCurrent,
     children,
     role,
+    tabIndex = 0,
     ...rest
   },
   ref
@@ -38,7 +39,7 @@ const HeaderMenuItem = React.forwardRef(function HeaderMenuItem(
         aria-current={ariaCurrent}
         className={linkClassName}
         ref={ref}
-        tabIndex={0}>
+        tabIndex={tabIndex}>
         <span className={`${prefix}--text-truncate--end`}>{children}</span>
       </Link>
     </li>
@@ -74,6 +75,11 @@ HeaderMenuItem.propTypes = {
    * `<ul>` semantics for menus.
    */
   role: PropTypes.string,
+
+  /**
+   * Specify the tab index of the Link
+   */
+  tabIndex: PropTypes.number,
 };
 
 export default HeaderMenuItem;
diff --git a/packages/react/src/components/UIShell/SwitcherItem.js b/packages/react/src/components/UIShell/SwitcherItem.js
@@ -20,6 +20,7 @@ const SwitcherItem = React.forwardRef(function SwitcherItem(props, ref) {
     className: customClassName,
     children,
     isSelected,
+    tabIndex = 0,
     ...rest
   } = props;
 
@@ -42,7 +43,7 @@ const SwitcherItem = React.forwardRef(function SwitcherItem(props, ref) {
         {...rest}
         ref={ref}
         className={linkClassName}
-        tabIndex={0}
+        tabIndex={tabIndex}
         {...accessibilityLabel}>
         {children}
       </Link>
@@ -66,6 +67,11 @@ SwitcherItem.propTypes = {
    * Optionally provide a custom class to apply to the underlying `<li>` node
    */
   className: PropTypes.string,
+
+  /**
+   * Specify the tab index of the Link
+   */
+  tabIndex: PropTypes.number,
 };
 
 export default SwitcherItem;