From e6bf8842622f2fc32692610877200a978c2ccd8d Mon Sep 17 00:00:00 2001
From: Hendrik de Graaf <HendrikThePendric@users.noreply.github.com>
Date: Tue, 26 Nov 2024 10:22:03 +0100
Subject: [PATCH] fix(menu-item): tweak active and focused styles (#1639)

* fix: remove active style from menu item with tabIndex 0

* fix: apply focus styles to <li> tag
---
 components/menu/src/menu-item/menu-item.js      |  2 +-
 .../src/menu-item/menu-item.prod.stories.js     | 16 ++++++++++++++++
 .../menu/src/menu-item/menu-item.styles.js      | 17 +++++++++--------
 3 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/components/menu/src/menu-item/menu-item.js b/components/menu/src/menu-item/menu-item.js
index c5ca57385d..76ca1245d7 100644
--- a/components/menu/src/menu-item/menu-item.js
+++ b/components/menu/src/menu-item/menu-item.js
@@ -104,7 +104,7 @@ const MenuItem = ({
                     destructive,
                     disabled,
                     dense,
-                    active: active || showSubMenu || tabIndex === 0,
+                    active: active || showSubMenu,
                     'with-chevron': children || chevron,
                 })}
                 ref={menuItemRef}
diff --git a/components/menu/src/menu-item/menu-item.prod.stories.js b/components/menu/src/menu-item/menu-item.prod.stories.js
index e4f2b9c695..8bfafd897c 100644
--- a/components/menu/src/menu-item/menu-item.prod.stories.js
+++ b/components/menu/src/menu-item/menu-item.prod.stories.js
@@ -91,6 +91,22 @@ Icon.parameters = {
     },
 }
 
+export const InContainer = (args) => {
+    return (
+        <div
+            style={{
+                height: 40,
+                width: 300,
+                overflow: 'hidden',
+            }}
+        >
+            <Menu {...args}>
+                <MenuItem label="Menu item" />
+            </Menu>
+        </div>
+    )
+}
+
 export const Suffix = Template.bind({})
 Suffix.args = {
     label: 'Open in Data Visualizer',
diff --git a/components/menu/src/menu-item/menu-item.styles.js b/components/menu/src/menu-item/menu-item.styles.js
index ce68600a38..6832fb89f4 100644
--- a/components/menu/src/menu-item/menu-item.styles.js
+++ b/components/menu/src/menu-item/menu-item.styles.js
@@ -49,6 +49,15 @@ export default css`
         background-color: ${colors.white};
     }
 
+    /*focus-visible backwards compatibility for safari: https://css-tricks.com/platform-news-using-focus-visible-bbcs-new-typeface-declarative-shadow-doms-a11y-and-placeholders/*/
+    li:focus {
+        outline: 3px solid ${theme.focus};
+        outline-offset: -3px;
+    }
+    li:focus:not(:focus-visible) {
+        outline: none;
+    }
+
     a {
         display: inline-flex;
         flex-grow: 1;
@@ -58,14 +67,6 @@ export default css`
         text-decoration: none;
         color: inherit;
     }
-    /*focus-visible backwards compatibility for safari: https://css-tricks.com/platform-news-using-focus-visible-bbcs-new-typeface-declarative-shadow-doms-a11y-and-placeholders/*/
-    a:focus {
-        outline: 3px solid ${theme.focus};
-        outline-offset: -3px;
-    }
-    a:focus:not(:focus-visible) {
-        outline: none;
-    }
 
     li.with-chevron a {
         padding-inline-end: ${spacers.dp8};