fix focus-visible styles in safari

microsoft · Jun 19, 2024 · 49e9093 · 49e9093
1 parent 951b615
commit 49e9093
Showing 1 changed file with 6 additions and 0 deletions.
diff --git a/packages/web-components/src/menu-item/menu-item.styles.ts b/packages/web-components/src/menu-item/menu-item.styles.ts
@@ -13,6 +13,7 @@ import {
   colorNeutralForeground2Pressed,
   colorNeutralForeground3,
   colorNeutralForegroundDisabled,
+  colorStrokeFocus2,
   fontFamilyBase,
   fontSizeBase200,
   fontSizeBase300,
@@ -48,6 +49,11 @@ export const styles = css`
     background: ${colorNeutralBackground1Hover};
   }
 
+  :host(:focus-visible) {
+    border-radius: ${borderRadiusMedium};
+    outline: 2px solid ${colorStrokeFocus2};
+  }
+
   .indicator {
     width: 20px;
   }