fix(react-headless-components-preview): use tab navigation in Nav instead of arrow keys - #36609
Merged
Dmytro Kirpa (dmytrokirpa) merged 2 commits intoAug 25, 2026
Conversation
…tead of arrow keys
|
Pull request demo site: URL |
…ole on Nav and NavDrawerBody
📊 Bundle size report
Unchanged fixtures
|
Victor Genaev (mainframev)
approved these changes
Aug 25, 2026
Dmytro Kirpa (dmytrokirpa)
merged commit Aug 25, 2026
4456170
into
microsoft:master
16 of 17 checks passed
Ray Knight (ArrayKnight)
added a commit
to ArrayKnight/fluentui
that referenced
this pull request
Aug 27, 2026
…nd Nav tab navigation Two upstream behaviour changes reach this package through the headless layer. POSITIONING (microsoft#36623). The headless `positioning` prop narrowed from `@fluentui/react-positioning`'s `PositioningShorthand` to a headless one built on the ten props `usePositioning` actually reads. `Combobox.tsx` and `Dropdown.tsx` each passed `autoSize: true` among the six values they restore from react-combobox's `useComboboxPositioning`, and the narrowing rejects it. `autoSize` was already dead weight: nothing in `hooks/usePositioning` reads it, so the key was being carried to a layer that ignored it. Removed from both call sites; the comments now say five values and record why the sixth is absent. No runtime behaviour moves, but the resulting Griffel delta was previously undocumented, so MIGRATION.md gains delta 46: a Combobox or Dropdown listbox is not shrunk to the space around its trigger the way floating-ui shrinks Griffel's. NAV (microsoft#36609). Headless `useNav` stopped stamping `focusgroup="toolbar block wrap"`, so Nav rows are now reached with Tab rather than the arrow keys. Parity follows headless — windmod passes the attribute through and has none of its own to remove. `Nav.test.tsx`'s headless-stamp assertion flips from asserting the value to asserting the attribute is absent, which is the assertion that now carries weight: it fails if our layer ever puts one back. MIGRATION.md's delta 15 loses Nav from the focusgroup list and gains the Tab-per-row consequence; Toolbar, TabList, TagGroup and SwatchPicker keep theirs, and this package ships no NavDrawerBody, the change's other half. Eight gates green: build (theme, headless, windmod), type-check, lint, lint:stories, type-check:stories, test 3285/3285 across 143 suites. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013wmpBCYJpDJCLXcScCWz1i
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Removes the
focusgrouparrow-key navigation fromNavandNavDrawerBodyin the headless preview package. Navigation items are now reachable with sequentialTabnavigation.useNavno longer setsfocusgroup="toolbar block wrap"; it still setsrole="navigation".useNavDrawerBodyno longer setsfocusgroup; it still setsrole="navigation".Navfrom the focusgroup browser-support notice in the stories.Nav links are natively focusable, so tab navigation matches the expected behavior of a list of links and removes the dependency on the focusgroup polyfill for this component. The
navigationlandmark role is preserved on both surfaces.Verification
yarn nx run react-headless-components-preview:test -t Navpasses.