From d3a0a38dce8d8704c08eae4fd9e184f4752c41cc Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Thu, 13 Apr 2023 10:31:24 -0400 Subject: [PATCH] don't show hover when focused; fixes #1282 --- docs/resources/changelog.md | 1 + src/components/menu-item/menu-item.styles.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index 33eb3e33c..49100b1e4 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -17,6 +17,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti - Fixed a bug in `` that caused the initials to show up behind images with transparency [#1260](https://github.com/shoelace-style/shoelace/pull/1260) - Fixed a bug in `` that prevented the divider from being focusable in some browsers [#1288](https://github.com/shoelace-style/shoelace/issues/1288) - Fixed a bug that caused `` to affect scrolling when initializing [#1292](https://github.com/shoelace-style/shoelace/issues/1292) +- Fixed a bug in `` that allowed the hover state to show when focused [#1282](https://github.com/shoelace-style/shoelace/issues/1282) - Improved the behavior of `` when used inside a flex container [#1235](https://github.com/shoelace-style/shoelace/pull/1235) - Improved the behavior of `` to support buttons and other interactive elements [#1234](https://github.com/shoelace-style/shoelace/issues/1234) - Improved the performance of `` to prevent an apparent memory leak in some browsers [#1284](https://github.com/shoelace-style/shoelace/pull/1284) diff --git a/src/components/menu-item/menu-item.styles.ts b/src/components/menu-item/menu-item.styles.ts index 15ff27a48..9f1c312c5 100644 --- a/src/components/menu-item/menu-item.styles.ts +++ b/src/components/menu-item/menu-item.styles.ts @@ -64,7 +64,7 @@ export default css` outline: none; } - :host(:hover:not([aria-disabled='true'])) .menu-item { + :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item { background-color: var(--sl-color-neutral-100); color: var(--sl-color-neutral-1000); }