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)} > - - A plain MenuItem - - - A second disabled plain MenuItem - - - {MENUITEM_TEST_LABEL} - - - A fourth plain MenuItem - + + + A plain MenuItem + + + A second disabled plain MenuItem + + + + + + {MENUITEM_TEST_LABEL} + + + A fourth plain MenuItem + + 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 = (