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 (
+
+
+
+ )
+}
+
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};