From c3f0a63a1cbfd477486ade3be788ccfc1a89f6d3 Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Mon, 31 Jul 2023 15:18:45 +0200 Subject: [PATCH 1/2] use outline --- .../MenuItem/useMenuItemStyles.styles.ts | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) 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 8e9f4cf354049..09512b27d8d31 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 = { }; 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), From e119251cdf1af020e838255a75e72b0c3fade6fa Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Mon, 31 Jul 2023 15:20:51 +0200 Subject: [PATCH 2/2] chg --- ...ui-react-menu-510dece4-88f8-4c7d-9e27-036a1e74d520.json | 7 +++++++ 1 file changed, 7 insertions(+) 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 0000000000000..b4b1b0193c8e0 --- /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" +}