From 34df2032837a8fde94749b905874050e9974aae3 Mon Sep 17 00:00:00 2001
From: Juraj Kapsiar <jurokapsiar@gmail.com>
Date: Sun, 16 Mar 2025 21:51:24 +0000
Subject: [PATCH 1/7] chore: single state for menu and combobox

---
 .../Combobox.stories.tsx                      | 59 +++++++++++++++++++
 .../ListOfScenarios.stories.mdx               |  4 ++
 .../AccessibilityScenarios/Menu.stories.tsx   |  2 +-
 .../src/components/Option/useOption.tsx       | 12 +++-
 .../Option/useOptionStyles.styles.ts          | 13 ++--
 .../library/src/components/Menu/useMenu.tsx   | 13 +++-
 .../src/components/MenuItem/useMenuItem.tsx   |  5 ++
 .../MenuItem/useMenuItemStyles.styles.ts      | 15 ++++-
 .../src/components/MenuList/useMenuList.ts    | 33 +++++++++++
 .../library/src/contexts/menuListContext.tsx  | 11 ++++
 10 files changed, 153 insertions(+), 14 deletions(-)
 create mode 100644 apps/public-docsite-v9/src/AccessibilityScenarios/Combobox.stories.tsx

diff --git a/apps/public-docsite-v9/src/AccessibilityScenarios/Combobox.stories.tsx b/apps/public-docsite-v9/src/AccessibilityScenarios/Combobox.stories.tsx
new file mode 100644
index 00000000000000..b978ffc0318a37
--- /dev/null
+++ b/apps/public-docsite-v9/src/AccessibilityScenarios/Combobox.stories.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { Combobox, ComboboxProps, makeStyles, useComboboxFilter, useId } from '@fluentui/react-components';
+import { Scenario } from './utils';
+
+const useStyles = makeStyles({
+  root: {
+    // Stack the label above the field with a gap
+    display: 'grid',
+    gridTemplateRows: 'repeat(1fr)',
+    justifyItems: 'start',
+    gap: '2px',
+    maxWidth: '400px',
+  },
+});
+
+const options = [
+  { children: 'Alligator', value: 'Alligator' },
+  { children: 'Bee', value: 'Bee' },
+  { children: 'Bird', value: 'Bird' },
+  { children: 'Cheetah', disabled: true, value: 'Cheetah' },
+  { children: 'Dog', value: 'Dog' },
+  { children: 'Dolphin', value: 'Dolphin' },
+  { children: 'Ferret', value: 'Ferret' },
+  { children: 'Firefly', value: 'Firefly' },
+  { children: 'Fish', value: 'Fish' },
+  { children: 'Goat', value: 'Goat' },
+  { children: 'Horse', value: 'Horse' },
+  { children: 'Lion', value: 'Lion' },
+];
+
+export const FilteringCombobox: React.FunctionComponent = () => {
+  const comboId = useId();
+  const styles = useStyles();
+
+  const [query, setQuery] = React.useState<string>('');
+  const children = useComboboxFilter(query, options, {
+    noOptionsMessage: 'No animals match your search.',
+  });
+  const onOptionSelect: ComboboxProps['onOptionSelect'] = (e, data) => {
+    setQuery(data.optionText ?? '');
+  };
+
+  return (
+    <Scenario pageTitle="Combobox with filtering">
+      <div className={styles.root}>
+        <label id={comboId}>Best pet</label>
+        <Combobox
+          onOptionSelect={onOptionSelect}
+          aria-labelledby={comboId}
+          placeholder="Select an animal"
+          onChange={ev => setQuery(ev.target.value)}
+          value={query}
+        >
+          {children}
+        </Combobox>
+      </div>
+    </Scenario>
+  );
+};
diff --git a/apps/public-docsite-v9/src/AccessibilityScenarios/ListOfScenarios.stories.mdx b/apps/public-docsite-v9/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
index e71f4feed04269..fdf73a6186f5b8 100644
--- a/apps/public-docsite-v9/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
+++ b/apps/public-docsite-v9/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
@@ -38,6 +38,10 @@ Accessibility scenarios are used to validate accessibility of components and dem
 - <FullscreenLink content="Menu / Profile menu" parent={parentPath} story="profile-menu" />
 - <FullscreenLink content="Menu / Menu with split item" parent={parentPath} story="menu-with-split-item" />
 
+## Component: Combobox (single state)
+
+- <FullscreenLink content="Combobox" parent={parentPath} story="filtering-combobox" />
+
 ## Component: Popover
 
 - <FullscreenLink content="Popover / Add people" parent={parentPath} story="add-people-popover" />
diff --git a/apps/public-docsite-v9/src/AccessibilityScenarios/Menu.stories.tsx b/apps/public-docsite-v9/src/AccessibilityScenarios/Menu.stories.tsx
index c7b74a0d8ab6a2..116483db08b68c 100644
--- a/apps/public-docsite-v9/src/AccessibilityScenarios/Menu.stories.tsx
+++ b/apps/public-docsite-v9/src/AccessibilityScenarios/Menu.stories.tsx
@@ -71,7 +71,7 @@ export const ProfileMenu: React.FunctionComponent = () => {
     <Scenario pageTitle="Profile menu">
       <Menu>
         <MenuTrigger disableButtonEnhancement>
-          <MenuButton>Profile</MenuButton>
+          <MenuButton>Profile - single state</MenuButton>
         </MenuTrigger>
 
         <MenuPopover>
diff --git a/packages/react-components/react-combobox/library/src/components/Option/useOption.tsx b/packages/react-components/react-combobox/library/src/components/Option/useOption.tsx
index 608262d15b63a1..a4b85b4e06a161 100644
--- a/packages/react-components/react-combobox/library/src/components/Option/useOption.tsx
+++ b/packages/react-components/react-combobox/library/src/components/Option/useOption.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, useId, useMergedRefs, slot, useEventCallback } from '@fluentui/react-utilities';
 import { useActiveDescendantContext } from '@fluentui/react-aria';
 import { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';
 import { useListboxContext_unstable } from '../../contexts/ListboxContext';
+import { useSetKeyboardNavigation } from '@fluentui/react-tabster';
 import type { OptionValue } from '../../utils/OptionCollection.types';
 import type { OptionProps, OptionState } from './Option.types';
 
@@ -87,6 +88,14 @@ export const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElemen
     props.onClick?.(event);
   };
 
+  const setKeyboardNavigationState = useSetKeyboardNavigation();
+  const onMouseMove = useEventCallback((e: React.MouseEvent) => {
+    if (activeDescendantController.active() !== id) {
+      activeDescendantController.focus(id);
+    }
+    setKeyboardNavigationState(false);
+  });
+
   // register option data with context
   React.useEffect(() => {
     if (id && optionRef.current) {
@@ -114,6 +123,7 @@ export const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElemen
         ...semanticProps,
         ...props,
         onClick,
+        onMouseMove,
       }),
       { elementType: 'div' },
     ),
diff --git a/packages/react-components/react-combobox/library/src/components/Option/useOptionStyles.styles.ts b/packages/react-components/react-combobox/library/src/components/Option/useOptionStyles.styles.ts
index b782e8b56376bf..8f5d29bb36eebc 100644
--- a/packages/react-components/react-combobox/library/src/components/Option/useOptionStyles.styles.ts
+++ b/packages/react-components/react-combobox/library/src/components/Option/useOptionStyles.styles.ts
@@ -25,21 +25,16 @@ const useStyles = makeStyles({
     lineHeight: tokens.lineHeightBase300,
     padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalS}`,
     position: 'relative',
+  },
 
-    ':hover': {
+  active: {
+    // Add the data-activedescendant attribute styles
+    '[data-activedescendant]': {
       backgroundColor: tokens.colorNeutralBackground1Hover,
       color: tokens.colorNeutralForeground1Hover,
       [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover),
     },
 
-    ':active': {
-      backgroundColor: tokens.colorNeutralBackground1Pressed,
-      color: tokens.colorNeutralForeground1Pressed,
-      [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover),
-    },
-  },
-
-  active: {
     [`[${ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE}]::after`]: {
       content: '""',
       position: 'absolute',
diff --git a/packages/react-components/react-menu/library/src/components/Menu/useMenu.tsx b/packages/react-components/react-menu/library/src/components/Menu/useMenu.tsx
index 507bec8bf9b28b..79d5e269b7db9d 100644
--- a/packages/react-components/react-menu/library/src/components/Menu/useMenu.tsx
+++ b/packages/react-components/react-menu/library/src/components/Menu/useMenu.tsx
@@ -20,6 +20,7 @@ import { useFocusFinders } from '@fluentui/react-tabster';
 import { useMenuContext_unstable } from '../../contexts/menuContext';
 import { MENU_ENTER_EVENT, useOnMenuMouseEnter } from '../../utils/index';
 import { useIsSubmenu } from '../../utils/useIsSubmenu';
+import { useMenuListContext_unstable } from '../../contexts/menuListContext';
 import type { MenuOpenChangeData, MenuOpenEvent, MenuProps, MenuState } from './Menu.types';
 
 // If it's not possible to position the submenu in smaller viewports, try
@@ -269,9 +270,17 @@ const useMenuOpenState = (
   }, [findFirstFocusable, state.menuPopoverRef]);
 
   const firstMount = useFirstMount();
+  const mouseInputState = useMenuListContext_unstable(context => context.mouseInputState);
+
   React.useEffect(() => {
     if (open) {
-      focusFirst();
+      // TODO this should not be called when user is moving the mouse around
+      // This only applies to submenus
+      // Submenu should only read this state if it's wrapped by a menulist
+      // MenuList should set this state
+      if (!mouseInputState?.isMouseInput()) {
+        focusFirst();
+      }
     } else {
       if (!firstMount) {
         if (targetDocument?.activeElement === targetDocument?.body) {
@@ -287,7 +296,7 @@ const useMenuOpenState = (
     }
     // firstMount change should not re-run this effect
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state.triggerRef, state.isSubmenu, open, focusFirst, targetDocument, state.menuPopoverRef]);
+  }, [state.triggerRef, state.isSubmenu, open, focusFirst, targetDocument, state.menuPopoverRef, mouseInputState]);
 
   return [open, setOpen] as const;
 };
diff --git a/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItem.tsx b/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItem.tsx
index 750a3deeda900c..d757bed7f42b42 100644
--- a/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItem.tsx
+++ b/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItem.tsx
@@ -37,6 +37,7 @@ const ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);
 export const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIAButtonElement<'div'>>): MenuItemState => {
   const isSubmenuTrigger = useMenuTriggerContext_unstable();
   const persistOnClickContext = useMenuContext_unstable(context => context.persistOnItemClick);
+  const mouseInputState = useMenuListContext_unstable(ctx => ctx.mouseInputState);
   const { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext } = props;
   const { hasIcons, hasCheckmarks } = useIconAndCheckmarkAlignment({ hasSubmenu });
   const setOpen = useMenuContext_unstable(context => context.setOpen);
@@ -75,6 +76,10 @@ export const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIABu
             }
           }),
           onMouseMove: useEventCallback(event => {
+            if (!mouseInputState?.isMouseInput()) {
+              mouseInputState?.setMouseInput(true);
+            }
+
             if (event.currentTarget.ownerDocument.activeElement !== event.currentTarget) {
               innerRef.current?.focus();
             }
diff --git a/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItemStyles.styles.ts b/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItemStyles.styles.ts
index fca9ed9dd16d43..2b4e292a770811 100644
--- a/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItemStyles.styles.ts
+++ b/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItemStyles.styles.ts
@@ -36,7 +36,8 @@ const useRootBaseStyles = makeResetStyles({
   cursor: 'pointer',
   gap: '4px',
 
-  ':hover': {
+  ':focus': {
+    outline: 'none',
     backgroundColor: tokens.colorNeutralBackground1Hover,
     color: tokens.colorNeutralForeground2Hover,
 
@@ -55,6 +56,10 @@ const useRootBaseStyles = makeResetStyles({
     },
   },
 
+  ':focus-visible': {
+    outlineStyle: 'none',
+  },
+
   ':hover:active': {
     backgroundColor: tokens.colorNeutralBackground1Pressed,
     color: tokens.colorNeutralForeground2Pressed,
@@ -64,6 +69,14 @@ const useRootBaseStyles = makeResetStyles({
     },
   },
 
+  ':hover:active:focus': {
+    outlineStyle: 'none',
+  },
+
+  ':hover:active:focus-visible': {
+    outlineStyle: 'none',
+  },
+
   // High contrast styles
   '@media (forced-colors: active)': {
     ':hover': {
diff --git a/packages/react-components/react-menu/library/src/components/MenuList/useMenuList.ts b/packages/react-components/react-menu/library/src/components/MenuList/useMenuList.ts
index 9846dcff0a377e..5381c5388e2d24 100644
--- a/packages/react-components/react-menu/library/src/components/MenuList/useMenuList.ts
+++ b/packages/react-components/react-menu/library/src/components/MenuList/useMenuList.ts
@@ -11,11 +11,14 @@ import {
   useFocusFinders,
   TabsterMoveFocusEventName,
   type TabsterMoveFocusEvent,
+  useSetKeyboardNavigation,
+  useOnKeyboardNavigationChange,
 } from '@fluentui/react-tabster';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { useHasParentContext } from '@fluentui/react-context-selector';
 import { useMenuContext_unstable } from '../../contexts/menuContext';
 import { MenuContext } from '../../contexts/menuContext';
+import { useMenuListContext_unstable } from '../../contexts/menuListContext';
 import type { MenuListProps, MenuListState } from './MenuList.types';
 
 /**
@@ -133,6 +136,8 @@ export const useMenuList_unstable = (props: MenuListProps, ref: React.Ref<HTMLEl
     handleCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });
   });
 
+  const mouseInputState = useMouseInputState();
+
   return {
     components: {
       root: 'div',
@@ -157,6 +162,7 @@ export const useMenuList_unstable = (props: MenuListProps, ref: React.Ref<HTMLEl
     setFocusByFirstCharacter,
     selectRadio,
     toggleCheckbox,
+    mouseInputState,
   };
 };
 
@@ -196,3 +202,30 @@ const usingPropsAndMenuContext = (
 
   return hasMenuContext && isUsingPropsAndContext;
 };
+
+/**
+ * Hook to track whether menu is being controlled via mouse or keyboard
+ */
+const useMouseInputState = () => {
+  const parentContext = useMenuListContext_unstable(ctx => ctx.mouseInputState);
+  const setKeyboardNavigationState = useSetKeyboardNavigation();
+  const isMouseInputRef = React.useRef(!!parentContext?.isMouseInput());
+
+  const setMouseInput = React.useCallback(
+    (isMouseInput: boolean) => {
+      setKeyboardNavigationState(!isMouseInput);
+      parentContext?.setMouseInput(isMouseInput);
+      isMouseInputRef.current = isMouseInput;
+    },
+    [parentContext, setKeyboardNavigationState],
+  );
+
+  useOnKeyboardNavigationChange(isNavigatingWithKeyboard => {
+    setMouseInput(!isNavigatingWithKeyboard);
+  });
+
+  return {
+    isMouseInput: () => isMouseInputRef.current,
+    setMouseInput,
+  };
+};
diff --git a/packages/react-components/react-menu/library/src/contexts/menuListContext.tsx b/packages/react-components/react-menu/library/src/contexts/menuListContext.tsx
index d4ffe7d62429da..b0e04c11e00e22 100644
--- a/packages/react-components/react-menu/library/src/contexts/menuListContext.tsx
+++ b/packages/react-components/react-menu/library/src/contexts/menuListContext.tsx
@@ -15,6 +15,10 @@ const menuListContextDefaultValue: MenuListContextValue = {
   selectRadio: () => null,
   hasIcons: false,
   hasCheckmarks: false,
+  mouseInputState: {
+    isMouseInput: () => false,
+    setMouseInput: () => null,
+  },
 };
 
 /**
@@ -34,6 +38,13 @@ export type MenuListContextValue = Pick<MenuListProps, 'checkedValues' | 'hasIco
    * the signature remains just to avoid breaking changes
    */
   onCheckedValueChange?: (e: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void;
+  /**
+   * State for tracking whether interaction is via mouse or keyboard
+   */
+  mouseInputState?: {
+    isMouseInput: () => boolean;
+    setMouseInput: (isMouseInput: boolean) => void;
+  };
 };
 
 export const MenuListProvider = MenuListContext.Provider;

From c64c084013fe48173f6e3f5cfed4d1ca317b6411 Mon Sep 17 00:00:00 2001
From: Juraj Kapsiar <jurokapsiar@gmail.com>
Date: Sun, 16 Mar 2025 22:19:21 +0000
Subject: [PATCH 2/7] fix

---
 .../src/AccessibilityScenarios/Combobox.stories.tsx             | 2 +-
 .../react-menu/library/src/components/MenuList/useMenuList.ts   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/public-docsite-v9/src/AccessibilityScenarios/Combobox.stories.tsx b/apps/public-docsite-v9/src/AccessibilityScenarios/Combobox.stories.tsx
index b978ffc0318a37..c250894a0df3e1 100644
--- a/apps/public-docsite-v9/src/AccessibilityScenarios/Combobox.stories.tsx
+++ b/apps/public-docsite-v9/src/AccessibilityScenarios/Combobox.stories.tsx
@@ -41,7 +41,7 @@ export const FilteringCombobox: React.FunctionComponent = () => {
   };
 
   return (
-    <Scenario pageTitle="Combobox with filtering">
+    <Scenario pageTitle="Filtering combobox">
       <div className={styles.root}>
         <label id={comboId}>Best pet</label>
         <Combobox
diff --git a/packages/react-components/react-menu/library/src/components/MenuList/useMenuList.ts b/packages/react-components/react-menu/library/src/components/MenuList/useMenuList.ts
index 5381c5388e2d24..66e07bc4f00bd2 100644
--- a/packages/react-components/react-menu/library/src/components/MenuList/useMenuList.ts
+++ b/packages/react-components/react-menu/library/src/components/MenuList/useMenuList.ts
@@ -213,7 +213,7 @@ const useMouseInputState = () => {
 
   const setMouseInput = React.useCallback(
     (isMouseInput: boolean) => {
-      setKeyboardNavigationState(!isMouseInput);
+      setKeyboardNavigationState(true);
       parentContext?.setMouseInput(isMouseInput);
       isMouseInputRef.current = isMouseInput;
     },

From c1bff20f80f35e915d2de46ab9fe6845cce455e4 Mon Sep 17 00:00:00 2001
From: Juraj Kapsiar <jurokapsiar@gmail.com>
Date: Sun, 16 Mar 2025 22:33:10 +0000
Subject: [PATCH 3/7] fix

---
 .../src/AccessibilityScenarios/index.stories.tsx                 | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/public-docsite-v9/src/AccessibilityScenarios/index.stories.tsx b/apps/public-docsite-v9/src/AccessibilityScenarios/index.stories.tsx
index 8f50cd7590c4b2..618bbf09d9176f 100644
--- a/apps/public-docsite-v9/src/AccessibilityScenarios/index.stories.tsx
+++ b/apps/public-docsite-v9/src/AccessibilityScenarios/index.stories.tsx
@@ -5,6 +5,7 @@ export { QuestionnaireAboutFoodCheckboxes } from './Checkbox.stories';
 export { TicketOrderFormInputs } from './Input.stories';
 export { SiteNavigationLinks } from './Link.stories';
 export { ProfileMenu } from './Menu.stories';
+export { FilteringCombobox } from './Combobox.stories';
 export { MenuWithSplitItem } from './MenuSplitGroup.stories';
 export { AddPeoplePopover } from './Popover.stories';
 export { QuestionnaireAboutTransportationRadios } from './RadioGroup.stories';

From 9e624a123ee26f176c1a1c47d7ac488ca98fe7b3 Mon Sep 17 00:00:00 2001
From: Juraj Kapsiar <jukapsia@microsoft.com>
Date: Mon, 17 Mar 2025 08:24:03 +0100
Subject: [PATCH 4/7] better

---
 .../library/src/components/MenuItem/MenuItem.types.ts      | 4 +++-
 .../library/src/components/MenuItem/useMenuItem.tsx        | 4 +++-
 .../src/components/MenuItem/useMenuItemStyles.styles.ts    | 7 +++++++
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/react-menu/library/src/components/MenuItem/MenuItem.types.ts b/packages/react-components/react-menu/library/src/components/MenuItem/MenuItem.types.ts
index f8e0576690f440..5632086bbf28bc 100644
--- a/packages/react-components/react-menu/library/src/components/MenuItem/MenuItem.types.ts
+++ b/packages/react-components/react-menu/library/src/components/MenuItem/MenuItem.types.ts
@@ -61,4 +61,6 @@ export type MenuItemProps = Omit<ComponentProps<Partial<MenuItemSlots>>, 'conten
   };
 
 export type MenuItemState = ComponentState<MenuItemSlots> &
-  Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>>;
+  Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>> & {
+    isSubmenuOpen: boolean;
+  };
diff --git a/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItem.tsx b/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItem.tsx
index d757bed7f42b42..6faa4de845b104 100644
--- a/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItem.tsx
+++ b/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItem.tsx
@@ -42,6 +42,7 @@ export const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIABu
   const { hasIcons, hasCheckmarks } = useIconAndCheckmarkAlignment({ hasSubmenu });
   const setOpen = useMenuContext_unstable(context => context.setOpen);
   useNotifySplitItemMultiline({ multiline: !!props.subText, hasSubmenu });
+  const isSubmenuOpen = useMenuContext_unstable(context => context.open);
 
   const { dir } = useFluent();
   const innerRef = React.useRef<ARIAButtonElementIntersection<'div'>>(null);
@@ -51,6 +52,7 @@ export const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIABu
     hasSubmenu,
     disabled,
     persistOnClick,
+    isSubmenuOpen: hasSubmenu && isSubmenuOpen,
     components: {
       root: 'div',
       icon: 'span',
@@ -80,7 +82,7 @@ export const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIABu
               mouseInputState?.setMouseInput(true);
             }
 
-            if (event.currentTarget.ownerDocument.activeElement !== event.currentTarget) {
+            if (event.currentTarget.ownerDocument.activeElement !== event.currentTarget && !(hasSubmenu && isSubmenuOpen)) {
               innerRef.current?.focus();
             }
 
diff --git a/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItemStyles.styles.ts b/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItemStyles.styles.ts
index 2b4e292a770811..525091995d716f 100644
--- a/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItemStyles.styles.ts
+++ b/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItemStyles.styles.ts
@@ -36,6 +36,9 @@ const useRootBaseStyles = makeResetStyles({
   cursor: 'pointer',
   gap: '4px',
 
+  ':hover:focus': {
+    backgroundColor: tokens.colorNeutralBackground1Hover,
+  },
   ':focus': {
     outline: 'none',
     backgroundColor: tokens.colorNeutralBackground1Hover,
@@ -139,6 +142,9 @@ const useSubtextBaseStyles = makeResetStyles({
 });
 
 const useStyles = makeStyles({
+  submenuOpen: {
+    backgroundColor: tokens.colorNeutralBackground2,
+  },
   checkmark: {
     marginTop: '2px',
   },
@@ -234,6 +240,7 @@ export const useMenuItemStyles_unstable = (state: MenuItemState): MenuItemState
     menuItemClassNames.root,
     rootBaseStyles,
     state.disabled && styles.disabled,
+    state.hasSubmenu && state.isSubmenuOpen && styles.submenuOpen,
     state.root.className,
   );
 

From b747919d08df9e8f3731d090e48f451757cd33ec Mon Sep 17 00:00:00 2001
From: Juraj Kapsiar <jurokapsiar@gmail.com>
Date: Wed, 19 Mar 2025 12:45:09 +0000
Subject: [PATCH 5/7] better

---
 .../Combobox.stories.tsx                      |  78 ++++++----
 .../AccessibilityScenarios/Menu.stories.tsx   | 136 +++++++-----------
 2 files changed, 102 insertions(+), 112 deletions(-)

diff --git a/apps/public-docsite-v9/src/AccessibilityScenarios/Combobox.stories.tsx b/apps/public-docsite-v9/src/AccessibilityScenarios/Combobox.stories.tsx
index c250894a0df3e1..20877a4d7a2e27 100644
--- a/apps/public-docsite-v9/src/AccessibilityScenarios/Combobox.stories.tsx
+++ b/apps/public-docsite-v9/src/AccessibilityScenarios/Combobox.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Combobox, ComboboxProps, makeStyles, useComboboxFilter, useId } from '@fluentui/react-components';
+import { Combobox, Option, makeStyles, useId } from '@fluentui/react-components';
 import { Scenario } from './utils';
 
 const useStyles = makeStyles({
@@ -14,44 +14,62 @@ const useStyles = makeStyles({
 });
 
 const options = [
-  { children: 'Alligator', value: 'Alligator' },
-  { children: 'Bee', value: 'Bee' },
-  { children: 'Bird', value: 'Bird' },
-  { children: 'Cheetah', disabled: true, value: 'Cheetah' },
-  { children: 'Dog', value: 'Dog' },
-  { children: 'Dolphin', value: 'Dolphin' },
-  { children: 'Ferret', value: 'Ferret' },
-  { children: 'Firefly', value: 'Firefly' },
-  { children: 'Fish', value: 'Fish' },
-  { children: 'Goat', value: 'Goat' },
-  { children: 'Horse', value: 'Horse' },
-  { children: 'Lion', value: 'Lion' },
+  'Apple',
+  'Apricot',
+  'Avocado',
+  'Banana',
+  'Blackberry',
+  'Blueberry',
+  'Boysenberry',
+  'Cantaloupe',
+  'Coconut',
+  'Currant',
+  'Date',
+  'Dragon fruit',
+  'Fig',
+  'Grape',
+  'Grapefruit',
+  'Honeydew',
+  'Kiwi',
+  'Lemon',
+  'Lime',
+  'Lychee',
+  'Mango',
+  'Mandarin orange',
+  'Melon',
+  'Nectarine',
+  'Olive',
+  'Orange',
+  'Papaya',
+  'Passion Fruit',
+  'Peach',
+  'Pear',
+  'Persimmon',
+  'Pineapple',
+  'Plum',
+  'Pomegranate',
+  'Raspberry',
+  'Ramnutan',
+  'Strawberry',
+  'Tangerine',
+  'Watermelon',
 ];
 
 export const FilteringCombobox: React.FunctionComponent = () => {
   const comboId = useId();
   const styles = useStyles();
 
-  const [query, setQuery] = React.useState<string>('');
-  const children = useComboboxFilter(query, options, {
-    noOptionsMessage: 'No animals match your search.',
-  });
-  const onOptionSelect: ComboboxProps['onOptionSelect'] = (e, data) => {
-    setQuery(data.optionText ?? '');
-  };
-
   return (
     <Scenario pageTitle="Filtering combobox">
+      <div>Single state</div>
       <div className={styles.root}>
-        <label id={comboId}>Best pet</label>
-        <Combobox
-          onOptionSelect={onOptionSelect}
-          aria-labelledby={comboId}
-          placeholder="Select an animal"
-          onChange={ev => setQuery(ev.target.value)}
-          value={query}
-        >
-          {children}
+        <label id={comboId}>Favourite fruit to have with ice-cream</label>
+        <Combobox aria-labelledby={comboId} placeholder="Pick a fruit">
+          {options.map(option => (
+            <Option key={option} disabled={option === 'Ferret'}>
+              {option}
+            </Option>
+          ))}
         </Combobox>
       </div>
     </Scenario>
diff --git a/apps/public-docsite-v9/src/AccessibilityScenarios/Menu.stories.tsx b/apps/public-docsite-v9/src/AccessibilityScenarios/Menu.stories.tsx
index 116483db08b68c..16df6289b14f6c 100644
--- a/apps/public-docsite-v9/src/AccessibilityScenarios/Menu.stories.tsx
+++ b/apps/public-docsite-v9/src/AccessibilityScenarios/Menu.stories.tsx
@@ -1,99 +1,71 @@
 import * as React from 'react';
 
-import {
-  Menu,
-  MenuButton,
-  MenuGroup,
-  MenuGroupHeader,
-  MenuItem,
-  MenuItemCheckbox,
-  MenuItemRadio,
-  MenuList,
-  MenuPopover,
-  MenuTrigger,
-} from '@fluentui/react-components';
+import { Menu, MenuButton, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-components';
 
 import { Scenario } from './utils';
 
-interface StatusSubmenuProps {
-  checkedValues: Record<string, string[]>;
-  onChange: OnCheckedValueChangeCallback;
-}
-
-const StatusSubmenu: React.FunctionComponent<StatusSubmenuProps> = props => {
-  const { checkedValues, onChange } = props;
-
-  return (
-    <Menu checkedValues={checkedValues} onCheckedValueChange={onChange}>
-      <MenuTrigger disableButtonEnhancement>
-        <MenuItem>Status</MenuItem>
-      </MenuTrigger>
-
-      <MenuPopover>
-        <MenuList>
-          <MenuItemRadio name="status" value="online">
-            Online
-          </MenuItemRadio>
-          <MenuItemRadio name="status" value="away">
-            Away
-          </MenuItemRadio>
-          <MenuItemRadio name="status" value="offline" disabled>
-            Offline
-          </MenuItemRadio>
-        </MenuList>
-      </MenuPopover>
-    </Menu>
-  );
-};
-
-type OnCheckedValueChangeDataType = {
-  name: string;
-  checkedItems: string[];
-};
-
-type OnCheckedValueChangeCallback = (
-  event: React.MouseEvent | React.KeyboardEvent,
-  data: OnCheckedValueChangeDataType,
-) => void;
-
-type ProfileMenuStatus = { status: Array<'online' | 'away' | 'offline'> };
-
 export const ProfileMenu: React.FunctionComponent = () => {
-  const [statusCheckedValues, setStatusCheckedValues] = React.useState<ProfileMenuStatus>({ status: ['online'] });
-  const onStatusChange = (
-    event: React.MouseEvent | React.KeyboardEvent,
-    { name, checkedItems }: OnCheckedValueChangeDataType,
-  ) => {
-    setStatusCheckedValues(state => ({ ...state, [name]: checkedItems }));
-  };
-
   return (
     <Scenario pageTitle="Profile menu">
+      <div>Single state</div>
       <Menu>
         <MenuTrigger disableButtonEnhancement>
-          <MenuButton>Profile - single state</MenuButton>
+          <MenuButton>Pick a fruit</MenuButton>
         </MenuTrigger>
 
         <MenuPopover>
           <MenuList>
-            <MenuGroup>
-              <MenuGroupHeader>Information</MenuGroupHeader>
-              <MenuItem>Help</MenuItem>
-            </MenuGroup>
-            <MenuGroup>
-              <MenuGroupHeader>Settings</MenuGroupHeader>
-              <MenuItemCheckbox name="settings" value="runAtStartup">
-                Run at startup
-              </MenuItemCheckbox>
-              <MenuItemCheckbox name="settings" value="showNotifications">
-                Show notifications
-              </MenuItemCheckbox>
-            </MenuGroup>
-            <MenuGroup>
-              <MenuGroupHeader>Account</MenuGroupHeader>
-              <StatusSubmenu checkedValues={statusCheckedValues} onChange={onStatusChange} />
-              <MenuItem>Logout</MenuItem>
-            </MenuGroup>
+            <MenuItem>Apple</MenuItem>
+            <MenuItem>Apricot</MenuItem>
+            <MenuItem>Avocado</MenuItem>
+            <MenuItem>Banana</MenuItem>
+
+            <Menu>
+              <MenuTrigger disableButtonEnhancement>
+                <MenuItem>Berries</MenuItem>
+              </MenuTrigger>
+
+              <MenuPopover>
+                <MenuList>
+                  <MenuItem>Blackberry</MenuItem>
+                  <MenuItem>Boysenberry</MenuItem>
+                  <MenuItem>Blueberry</MenuItem>
+                  <MenuItem>Strawberry</MenuItem>
+                  <MenuItem>Rapsberry</MenuItem>
+                  <MenuItem>Barry White</MenuItem>
+                </MenuList>
+              </MenuPopover>
+            </Menu>
+
+            <MenuItem>Cantaloupe</MenuItem>
+            <MenuItem>Coconut</MenuItem>
+            <MenuItem>Currant</MenuItem>
+            <MenuItem>Dragon Fruit</MenuItem>
+            <MenuItem>Grape</MenuItem>
+            <MenuItem>Grapefruit</MenuItem>
+            <MenuItem>Honeydew</MenuItem>
+            <MenuItem>Kiwi</MenuItem>
+            <MenuItem>Lemon</MenuItem>
+            <MenuItem>Lime</MenuItem>
+            <MenuItem>Lychee</MenuItem>
+            <MenuItem>Mango</MenuItem>
+            <MenuItem>Mandarin Orange</MenuItem>
+            <MenuItem>Melon</MenuItem>
+            <MenuItem>Nectarine</MenuItem>
+            <MenuItem>Olive</MenuItem>
+            <MenuItem>Orange</MenuItem>
+            <MenuItem>Papaya</MenuItem>
+            <MenuItem>Passion Fruit</MenuItem>
+            <MenuItem>Peach</MenuItem>
+            <MenuItem>Pear</MenuItem>
+            <MenuItem>Persimmon</MenuItem>
+            <MenuItem>Pineapple</MenuItem>
+            <MenuItem>Plum</MenuItem>
+            <MenuItem>Pomegranate</MenuItem>
+            <MenuItem>Raspberry</MenuItem>
+            <MenuItem>Rambutan</MenuItem>
+            <MenuItem>Strawberry</MenuItem>
+            <MenuItem>Watermelon</MenuItem>
           </MenuList>
         </MenuPopover>
       </Menu>

From 1af4ac281efdb80ff5e520a1bc4e1f5bb99d91d5 Mon Sep 17 00:00:00 2001
From: Juraj Kapsiar <jurokapsiar@gmail.com>
Date: Mon, 24 Mar 2025 20:28:11 +0000
Subject: [PATCH 6/7] autosize

---
 .../src/AccessibilityScenarios/Combobox.stories.tsx             | 2 +-
 .../src/AccessibilityScenarios/Menu.stories.tsx                 | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/public-docsite-v9/src/AccessibilityScenarios/Combobox.stories.tsx b/apps/public-docsite-v9/src/AccessibilityScenarios/Combobox.stories.tsx
index 20877a4d7a2e27..e3aac196b6b69d 100644
--- a/apps/public-docsite-v9/src/AccessibilityScenarios/Combobox.stories.tsx
+++ b/apps/public-docsite-v9/src/AccessibilityScenarios/Combobox.stories.tsx
@@ -64,7 +64,7 @@ export const FilteringCombobox: React.FunctionComponent = () => {
       <div>Single state</div>
       <div className={styles.root}>
         <label id={comboId}>Favourite fruit to have with ice-cream</label>
-        <Combobox aria-labelledby={comboId} placeholder="Pick a fruit">
+        <Combobox aria-labelledby={comboId} placeholder="Pick a fruit" positioning={{ autoSize: true }}>
           {options.map(option => (
             <Option key={option} disabled={option === 'Ferret'}>
               {option}
diff --git a/apps/public-docsite-v9/src/AccessibilityScenarios/Menu.stories.tsx b/apps/public-docsite-v9/src/AccessibilityScenarios/Menu.stories.tsx
index 16df6289b14f6c..e706b749d44c06 100644
--- a/apps/public-docsite-v9/src/AccessibilityScenarios/Menu.stories.tsx
+++ b/apps/public-docsite-v9/src/AccessibilityScenarios/Menu.stories.tsx
@@ -8,7 +8,7 @@ export const ProfileMenu: React.FunctionComponent = () => {
   return (
     <Scenario pageTitle="Profile menu">
       <div>Single state</div>
-      <Menu>
+      <Menu positioning={{ autoSize: true }}>
         <MenuTrigger disableButtonEnhancement>
           <MenuButton>Pick a fruit</MenuButton>
         </MenuTrigger>

From 035af40e840f7c8ee8bae97b3c316af3222b7bb1 Mon Sep 17 00:00:00 2001
From: Juraj Kapsiar <jurokapsiar@gmail.com>
Date: Thu, 27 Mar 2025 17:36:01 +0000
Subject: [PATCH 7/7] titles

---
 .../src/AccessibilityScenarios/Combobox.stories.tsx       | 3 ++-
 .../src/AccessibilityScenarios/Menu.stories.tsx           | 3 ++-
 .../src/AccessibilityScenarios/utils.tsx                  | 8 +-------
 3 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/apps/public-docsite-v9/src/AccessibilityScenarios/Combobox.stories.tsx b/apps/public-docsite-v9/src/AccessibilityScenarios/Combobox.stories.tsx
index e3aac196b6b69d..04f30838b1e00a 100644
--- a/apps/public-docsite-v9/src/AccessibilityScenarios/Combobox.stories.tsx
+++ b/apps/public-docsite-v9/src/AccessibilityScenarios/Combobox.stories.tsx
@@ -61,7 +61,8 @@ export const FilteringCombobox: React.FunctionComponent = () => {
 
   return (
     <Scenario pageTitle="Filtering combobox">
-      <div>Single state</div>
+      <h1>Test 3</h1>
+      <div>Single State Interaction (Unified Hover/Focus)</div>
       <div className={styles.root}>
         <label id={comboId}>Favourite fruit to have with ice-cream</label>
         <Combobox aria-labelledby={comboId} placeholder="Pick a fruit" positioning={{ autoSize: true }}>
diff --git a/apps/public-docsite-v9/src/AccessibilityScenarios/Menu.stories.tsx b/apps/public-docsite-v9/src/AccessibilityScenarios/Menu.stories.tsx
index e706b749d44c06..c263deb488639c 100644
--- a/apps/public-docsite-v9/src/AccessibilityScenarios/Menu.stories.tsx
+++ b/apps/public-docsite-v9/src/AccessibilityScenarios/Menu.stories.tsx
@@ -7,7 +7,8 @@ import { Scenario } from './utils';
 export const ProfileMenu: React.FunctionComponent = () => {
   return (
     <Scenario pageTitle="Profile menu">
-      <div>Single state</div>
+      <h1>Test 1</h1>
+      <div>Single State Interaction (Unified Hover/Focus)</div>
       <Menu positioning={{ autoSize: true }}>
         <MenuTrigger disableButtonEnhancement>
           <MenuButton>Pick a fruit</MenuButton>
diff --git a/apps/public-docsite-v9/src/AccessibilityScenarios/utils.tsx b/apps/public-docsite-v9/src/AccessibilityScenarios/utils.tsx
index 12c494c2dc788d..a3b0f69f538ec2 100644
--- a/apps/public-docsite-v9/src/AccessibilityScenarios/utils.tsx
+++ b/apps/public-docsite-v9/src/AccessibilityScenarios/utils.tsx
@@ -34,11 +34,5 @@ export const Scenario: React.FunctionComponent<{ pageTitle: string }> = ({ pageT
     document.title = pageTitle + APP_TITLE_SEPARATOR + APP_TITLE;
   }, [pageTitle]);
 
-  return (
-    <div role="main">
-      <BackLink />
-      <br />
-      {children}
-    </div>
-  );
+  return <div role="main">{children}</div>;
 };