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};