From e57515f06d6ff5d7e74ee962e4703d2ba64d1c98 Mon Sep 17 00:00:00 2001
From: Hannele Valtanen <hannele.valtanen@iki.fi>
Date: Sun, 9 Oct 2022 16:48:15 +0300
Subject: [PATCH] fix(HeaderMenu): menu-item--current instead of
 submenu--current (#10109)

---
 .../src/components/UIShell/HeaderMenu.js      | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/components/UIShell/HeaderMenu.js b/packages/react/src/components/UIShell/HeaderMenu.js
index 6a9edb49dba9..1e06d8aa1c2d 100644
--- a/packages/react/src/components/UIShell/HeaderMenu.js
+++ b/packages/react/src/components/UIShell/HeaderMenu.js
@@ -26,11 +26,21 @@ class HeaderMenu extends React.Component {
      */
     ...AriaLabelPropType,
 
+    /**
+     * Optionally provide a custom class to apply to the underlying `<li>` node
+     */
+    className: PropTypes.string,
+
     /**
      * Provide a custom ref handler for the menu button
      */
     focusRef: PropTypes.func,
 
+    /**
+     * Applies selected styles to the item if a user sets this to true and aria-current !== 'page'.
+     */
+    isCurrentPage: PropTypes.bool,
+
     /**
      * Provide a label for the link text
      */
@@ -175,11 +185,17 @@ class HeaderMenu extends React.Component {
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy,
     };
-    const className = cx({
+    const itemClassName = cx({
       [`${prefix}--header__submenu`]: true,
-      [`${prefix}--header__submenu--current`]: isCurrentPage,
       [customClassName]: !!customClassName,
     });
+    const linkClassName = cx({
+      [`${prefix}--header__menu-item`]: true,
+      [`${prefix}--header__menu-title`]: true,
+      // We set the current class only if `isCurrentPage` is passed in and we do
+      // not have an `aria-current="page"` set for the breadcrumb item
+      [`${prefix}--header__menu-item--current`]: isCurrentPage,
+    });
 
     // Notes on eslint comments and based on the examples in:
     // https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html#
@@ -191,14 +207,14 @@ class HeaderMenu extends React.Component {
     return (
       <li // eslint-disable-line jsx-a11y/mouse-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
         {...rest}
-        className={className}
+        className={itemClassName}
         onKeyDown={this.handleMenuClose}
         onClick={this.handleOnClick}
         onBlur={this.handleOnBlur}>
         <a // eslint-disable-line jsx-a11y/role-supports-aria-props,jsx-a11y/anchor-is-valid
           aria-haspopup="menu" // eslint-disable-line jsx-a11y/aria-proptypes
           aria-expanded={this.state.expanded}
-          className={`${prefix}--header__menu-item ${prefix}--header__menu-title`}
+          className={linkClassName}
           href="#"
           onKeyDown={this.handleOnKeyDown}
           ref={this.handleMenuButtonRef}