diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index 12a40f321..48a864968 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -16,6 +16,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti - Fixed a big in `` that caused the calendar icon to be clipped in Firefox [#1213](https://github.com/shoelace-style/shoelace/pull/1213) - Fixed a bug in `` that caused `sl-tab-show` to be emitted when activating the close button - Fixed a bug in `` that caused `--track-color` to be invisible with certain colors +- Fixed a bug in `` that caused the focus color to show when selecting menu items with a mouse or touch device - Updated `@shoelace-style/localize` to 3.1.0 When using `` the default value for `autocapitalize`, `autocomplete`, and `autocorrect` may be affected due to the bug fixed in [#1205](https://github.com/shoelace-style/shoelace/issues/1205). For any affected users, setting these attributes to `off` will restore the previous behavior. diff --git a/src/components/menu-item/menu-item.styles.ts b/src/components/menu-item/menu-item.styles.ts index 8ee1fef6d..15ff27a48 100644 --- a/src/components/menu-item/menu-item.styles.ts +++ b/src/components/menu-item/menu-item.styles.ts @@ -60,7 +60,7 @@ export default css` margin-inline-start: var(--sl-spacing-x-small); } - :host(:focus) { + :host(:focus-visible) { outline: none; } @@ -69,7 +69,7 @@ export default css` color: var(--sl-color-neutral-1000); } - :host(:focus) .menu-item { + :host(:focus-visible) .menu-item { outline: none; background-color: var(--sl-color-primary-600); color: var(--sl-color-neutral-0); @@ -93,7 +93,7 @@ export default css` @media (forced-colors: active) { :host(:hover:not([aria-disabled='true'])) .menu-item, - :host(:focus) .menu-item { + :host(:focus-visible) .menu-item { outline: dashed 1px SelectedItem; outline-offset: -1px; }