diff --git a/apps/E2E/src/Menu/specs/Menu.spec.win.ts b/apps/E2E/src/Menu/specs/Menu.spec.win.ts
index 8bbb4b807c..8e472fdd67 100644
--- a/apps/E2E/src/Menu/specs/Menu.spec.win.ts
+++ b/apps/E2E/src/Menu/specs/Menu.spec.win.ts
@@ -160,15 +160,15 @@ describe('Menu Functional Testing', () => {
.toBeFalsy();
});
- it('Press "Tab" to navigate between MenuItems. Validate that focus switches correctly between MenuItems.', async () => {
+ it('Press "Tab" to navigate between MenuGroups. Validate that focus switches correctly between MenuGroups.', async () => {
await MenuPageObject.openMenu();
- await MenuPageObject.sendKeys(MenuPageObject.getMenuItem('Third'), [Keys.TAB]);
+ await MenuPageObject.sendKeys(MenuPageObject.getMenuItem('First'), [Keys.TAB]);
expect(
- await MenuPageObject.compareAttribute(MenuPageObject.getMenuItem('Fourth'), Attribute.IsFocused, AttributeValue.true),
+ await MenuPageObject.compareAttribute(MenuPageObject.getMenuItem('Third'), Attribute.IsFocused, AttributeValue.true),
).toBeTruthy();
- await MenuPageObject.sendKeys(MenuPageObject.getMenuItem('Fourth'), [Keys.TAB]);
+ await MenuPageObject.sendKeys(MenuPageObject.getMenuItem('Third'), [Keys.TAB]);
expect(
await MenuPageObject.compareAttribute(MenuPageObject.getMenuItem('First'), Attribute.IsFocused, AttributeValue.true),
).toBeTruthy();
diff --git a/apps/fluent-tester/src/TestComponents/Menu/E2EMenuTest.tsx b/apps/fluent-tester/src/TestComponents/Menu/E2EMenuTest.tsx
index 6cd87ca1a0..6f7794709e 100644
--- a/apps/fluent-tester/src/TestComponents/Menu/E2EMenuTest.tsx
+++ b/apps/fluent-tester/src/TestComponents/Menu/E2EMenuTest.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { View } from 'react-native';
import { ButtonV1 as Button } from '@fluentui-react-native/button';
-import { Menu, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui-react-native/menu';
+import { Menu, MenuDivider, MenuGroup, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui-react-native/menu';
import { Stack } from '@fluentui-react-native/stack';
import { TextV1 as Text } from '@fluentui-react-native/text';
@@ -76,36 +76,41 @@ export const E2EMenuTest: React.FunctionComponent = () => {
{...testProps(MENUPOPOVER_TEST_COMPONENT)}
>
-
-
-
-
+
+
+
+
+
+
+
+
+
diff --git a/change/@fluentui-react-native-e2e-testing-32828e64-4b64-492f-81be-792e3251f3dc.json b/change/@fluentui-react-native-e2e-testing-32828e64-4b64-492f-81be-792e3251f3dc.json
new file mode 100644
index 0000000000..22993229a8
--- /dev/null
+++ b/change/@fluentui-react-native-e2e-testing-32828e64-4b64-492f-81be-792e3251f3dc.json
@@ -0,0 +1,7 @@
+{
+ "type": "patch",
+ "comment": "update E2E test for win32",
+ "packageName": "@fluentui-react-native/e2e-testing",
+ "email": "krsiler@microsoft.com",
+ "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-native-menu-b17320f8-20c5-4a54-970d-631cdc6f9288.json b/change/@fluentui-react-native-menu-b17320f8-20c5-4a54-970d-631cdc6f9288.json
new file mode 100644
index 0000000000..8e6f406bde
--- /dev/null
+++ b/change/@fluentui-react-native-menu-b17320f8-20c5-4a54-970d-631cdc6f9288.json
@@ -0,0 +1,7 @@
+{
+ "type": "patch",
+ "comment": "Fix Menu tab navigation on win32",
+ "packageName": "@fluentui-react-native/menu",
+ "email": "krsiler@microsoft.com",
+ "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-native-tester-98ce1cf5-f9a2-4543-8967-482d23186b0e.json b/change/@fluentui-react-native-tester-98ce1cf5-f9a2-4543-8967-482d23186b0e.json
new file mode 100644
index 0000000000..365fbbb5a5
--- /dev/null
+++ b/change/@fluentui-react-native-tester-98ce1cf5-f9a2-4543-8967-482d23186b0e.json
@@ -0,0 +1,7 @@
+{
+ "type": "patch",
+ "comment": "update E2E test for win32",
+ "packageName": "@fluentui-react-native/tester",
+ "email": "krsiler@microsoft.com",
+ "dependentChangeType": "patch"
+}
diff --git a/packages/components/Menu/src/MenuList/MenuList.tsx b/packages/components/Menu/src/MenuList/MenuList.tsx
index 2e256b4339..b3f66ced51 100644
--- a/packages/components/Menu/src/MenuList/MenuList.tsx
+++ b/packages/components/Menu/src/MenuList/MenuList.tsx
@@ -37,7 +37,6 @@ MenuStack.displayName = 'MenuStack';
const shouldHaveFocusZone = ['macos', 'win32'].includes(Platform.OS as string);
const focusLandsOnContainer = Platform.OS === 'macos';
const hasCircularNavigation = Platform.OS === ('win32' as any);
-const hasTabNavigation = Platform.OS === ('win32' as any);
export const menuListLookup = (layer: string, state: MenuListState, userProps: MenuListProps): boolean => {
return state[layer] || userProps[layer] || layer === 'hasMaxHeight';
@@ -84,6 +83,13 @@ export const MenuList = compose({
const shouldHaveScrollView = Platform.OS === 'macos' || menuList.hasMaxHeight || menuList.hasMaxWidth;
const ScrollViewWrapper = shouldHaveScrollView ? Slots.scrollView : React.Fragment;
+ const hasMenuGroupChild = React.Children.toArray(children).some(
+ (child) => child && (child as any).type && (child as any).type.displayName === 'MenuGroup',
+ );
+
+ // On win32, tab navigation should only be enabled when we have menu groups.
+ const hasTabNavigation = Platform.OS === ('win32' as any) && hasMenuGroupChild;
+
const content = (