From b296ac08cf8839fb5b9cd80d8b4db6e9722a8bd1 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 14 Nov 2022 14:49:48 -0500
Subject: [PATCH] fix menu selection in WHC

---
 src/components/menu-item/menu-item.styles.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/menu-item/menu-item.styles.ts b/src/components/menu-item/menu-item.styles.ts
index 456b358d..757875aa 100644
--- a/src/components/menu-item/menu-item.styles.ts
+++ b/src/components/menu-item/menu-item.styles.ts
@@ -66,6 +66,14 @@ export default css`
     color: var(--sl-color-neutral-0);
   }
 
+  @media (forced-colors: active) {
+    :host(:hover:not([aria-disabled='true'])) .menu-item,
+    :host(:focus-visible:not(.sl-focus-invisible):not([aria-disabled='true'])) .menu-item {
+      outline: dashed 1px SelectedItem;
+      outline-offset: -1px;
+    }
+  }
+
   .menu-item .menu-item__check,
   .menu-item .menu-item__chevron {
     flex: 0 0 auto;