Repository navigation
MenuList: FocusZone not wired for react-native-windows ('windows'), so menu items are Tab-only (no arrow-key roving focus) #4174
Description
Willing to submit a PR to fix?
- I am willing to submit a PR to fix
Requested priority
Normal
Products/applications affected
Summary
@fluentui-react-native/menu's MenuList only wraps its content in a FocusZone on
macos and win32, not on windows (react-native-windows / Fabric). On windows
the focusZone slot falls back to a plain View, so menu items are reachable only via
Tab — Up/Down/Home/End arrow-key roving focus does not work. This is an accessibility
gap (keyboard + screen-reader users expect arrow-key navigation within a menu).
Location
packages/menu/src/MenuList/MenuList.tsx:
const shouldHaveFocusZone = ['macos', 'win32'].includes(Platform.OS as string);
// ...
slots: { ..., focusZone: shouldHaveFocusZone ? FocusZone : View }'windows' is not in the list.
Package version(s)
Package manager: yarn @fluentui-react-native/menu: 1.14.35 @fluentui-react-native/focus-zone: 0.21.11 (transitive, via @fluentui-react-native/menu) react-native-windows: 0.74.16 (New Architecture / Fabric, Platform.OS === 'windows') react-native: 0.74.5 react: 18.2.0
OS version(s)
No response
Platform
- iOS
- macOS
- win32
- windows
- android
Xcode version
No response
Please provide a reproduction of the bug
Reproduction
Environment: a react-native-windows (New Architecture / Fabric) app,
Platform.OS === 'windows'.
Minimal component:
import { Menu, MenuTrigger, MenuList, MenuItem } from '@fluentui-react-native/menu';
import { Button } from '@fluentui-react-native/button';
export const Repro = () => (
<Menu>
<MenuTrigger>
<Button>Open menu</Button>
</MenuTrigger>
<MenuList>
<MenuItem>Item 1</MenuItem>
<MenuItem>Item 2</MenuItem>
<MenuItem>Item 3</MenuItem>
</MenuList> </Menu>
);
Steps:
1. Run the app on windows (RNW / Fabric).
2. Open the menu and move keyboard focus onto the first MenuItem .
3. Press the Down arrow (also try Up / Home / End).
Expected: focus moves between menu items (Down → Item 2 → Item 3; Up reverses;
Home/End jump to first/last) — the arrow-key roving focus you get on win32 / macos .
Actual: arrow keys do nothing; items are reachable only by repeatedly pressing Tab.
On windows , MenuList renders its focusZone slot as a plain View
( shouldHaveFocusZone = ['macos','win32'] in packages/menu/src/MenuList/MenuList.tsx ),
so there is no container-level FocusZone to intercept the arrow keys.
Cross-check: the same code on win32 (or macos ) navigates correctly with arrows,
confirming the difference is the missing 'windows' FocusZone wiring, not the menu markup.
### Actual behavior
On windows , focusZone falls back to View ; menu items are Tab-only, arrows do nothing.
### Expected behavior
On windows (RNW/Fabric), MenuList provides container-level arrow-key roving focus
(Up/Down/Home/End), consistent with win32 / macos .
Activity