@carbon-labs/react-ui-shell 0.16.0 → 0.18.0

package/lib/components/SideNav.d.ts

@@ -34,10 +34,14 @@ export interface SideNavProps extends ComponentProps<'nav'>, TranslateWithId<Tra
     isCollapsible?: boolean;
     hideOverlay?: boolean;
     navType: SIDE_NAV_TYPE;
+    isTreeview: boolean;
 }
 interface SideNavContextData {
+    expanded?: boolean;
     isRail?: boolean;
     navType?: SIDE_NAV_TYPE;
+    isTreeview?: boolean;
+    setIsTreeview?: (value: boolean) => void;
 }
 export declare const SideNavContext: React.Context<SideNavContextData>;
 export declare const SideNav: React.ForwardRefExoticComponent<Omit<SideNavProps, "ref"> & React.RefAttributes<HTMLElement>>;

package/lib/components/SideNav.js

@@ -54,6 +54,7 @@ function SideNavRenderFunction(_ref, ref) {
     isFixedNav = false,
     isRail,
     isPersistent = true,
+    isTreeview: isTreeviewProp,
     navType = SIDE_NAV_TYPE.DEFAULT,
     addFocusListeners = true,
     addMouseListeners = true,
@@ -65,6 +66,7 @@ function SideNavRenderFunction(_ref, ref) {
     translateWithId: t = defaultTranslateWithId,
     ...other
   } = _ref;
+  const [internalIsTreeview, setInternalIsTreeview] = React.useState(isTreeviewProp ?? false);
   const prefix = usePrefix.usePrefix();
   const {
     current: controlled
@@ -116,7 +118,10 @@ function SideNavRenderFunction(_ref, ref) {
       // avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
       return /*#__PURE__*/React.cloneElement(childJsxElement, {
         ...(_utils.CARBON_SIDENAV_ITEMS.includes(childJsxElement.type?.displayName ?? childJsxElement.type?.name) ? {
-          isSideNavExpanded: currentExpansionState
+          isSideNavExpanded: currentExpansionState,
+          ...(childJsxElement.type?.displayName === 'SideNavItems' && {
+            accessibilityLabel: accessibilityLabel
+          })
         } : {})
       });
     }
@@ -125,26 +130,28 @@ function SideNavRenderFunction(_ref, ref) {
   const eventHandlers = {};
   const treeWalkerRef = React.useRef(null);
   React.useEffect(() => {
-    treeWalkerRef.current = treeWalkerRef.current ?? document.createTreeWalker(sideNavRef?.current, NodeFilter.SHOW_ELEMENT, {
-      acceptNode: function (node) {
-        if (!(node instanceof Element)) {
+    if (internalIsTreeview) {
+      treeWalkerRef.current = treeWalkerRef.current ?? document.createTreeWalker(sideNavRef?.current, NodeFilter.SHOW_ELEMENT, {
+        acceptNode: function (node) {
+          if (!(node instanceof Element)) {
+            return NodeFilter.FILTER_SKIP;
+          }
+          if (node.classList.contains(`${prefix}--side-nav__divider`)) {
+            return NodeFilter.FILTER_REJECT;
+          }
+          if (node.matches(`li.${prefix}--side-nav__item`) || node.matches(`li.${prefix}--side-nav__menu-item`)) {
+            return NodeFilter.FILTER_ACCEPT;
+          }
           return NodeFilter.FILTER_SKIP;
         }
-        if (node.classList.contains(`${prefix}--side-nav__divider`)) {
-          return NodeFilter.FILTER_REJECT;
-        }
-        if (node.matches(`li.${prefix}--side-nav__item`) || node.matches(`li.${prefix}--side-nav__menu-item`)) {
-          return NodeFilter.FILTER_ACCEPT;
-        }
-        return NodeFilter.FILTER_SKIP;
+      });
+      resetNodeTabIndices();
+      const firstElement = sideNavRef?.current?.querySelector('a, button');
+      if (firstElement) {
+        firstElement.tabIndex = 0;
       }
-    });
-    resetNodeTabIndices();
-    const firstElement = sideNavRef?.current?.querySelector('a, button');
-    if (firstElement) {
-      firstElement.tabIndex = 0;
     }
-  }, [prefix]);
+  }, [prefix, internalIsTreeview]);
 
   /**
    * Returns the parent SideNavMenu, if node is actually inside one.
@@ -176,98 +183,111 @@ function SideNavRenderFunction(_ref, ref) {
       }
     };
     eventHandlers.onKeyDown = event => {
-      if (!treeWalkerRef.current) return;
-      const treeWalker = treeWalkerRef.current;
-      event.stopPropagation();
-
-      // stops page from scrolling
-      if (match.matches(event, [keys.ArrowUp, keys.ArrowDown, keys.Home, keys.End,
-      // @ts-ignore - `matches` doesn't like the object syntax without missing properties
-      {
-        code: 'KeyA'
-      }])) {
-        event.preventDefault();
-      }
-      treeWalker.currentNode = event.target.closest(`li`) ?? treeWalker?.currentNode;
-      let nextFocusNode = null;
-      if (match.match(event, keys.ArrowUp)) {
-        const parentNode = parentSideNavMenu(treeWalker.currentNode);
-        let previousSideNavMenu = parentNode?.previousElementSibling;
-
-        // skip the divider
-        if (previousSideNavMenu?.classList.contains(`${prefix}--side-nav__divider`)) {
-          previousSideNavMenu = previousSideNavMenu?.previousElementSibling;
-        }
-
-        // when previous sibling is open, go to its last item
-        if (previousSideNavMenu?.getAttribute('aria-expanded') == 'true') {
-          nextFocusNode = treeWalker.previousNode();
-        } else {
-          nextFocusNode = treeWalker.previousSibling();
-
-          // first item in the menu, go back up to SideNavMenu button
-          if (nextFocusNode == null) {
-            nextFocusNode = parentNode;
+      // close menu
+      if (match.match(event, keys.Escape)) {
+        if (expanded && !isFixedNav) {
+          resetNodeTabIndices();
+          if (onSideNavBlur) {
+            onSideNavBlur();
           }
         }
-      }
-      if (match.match(event, keys.ArrowDown)) {
-        if (treeWalker.currentNode.getAttribute('aria-expanded') == 'false') {
-          nextFocusNode = treeWalker.nextSibling();
-        } else {
-          nextFocusNode = treeWalker.nextNode();
+        handleToggle(event, false);
+        if (href) {
+          window.location.href = href;
         }
       }
 
-      // Home/End functionality
-      if (match.matches(event, [keys.Home, keys.End])) {
-        if (!sideNavRef?.current) {
-          return;
+      // Treeview keyboard navigation
+      if (treeWalkerRef?.current && internalIsTreeview) {
+        const treeWalker = treeWalkerRef.current;
+        event.stopPropagation();
+
+        // stops page from scrolling
+        if (match.matches(event, [keys.ArrowUp, keys.ArrowDown, keys.Home, keys.End,
+        // @ts-ignore - `matches` doesn't like the object syntax without missing properties
+        {
+          code: 'KeyA'
+        }])) {
+          event.preventDefault();
         }
-        const allItems = Array.from(sideNavRef.current.querySelectorAll('a, button'));
-        if (match.match(event, keys.Home)) {
-          const firstElement = allItems[0];
-          if (firstElement) {
-            firstElement.tabIndex = 0;
-            firstElement?.focus();
+        treeWalker.currentNode = event.target.closest(`li`) ?? treeWalker?.currentNode;
+        let nextFocusNode = null;
+        if (match.match(event, keys.ArrowUp)) {
+          const parentNode = parentSideNavMenu(treeWalker.currentNode);
+          let previousSideNavMenu = parentNode?.previousElementSibling;
+
+          // skip the divider
+          if (previousSideNavMenu?.classList.contains(`${prefix}--side-nav__divider`)) {
+            previousSideNavMenu = previousSideNavMenu?.previousElementSibling;
+          }
+
+          // when previous sibling is open, go to its last item
+          if (previousSideNavMenu?.getAttribute('aria-expanded') == 'true') {
+            const allItems = previousSideNavMenu.querySelectorAll(`.${prefix}--side-nav__item`);
+            const lastMenu = allItems[allItems.length - 1];
+            if (lastMenu && lastMenu.getAttribute('aria-expanded') == 'false') {
+              nextFocusNode = lastMenu;
+            } else {
+              nextFocusNode = treeWalker.previousNode();
+            }
+          } else {
+            nextFocusNode = treeWalker.previousSibling();
+
+            // first item in the menu, go back up to SideNavMenu button
+            if (nextFocusNode == null) {
+              nextFocusNode = parentNode;
+            }
           }
         }
-        if (match.match(event, keys.End)) {
-          const allItems = Array.from(sideNavRef.current.querySelectorAll('li'));
-          const lastVisibleItem = allItems.reverse().find(item => getComputedStyle(item).visibility !== 'hidden');
-          if (lastVisibleItem) {
-            const node = lastVisibleItem.querySelector('button') ?? lastVisibleItem.querySelector('a');
-            if (node) {
-              node.tabIndex = 0;
-              node?.focus();
+        if (match.match(event, keys.ArrowDown)) {
+          if (treeWalker.currentNode.getAttribute('aria-expanded') == 'false') {
+            nextFocusNode = treeWalker.nextSibling();
+            if (!nextFocusNode) {
+              const parent = parentSideNavMenu(treeWalker.currentNode);
+              nextFocusNode = parent?.nextElementSibling;
             }
+          } else {
+            nextFocusNode = treeWalker.nextNode();
           }
         }
-      }
 
-      // focus on the focusable element within the node
-      if (nextFocusNode && nextFocusNode !== event.target) {
-        resetNodeTabIndices();
-        if (nextFocusNode instanceof HTMLElement) {
-          const node = nextFocusNode.querySelector('button') ?? nextFocusNode.querySelector('a');
-          if (node) {
-            node.tabIndex = 0;
-            node?.focus();
+        // Home/End functionality
+        if (match.matches(event, [keys.Home, keys.End])) {
+          if (!sideNavRef?.current) {
+            return;
+          }
+          const allItems = Array.from(sideNavRef.current.querySelectorAll('a, button'));
+          if (match.match(event, keys.Home)) {
+            const firstElement = allItems[0];
+            if (firstElement) {
+              firstElement.tabIndex = 0;
+              firstElement?.focus();
+            }
+          }
+          if (match.match(event, keys.End)) {
+            const allItems = Array.from(sideNavRef.current.querySelectorAll('li'));
+            const lastVisibleItem = allItems.reverse().find(item => getComputedStyle(item).visibility !== 'hidden');
+            if (lastVisibleItem) {
+              const node = lastVisibleItem.querySelector('button') ?? lastVisibleItem.querySelector('a');
+              if (node) {
+                node.tabIndex = 0;
+                node?.focus();
+              }
+            }
           }
         }
-      }
 
-      // close menu
-      if (match.match(event, keys.Escape)) {
-        if (expanded && !isFixedNav) {
-          if (onSideNavBlur) {
-            onSideNavBlur();
+        // focus on the focusable element within the node
+        if (nextFocusNode && nextFocusNode !== event.target) {
+          resetNodeTabIndices();
+          if (nextFocusNode instanceof HTMLElement) {
+            const node = nextFocusNode.querySelector('button') ?? nextFocusNode.querySelector('a');
+            if (node) {
+              node.tabIndex = 0;
+              node?.focus();
+            }
           }
         }
-        handleToggle(event, false);
-        if (href) {
-          window.location.href = href;
-        }
       }
     };
   }
@@ -306,9 +326,27 @@ function SideNavRenderFunction(_ref, ref) {
       item.tabIndex = -1;
     });
   }
+
+  // ensure that changes are in sync with internal treeview prop
+  React.useEffect(() => {
+    if (isTreeviewProp !== undefined) {
+      setInternalIsTreeview(isTreeviewProp);
+    }
+  }, [isTreeviewProp]);
+
+  // prevent changes if prop is passed in
+  const setIsTreeview = value => {
+    if (isTreeviewProp === undefined) {
+      setInternalIsTreeview(value);
+    }
+  };
   return /*#__PURE__*/React.createElement(SideNavContext.Provider, {
     value: {
-      isRail
+      isRail,
+      navType,
+      expanded: expanded,
+      isTreeview: internalIsTreeview,
+      setIsTreeview
     }
   }, isFixedNav || hideOverlay ? null :
   /*#__PURE__*/
@@ -317,7 +355,7 @@ function SideNavRenderFunction(_ref, ref) {
     className: overlayClassName,
     onClick: onOverlayClick
   }), /*#__PURE__*/React.createElement("nav", _rollupPluginBabelHelpers.extends({
-    role: "tree",
+    role: 'navigation',
     tabIndex: -1,
     ref: navRef,
     className: `${prefix}--side-nav__navigation ${className}`,

package/lib/components/SideNavItems.d.ts

@@ -6,6 +6,11 @@
  */
 import React from 'react';
 export interface SideNavItemsProps {
+    /**
+     * Object to provide an aria-label to the component when used in treeview,
+     * to ensure it meets a11y requirements.
+     */
+    accessibilityLabel: object;
     /**
      * Provide a single icon as the child to `SideNavIcon` to render in the
      * container

package/lib/components/SideNavItems.js

@@ -7,18 +7,25 @@
 
 'use strict';
 
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
 var index = require('../_virtual/index.js');
 var PropTypes = require('prop-types');
 var React = require('react');
 var _utils = require('./_utils.js');
 var usePrefix = require('../internal/usePrefix.js');
+var SideNav = require('./SideNav.js');
 
 const SideNavItems = _ref => {
   let {
     className: customClassName,
     children,
-    isSideNavExpanded
+    isSideNavExpanded,
+    accessibilityLabel: accessibilityLabel
   } = _ref;
+  const {
+    isTreeview
+  } = React.useContext(SideNav.SideNavContext);
+  const listRef = React.useRef(null); // Adjust type if necessary
   const prefix = usePrefix.usePrefix();
   const className = index.default([`${prefix}--side-nav__items`], customClassName);
   const childrenWithExpandedState = React.Children.map(children, child => {
@@ -38,9 +45,22 @@ const SideNavItems = _ref => {
       });
     }
   });
-  return /*#__PURE__*/React.createElement("ul", {
-    className: className
-  }, childrenWithExpandedState);
+  React.useEffect(() => {
+    // set SideNavLink's role without needing to extend original component
+    if (isTreeview && listRef.current) {
+      const sideNavItem = listRef.current.querySelectorAll(`.${prefix}--side-nav__item a`);
+      sideNavItem.forEach(e => {
+        if (!e.hasAttribute('role')) {
+          e.setAttribute('role', 'treeitem');
+        }
+      });
+    }
+  }, [isTreeview]);
+  return /*#__PURE__*/React.createElement("ul", _rollupPluginBabelHelpers.extends({}, isTreeview && accessibilityLabel, {
+    ref: listRef,
+    className: className,
+    role: isTreeview ? 'tree' : ''
+  }), childrenWithExpandedState);
 };
 SideNavItems.displayName = 'SideNavItems';
 SideNavItems.propTypes = {

package/lib/components/SideNavMenu.js

@@ -30,16 +30,21 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
     large = false,
     renderIcon: IconElement,
     isSideNavExpanded,
-    tabIndex,
     title
   } = _ref;
   const depth = propDepth;
   const {
-    isRail
+    isTreeview,
+    expanded,
+    navType,
+    isRail,
+    setIsTreeview
   } = React.useContext(SideNav.SideNavContext);
+  const sideNavExpanded = expanded;
   const prefix = usePrefix.usePrefix();
   const [isExpanded, setIsExpanded] = React.useState(defaultExpanded);
   const [active, setActive] = React.useState(isActive);
+  const firstLink = React.useRef(null);
   const [prevExpanded, setPrevExpanded] = React.useState(defaultExpanded);
   const className = index.default({
     [`${prefix}--side-nav__item`]: true,
@@ -82,23 +87,35 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
     return child;
   });
   React.useEffect(() => {
-    if (depth === 0) return;
-    const calcButtonOffset = () => {
-      // menu with icon
-      if (children && IconElement) {
-        return depth + 3;
+    if (navType == SideNav.SIDE_NAV_TYPE.PANEL) {
+      // grab first link to redirect if clicked when not expanded
+      if (!firstLink?.current && listRef?.current) {
+        const firstLinkElement = listRef.current.querySelector(`.${prefix}--side-nav__menu-item a`);
+        firstLink.current = firstLinkElement?.getAttribute('href') ?? '';
       }
+    }
+    if (depth === 0) return;
+
+    // if depth is more than 0, that means its nested, thus we set treeview mode
+    setIsTreeview?.(true);
+    if (isTreeview) {
+      const calcButtonOffset = () => {
+        // menu with icon
+        if (children && IconElement) {
+          return depth + 3;
+        }
 
-      // menu without icon
-      if (children) {
-        return depth * 4;
+        // menu without icon
+        if (children) {
+          return depth * 4;
+        }
+        return depth;
+      };
+      if (buttonRef.current) {
+        buttonRef.current.style.paddingLeft = `${calcButtonOffset()}rem`;
       }
-      return depth;
-    };
-    if (buttonRef.current) {
-      buttonRef.current.style.paddingLeft = `${calcButtonOffset()}rem`;
     }
-  }, []);
+  }, [isTreeview]);
 
   /**
    * Returns the parent SideNavMenu, if node is actually inside one.
@@ -114,56 +131,71 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
     if (match.match(event, keys.Escape)) {
       setIsExpanded(false);
     }
-    const node = event.target;
-    const isMenu = node.hasAttribute('aria-expanded');
-    const isExpanded = node.getAttribute('aria-expanded');
-    const parent = parentSideNavMenu(node);
-    if (match.match(event, keys.ArrowLeft)) {
-      event.stopPropagation();
-      if (isMenu) {
-        // collapse menu
-        if (isExpanded == 'true') {
-          setIsExpanded(false);
+    if (isTreeview) {
+      const node = event.target;
+      const isMenu = node.hasAttribute('aria-expanded');
+      const isExpanded = node.getAttribute('aria-expanded');
+      const parent = parentSideNavMenu(node);
+      if (match.match(event, keys.ArrowLeft)) {
+        event.stopPropagation();
+        if (isMenu) {
+          // collapse menu
+          if (isExpanded == 'true') {
+            setIsExpanded(false);
 
-          // go to previous level's side nav menu button
-        } else {
-          // since we're in a menu, it finds its own <li>, we go up one more
-          const previousMenu = parentSideNavMenu(parent);
-          const button = previousMenu.querySelector('button');
+            // go to previous level's side nav menu button
+          } else {
+            // since we're in a menu, it finds its own <li>, we go up one more
+            const previousMenu = parentSideNavMenu(parent);
+            const button = previousMenu.querySelector('button');
+            button.tabIndex = 0;
+            button?.focus();
+          }
+
+          // go to side nav menu button
+        } else if (parent) {
+          const button = parent.querySelector('button');
           button.tabIndex = 0;
           button?.focus();
         }
-
-        // go to side nav menu button
-      } else if (parent) {
-        const button = parent.querySelector('button');
-        button.tabIndex = 0;
-        button?.focus();
       }
-    }
-    if (match.match(event, keys.ArrowRight)) {
-      event.stopPropagation();
+      if (match.match(event, keys.ArrowRight)) {
+        event.stopPropagation();
 
-      // expand menu
-      if (isMenu) {
-        setIsExpanded(true);
+        // expand menu
+        if (isMenu) {
+          setIsExpanded(true);
 
-        // if already expanded, focus on first element
-        if (isExpanded == 'true') {
-          let nextNode = node.nextElementSibling?.querySelector('a, button');
-          if (nextNode) {
-            nextNode.tabIndex = 0;
-            nextNode.focus();
+          // if already expanded, focus on first element
+          if (isExpanded == 'true') {
+            let nextNode = node.nextElementSibling?.querySelector('a, button');
+            if (nextNode) {
+              nextNode.tabIndex = 0;
+              nextNode.focus();
+            }
           }
         }
       }
     }
   }
+
+  // save expanded state before SideNav collapse
+  const [lastExpandedState, setLastExpandedState] = React.useState(isExpanded);
+
+  // reset when SideNav is panel
+  React.useEffect(() => {
+    if (navType == SideNav.SIDE_NAV_TYPE.PANEL && !sideNavExpanded) {
+      setLastExpandedState(isExpanded);
+      setIsExpanded(false);
+    } else {
+      setIsExpanded(lastExpandedState);
+    }
+  }, [sideNavExpanded]);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
     React.createElement("li", {
-      role: "treeitem",
+      role: isTreeview ? 'treeitem' : undefined,
       "aria-expanded": isExpanded,
       className: className,
       ref: listRef,
@@ -172,11 +204,17 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
       "aria-expanded": isExpanded,
       className: buttonClassName,
       onClick: () => {
-        setIsExpanded(!isExpanded);
+        // only when sidenav is panel view
+        if (navType == SideNav.SIDE_NAV_TYPE.PANEL && !isExpanded && firstLink.current && !sideNavExpanded) {
+          window.location.href = firstLink.current;
+        } else {
+          setIsExpanded(!isExpanded);
+          setLastExpandedState(!isExpanded);
+        }
       },
       ref: menuRef,
       type: "button",
-      tabIndex: -1
+      tabIndex: isTreeview ? -1 : 0
     }, IconElement && /*#__PURE__*/React.createElement(react.SideNavIcon, null, /*#__PURE__*/React.createElement(IconElement, null)), /*#__PURE__*/React.createElement("span", {
       className: `${prefix}--side-nav__submenu-title`
     }, title), /*#__PURE__*/React.createElement(react.SideNavIcon, {

package/lib/components/SideNavMenuItem.js

@@ -15,6 +15,7 @@ var react = require('@carbon/react');
 var Link = require('./Link.js');
 var usePrefix = require('../internal/usePrefix.js');
 var useMergedRefs = require('../internal/useMergedRefs.js');
+var SideNav = require('./SideNav.js');
 
 const SideNavMenuItem = /*#__PURE__*/React.forwardRef(function SideNavMenuItem(props, ref) {
   const prefix = usePrefix.usePrefix();
@@ -26,6 +27,9 @@ const SideNavMenuItem = /*#__PURE__*/React.forwardRef(function SideNavMenuItem(p
     isActive,
     ...rest
   } = props;
+  const {
+    isTreeview
+  } = React.useContext(SideNav.SideNavContext);
   const className = index.default(`${prefix}--side-nav__menu-item`, customClassName);
   const depth = propDepth;
   const linkClassName = index.default({
@@ -41,14 +45,14 @@ const SideNavMenuItem = /*#__PURE__*/React.forwardRef(function SideNavMenuItem(p
     if (linkRef.current) {
       linkRef.current.style.paddingLeft = `${calcLinkOffset()}rem`;
     }
-  }, []);
+  }, [isTreeview]);
   return /*#__PURE__*/React.createElement("li", {
-    role: "treeitem",
-    "aria-selected": isActive ? 'true' : 'false',
     className: className
   }, /*#__PURE__*/React.createElement(Component, _rollupPluginBabelHelpers.extends({}, rest, {
+    "aria-selected": isActive ? 'true' : 'false',
+    role: isTreeview ? 'treeitem' : undefined,
     className: linkClassName,
-    tabIndex: -1,
+    tabIndex: isTreeview ? -1 : 0,
     ref: itemRef
   }), /*#__PURE__*/React.createElement(react.SideNavLinkText, null, children)));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon-labs/react-ui-shell",
-  "version": "0.16.0",
+  "version": "0.18.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -33,5 +33,5 @@
   "dependencies": {
     "@ibm/telemetry-js": "^1.9.1"
   },
-  "gitHead": "7643e53c72a3bd556f5ac4c721e0de5156a19906"
+  "gitHead": "425b9eeca51f6cc0b969d96d8861892e8a97602a"
 }

package/scss/styles/_side-nav.scss

@@ -48,12 +48,20 @@ div:has(.#{$prefix}--header)
     font-weight: 600;
   }
 
+  .#{$prefix}--side-nav__icon > svg,
+  .#{$prefix}--side-nav__submenu-chevron > svg {
+    fill: $icon-primary;
+  }
+}
+
+.#{$prefix}--side-nav__link:hover,
+.#{$prefix}--side-nav__submenu:hover {
+  .#{$prefix}--side-nav__icon > svg,
   .#{$prefix}--side-nav__submenu-chevron > svg {
     fill: $icon-primary;
   }
 }
 
-//----------------------------------------------------------------------------
 // Side-nav Panel
 //----------------------------------------------------------------------------
 .#{$prefix}--side-nav--panel {
@@ -63,6 +71,12 @@ div:has(.#{$prefix}--header)
     margin-inline-end: $spacing-05;
   }
 
+  .#{$prefix}--side-nav__item.#{$prefix}--side-nav__link:hover {
+    .#{$prefix}--side-nav__icon > svg {
+      fill: $icon-primary;
+    }
+  }
+
   .#{$prefix}--side-nav__item.#{$prefix}--side-nav__item--icon
     a.#{$prefix}--side-nav__link {
     padding-inline-start: $spacing-10;