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..cb92653e976bc7
--- /dev/null
+++ b/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 (
+
+ Test 4
+ Dual State Interaction (Independent Hover + Focus)
+
+
+
+ {options.map(option => (
+
+ ))}
+
+
+
+ );
+};
diff --git a/apps/public-docsite-v9/src/AccessibilityScenarios/ListOfScenarios.stories.mdx b/apps/public-docsite-v9/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
index e71f4feed04269..2606da903e4789 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
-
-
+## Component: Combobox (dual state)
+
+-
+
## Component: 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..53f0c93fde2985 100644
--- a/apps/public-docsite-v9/src/AccessibilityScenarios/Menu.stories.tsx
+++ b/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;
- onChange: OnCheckedValueChangeCallback;
-}
-
-const StatusSubmenu: React.FunctionComponent = props => {
- const { checkedValues, onChange } = props;
-
- return (
-
- );
-};
-
-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({ status: ['online'] });
- const onStatusChange = (
- event: React.MouseEvent | React.KeyboardEvent,
- { name, checkedItems }: OnCheckedValueChangeDataType,
- ) => {
- setStatusCheckedValues(state => ({ ...state, [name]: checkedItems }));
- };
-
return (
-