fix: adds keyboard focus on tab navigation (#17426)

carbon-design-system · Sep 16, 2024 · bad3662 · bad3662
1 parent d8e0045
commit bad3662
Showing 1 changed file with 10 additions and 3 deletions.
diff --git a/packages/react/src/components/UIShell/UIShell.HeaderBase.stories.js b/packages/react/src/components/UIShell/UIShell.HeaderBase.stories.js
@@ -358,7 +358,10 @@ export const HeaderWNavigationActionsAndSideNav = () => (
                   <HeaderMenuItem href="#">Sub-link 3</HeaderMenuItem>
                 </HeaderMenu>
               </HeaderSideNavItems>
-              <SideNavMenu renderIcon={Fade} title="Category title">
+              <SideNavMenu
+                renderIcon={Fade}
+                title="Category title"
+                tabIndex={0}>
                 <SideNavMenuItem href="https://www.carbondesignsystem.com/">
                   Link 5
                 </SideNavMenuItem>
@@ -369,7 +372,10 @@ export const HeaderWNavigationActionsAndSideNav = () => (
                   Link 7
                 </SideNavMenuItem>
               </SideNavMenu>
-              <SideNavMenu renderIcon={Fade} title="Category title">
+              <SideNavMenu
+                renderIcon={Fade}
+                title="Category title"
+                tabIndex={0}>
                 <SideNavMenuItem href="https://www.carbondesignsystem.com/">
                   Link 8
                 </SideNavMenuItem>
@@ -383,7 +389,8 @@ export const HeaderWNavigationActionsAndSideNav = () => (
               <SideNavMenu
                 renderIcon={Fade}
                 title="Category title"
-                isActive={true}>
+                isActive={true}
+                tabIndex={0}>
                 <SideNavMenuItem href="https://www.carbondesignsystem.com/">
                   Link 11
                 </SideNavMenuItem>