Skip to content

Commit

Permalink
fix(menu-item): tweak active and focused styles (#1639)
Browse files Browse the repository at this point in the history
* fix: remove active style from menu item with tabIndex 0

* fix: apply focus styles to <li> tag
HendrikThePendric authored Nov 26, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent ce4d3ae commit e6bf884
Showing 3 changed files with 26 additions and 9 deletions.
2 changes: 1 addition & 1 deletion components/menu/src/menu-item/menu-item.js
Original file line number Diff line number Diff line change
@@ -104,7 +104,7 @@ const MenuItem = ({
destructive,
disabled,
dense,
active: active || showSubMenu || tabIndex === 0,
active: active || showSubMenu,
'with-chevron': children || chevron,
})}
ref={menuItemRef}
16 changes: 16 additions & 0 deletions components/menu/src/menu-item/menu-item.prod.stories.js
Original file line number Diff line number Diff line change
@@ -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',
17 changes: 9 additions & 8 deletions components/menu/src/menu-item/menu-item.styles.js
Original file line number Diff line number Diff line change
@@ -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};

0 comments on commit e6bf884

Please sign in to comment.