fix(react-menu): use outline for menuItem focus ring (#28685)

* use outline * chg
microsoft · Jul 31, 2023 · 9250428 · 9250428
1 parent d4b3fee
commit 9250428
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/change/@fluentui-react-menu-510dece4-88f8-4c7d-9e27-036a1e74d520.json 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": "[email protected]",
+  "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
@@ -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),