fix: restore TeachingPopover navigation and close focus - #36719
Open
Paul Mardling (PaulGMardling) wants to merge 2 commits into
Open
fix: restore TeachingPopover navigation and close focus#36719Paul Mardling (PaulGMardling) wants to merge 2 commits into
Paul Mardling (PaulGMardling) wants to merge 2 commits into
Conversation
Handle lost focus after headless popover closure and transfer carousel navigation focus when alternate content hides the active button. Related: https://dev.azure.com/microsoftdesign/fluent-ui/_workitems/edit/39652 Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
📊 Bundle size report
Unchanged fixtures
|
|
Pull request demo site: URL |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| @@ -0,0 +1,6 @@ | |||
| { | |||
There was a problem hiding this comment.
🕵🏾♀️ visual changes to review in the Visual Change Report
vr-tests-react-components/Menu Converged - submenuIndicator slotted content 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default - RTL.submenus open.chromium.png | 404 | Changed |
| vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default.submenus open.chromium.png | 413 | Changed |
vr-tests-react-components/Positioning 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Positioning.Positioning end.chromium.png | 10 | Changed |
| vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png | 139 | Changed |
vr-tests-react-components/ProgressBar converged 3 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - Dark Mode.default.chromium.png | 43 | Changed |
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png | 67 | Changed |
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness.default.chromium.png | 147 | Changed |
vr-tests-react-components/TagPicker 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/TagPicker.disabled - RTL.chromium.png | 635 | Changed |
| vr-tests-react-components/TagPicker.disabled.disabled input hover.chromium.png | 677 | Changed |
There were 2 duplicate changes discarded. Check the build logs for more information.
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Paul Mardling (PaulGMardling)
marked this pull request as ready for review
September 10, 2026 13:27
Paul Mardling (PaulGMardling)
requested review from
a team and
Mitch-At-Work
as code owners
September 10, 2026 13:27
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
1 participant
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.
Previous Behavior
Returning to the first carousel step with
previous.altText: nullcould leave focus on a hidden Previous button rather than moving to Next. Headless TeachingPopover also relied on native popover focus restoration: React-driven closure removes the surface before the native hide algorithm can restore focus. This particularly affects initially-open controlled tours and the final Got it action.New Behavior
usePopoverrestores trigger focus after a real open-to-closed transition when focus has fallen back to the document body. Initially closed mounts do not acquire focus, triggerless popovers are safe, and deliberate focus on an outside control is preserved.Validation: both affected packages build and type-check successfully; package lint passes (one pre-existing unrelated ToastTitle warning). Full package Jest run: 1,478 passing; final focused rerun: 365 passing. Chrome: 67 headless and 13 styled tests pass. Three pre-existing non-click hover/context focus tests remain skipped; their native interaction timing is outside this fix. API generation completed without report changes. Patch changefiles are included for both packages.
Two-part delivery and release dependency
This is part 1: component-owned upstream fixes. Part 2 is a separate 1JS integration draft that removes the Lesson workaround and adds consumer regression coverage; it must remain blocked until these fixes are actually published and consumed.
Current source versions are
@fluentui/react-headless-components-preview@0.2.5and@fluentui/react-teaching-popover@9.7.5. Headless already depends on the base teaching package through^9.7.5, which admits a future 9.x patch without a manual range change. However, an existing downstream lockfile may retain the old base package: integration must resolve both fixed packages, including the newly released headless package for close-focus restoration. This PR does not invent a release version or claim currently published packages contain these fixes.Related Issue(s)