fix: apply focus styles to <li> tag

dhis2 · Nov 26, 2024 · 822af60 · 822af60
1 parent a91c77b
commit 822af60
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 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
@@ -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
@@ -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};