chore: single state for menu and combobox

apps/public-docsite-v9/src/AccessibilityScenarios/Combobox.stories.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { Combobox, Option, makeStyles, 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 = [
+  '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();
+
+  return (
+    <Scenario pageTitle="Filtering combobox">
+      <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 }}>
+          {options.map(option => (
+            <Option key={option} disabled={option === 'Ferret'}>
+              {option}
+            </Option>
+          ))}
+        </Combobox>
+      </div>
+    </Scenario>
+  );
+};

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" />

apps/public-docsite-v9/src/AccessibilityScenarios/Menu.stories.tsx

@@ -1,99 +1,72 @@
 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">
-      <Menu>
+      <h1>Test 1</h1>
+      <div>Single State Interaction (Unified Hover/Focus)</div>
+      <Menu positioning={{ autoSize: true }}>
         <MenuTrigger disableButtonEnhancement>
-          <MenuButton>Profile</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>

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';

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>;
 };

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' },
     ),

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',

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;
 };

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;
+  };