From cffc78a700c4f6c487184d7fc4404b6633867523 Mon Sep 17 00:00:00 2001 From: ksiler Date: Tue, 4 Mar 2025 11:52:57 -0800 Subject: [PATCH 1/6] Fix Menu tab navigation on win32 --- packages/components/Menu/src/MenuList/MenuList.tsx | 8 +++++++- yarn.lock | 4 ++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/components/Menu/src/MenuList/MenuList.tsx b/packages/components/Menu/src/MenuList/MenuList.tsx index 2e256b4339..76bc09d37e 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 should only navigate between menu groups. + const hasTabNavigation = Platform.OS === ('win32' as any) && hasMenuGroupChild; + const content = ( Date: Tue, 4 Mar 2025 11:53:20 -0800 Subject: [PATCH 2/6] Change files --- ...t-native-menu-b17320f8-20c5-4a54-970d-631cdc6f9288.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-native-menu-b17320f8-20c5-4a54-970d-631cdc6f9288.json 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" +} From 149dfe9afa0f9da18921539bab3b5c43d2dc658a Mon Sep 17 00:00:00 2001 From: ksiler Date: Tue, 4 Mar 2025 14:01:01 -0800 Subject: [PATCH 3/6] update comment --- packages/components/Menu/src/MenuList/MenuList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/Menu/src/MenuList/MenuList.tsx b/packages/components/Menu/src/MenuList/MenuList.tsx index 76bc09d37e..b3f66ced51 100644 --- a/packages/components/Menu/src/MenuList/MenuList.tsx +++ b/packages/components/Menu/src/MenuList/MenuList.tsx @@ -87,7 +87,7 @@ export const MenuList = compose({ (child) => child && (child as any).type && (child as any).type.displayName === 'MenuGroup', ); - // On win32, tab should only navigate between menu groups. + // On win32, tab navigation should only be enabled when we have menu groups. const hasTabNavigation = Platform.OS === ('win32' as any) && hasMenuGroupChild; const content = ( From fc54df757368ab030a9ae410f7d8f7e35181b092 Mon Sep 17 00:00:00 2001 From: ksiler Date: Tue, 4 Mar 2025 14:09:14 -0800 Subject: [PATCH 4/6] revert changes to yarn.lock --- yarn.lock | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/yarn.lock b/yarn.lock index d83aa93cb5..1fbcd3f3e5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5083,9 +5083,9 @@ __metadata: languageName: unknown linkType: soft -"@fluentui-react-native/text@npm:*, @fluentui-react-native/text@workspace:*, @fluentui-react-native/text@workspace:packages/components/text": +"@fluentui-react-native/text@npm:*, @fluentui-react-native/text@workspace:*, @fluentui-react-native/text@workspace:packages/components/Text": version: 0.0.0-use.local - resolution: "@fluentui-react-native/text@workspace:packages/components/text" + resolution: "@fluentui-react-native/text@workspace:packages/components/Text" dependencies: "@fluentui-react-native/adapters": "workspace:*" "@fluentui-react-native/eslint-config-rules": "workspace:*" From d5f2675d9af6209cd17b8bbe6a2f5bd6599e9720 Mon Sep 17 00:00:00 2001 From: ksiler Date: Tue, 4 Mar 2025 15:01:29 -0800 Subject: [PATCH 5/6] update E2E test for win32 --- apps/E2E/src/Menu/specs/Menu.spec.win.ts | 8 +-- .../src/TestComponents/Menu/E2EMenuTest.tsx | 67 ++++++++++--------- 2 files changed, 40 insertions(+), 35 deletions(-) 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 + + From 2df225428323456708ef44a63d97edb1b50b07e1 Mon Sep 17 00:00:00 2001 From: ksiler Date: Tue, 4 Mar 2025 15:14:47 -0800 Subject: [PATCH 6/6] Change files --- ...e-e2e-testing-32828e64-4b64-492f-81be-792e3251f3dc.json | 7 +++++++ ...native-tester-98ce1cf5-f9a2-4543-8967-482d23186b0e.json | 7 +++++++ 2 files changed, 14 insertions(+) create mode 100644 change/@fluentui-react-native-e2e-testing-32828e64-4b64-492f-81be-792e3251f3dc.json create mode 100644 change/@fluentui-react-native-tester-98ce1cf5-f9a2-4543-8967-482d23186b0e.json 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-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" +}