From a91c77b6d2f3956d5efafacf59420c16f7314a32 Mon Sep 17 00:00:00 2001
From: HendrikThePendric <hendrik@dhis2.org>
Date: Mon, 25 Nov 2024 17:54:38 +0100
Subject: [PATCH 1/2] fix: remove active style from menu item with tabIndex 0

---
 components/menu/src/menu-item/menu-item.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/menu/src/menu-item/menu-item.js b/components/menu/src/menu-item/menu-item.js
index c5ca57385..76ca1245d 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}

From 822af60af9e6ba1f8e120152728ccc12b0f2a116 Mon Sep 17 00:00:00 2001
From: HendrikThePendric <hendrik@dhis2.org>
Date: Tue, 26 Nov 2024 09:37:29 +0100
Subject: [PATCH 2/2] fix: apply focus styles to <li> tag

---
 .../src/menu-item/menu-item.prod.stories.js     | 16 ++++++++++++++++
 .../menu/src/menu-item/menu-item.styles.js      | 17 +++++++++--------
 2 files changed, 25 insertions(+), 8 deletions(-)

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 e4f2b9c69..8bfafd897 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 ce68600a3..6832fb89f 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};