From 9250428d00e7e2909a0e3bae667c6ef0044ea67e Mon Sep 17 00:00:00 2001
From: Amber <yuanboxue@microsoft.com>
Date: Mon, 31 Jul 2023 16:38:21 +0200
Subject: [PATCH] fix(react-menu): use outline for menuItem focus ring (#28685)

* use outline

* chg
---
 ...menu-510dece4-88f8-4c7d-9e27-036a1e74d520.json |  7 +++++++
 .../MenuItem/useMenuItemStyles.styles.ts          | 15 +++++++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 change/@fluentui-react-menu-510dece4-88f8-4c7d-9e27-036a1e74d520.json

diff --git a/change/@fluentui-react-menu-510dece4-88f8-4c7d-9e27-036a1e74d520.json b/change/@fluentui-react-menu-510dece4-88f8-4c7d-9e27-036a1e74d520.json
new file mode 100644
index 00000000000000..b4b1b0193c8e00
--- /dev/null
+++ b/change/@fluentui-react-menu-510dece4-88f8-4c7d-9e27-036a1e74d520.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: use css outline for MenuItem focus ring instead of pseudo element",
+  "packageName": "@fluentui/react-menu",
+  "email": "yuanboxue@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.styles.ts b/packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.styles.ts
index 8e9f4cf3540490..09512b27d8d31c 100644
--- a/packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.styles.ts
+++ b/packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.styles.ts
@@ -1,6 +1,6 @@
 import { mergeClasses, makeStyles, shorthands } from '@griffel/react';
 import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
-import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
 import { useCheckmarkStyles_unstable } from '../../selectable/index';
 import type { MenuItemCheckboxState } from '../MenuItemCheckbox/index';
@@ -17,7 +17,18 @@ export const menuItemClassNames: SlotClassNames<MenuItemSlots> = {
 };
 
 const useStyles = makeStyles({
-  focusIndicator: createFocusOutlineStyle(),
+  focusIndicator: {
+    ':focus': {
+      outlineStyle: 'none',
+    },
+    ':focus-visible': {
+      outlineStyle: 'none',
+    },
+    ...createCustomFocusIndicatorStyle({
+      ...shorthands.borderRadius(tokens.borderRadiusMedium),
+      ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),
+    }),
+  },
   // TODO: this should be extracted to another package
   root: {
     ...shorthands.borderRadius(tokens.borderRadiusMedium),