fix: fixed tab navigation in SideNav

packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavItem.js

@@ -1,8 +1,9 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { Link } from 'gatsby';
 import { Location } from '@reach/router';
 import cx from 'classnames';
 import { useNetworkState } from 'react-use';
+import { breakpoints } from '@carbon/elements';
 
 import { SideNavLink, SideNavMenu, SideNavMenuItem } from '@carbon/react';
 
@@ -16,9 +17,18 @@
 
 const LeftNavItem = (props) => {
   const { items, category, hasDivider } = props;
-  const { toggleNavState } = useContext(NavContext);
+  const { toggleNavState, leftNavIsOpen } = useContext(NavContext);
   const { isServiceWorkerEnabled } = useMetadata();
   const isOnline = useNetworkState();
+  const isLgWindow = window.matchMedia(`(min-width: ${breakpoints.lg.width} )`);
+
+  useEffect(() => {
+    if (isLgWindow) {
+      toggleNavState('leftNavIsOpen', 'open');
+    } else {
+      toggleNavState('leftNavIsOpen', 'close');
+    }
+  }, []);
 
   const handleClick = (event, to) => {
     toggleNavState('leftNavIsOpen', 'close');
@@ -48,6 +58,8 @@
           return (
             <>
               <SideNavLink
+                isSideNavExpanded={leftNavIsOpen}
+                tabIndex={!leftNavIsOpen ? -1 : 0}
                 onClick={(e) => handleClick(e, to)}
                 icon={<span>dummy icon</span>}
                 element={Link}
@@ -68,7 +80,9 @@
               icon={<span>dummy icon</span>}
               isActive={isActive} // TODO similar categories
               defaultExpanded={isActive}
-              title={category}>
+              title={category}
+              isSideNavExpanded={leftNavIsOpen}
+              tabIndex={!leftNavIsOpen ? -1 : 0}>
               <SubNavItems
                 onClick={handleClick}
                 items={items}

packages/gatsby-theme-carbon/src/components/LeftNav/ResourceLinks.js

@@ -1,17 +1,30 @@
-import React from 'react';
+import React, { useContext, useEffect } from 'react';
 import { SideNavLink } from '@carbon/react';
 import { Link } from 'gatsby';
 import { Launch as LaunchIcon } from '@carbon/react/icons';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
+import { breakpoints } from '@carbon/elements';
 
 import { outboundLink, divider, dividerSpace } from './LeftNav.module.scss';
+import NavContext from '../../util/context/NavContext';
 
 const LeftNavResourceLinks = ({
   links,
   shouldOpenNewTabs,
   includeDividerSpace = true,
 }) => {
+  const { toggleNavState, leftNavIsOpen } = useContext(NavContext);
+  const isLgWindow = window.matchMedia(`(min-width: ${breakpoints.lg.width} )`);
+
+  useEffect(() => {
+    if (isLgWindow) {
+      toggleNavState('leftNavIsOpen', 'open');
+    } else {
+      toggleNavState('leftNavIsOpen', 'close');
+    }
+  }, []);
+
   if (!links) return null;
 
   const shouldOpenNewTabsProps = {
@@ -37,6 +50,7 @@
             href={href}
             className={cx({ [outboundLink]: outbound })}
             element={outbound ? 'a' : Link}
+            tabIndex={!leftNavIsOpen ? -1 : 0}
             {...shouldOpenNewTabsProps}>
             {title}
           </SideNavLink>

yarn.lock

@@ -10344,7 +10344,7 @@ __metadata:
   dependencies:
     "@carbon/icons-react": "npm:^11.43.0"
     gatsby: "npm:^5.13.6"
-    gatsby-theme-carbon: "npm:^4.2.4"
+    gatsby-theme-carbon: "npm:^4.2.5"
     react: "npm:^18.3.1"
     react-dom: "npm:^18.3.1"
   languageName: unknown
@@ -11644,7 +11644,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"gatsby-theme-carbon@npm:^4.2.4, gatsby-theme-carbon@workspace:packages/gatsby-theme-carbon":
+"gatsby-theme-carbon@npm:^4.2.5, gatsby-theme-carbon@workspace:packages/gatsby-theme-carbon":
   version: 0.0.0-use.local
   resolution: "gatsby-theme-carbon@workspace:packages/gatsby-theme-carbon"
   dependencies: