[Popover] Allow tabbing inside open anchored regions, support keyboard accessible navigation for popover - #4561
Merged
vnbaaij merged 2 commits intoFeb 24, 2026
Conversation
…le navigation for popover
vnbaaij
approved these changes
Feb 24, 2026
This was referenced Apr 22, 2026
Closed
Merged
Merged
This was referenced Apr 30, 2026
Closed
This was referenced May 25, 2026
This was referenced Jun 7, 2026
Closed
Closed
dkurepa
added a commit
to dotnet/arcade-services
that referenced
this pull request
Jul 15, 2026
…AspNetCore.Components.Icons (#6497) Updated [Microsoft.FluentUI.AspNetCore.Components](https://github.com/microsoft/fluentui-blazor) from 4.14.0 to 4.14.2. <details> <summary>Release notes</summary> _Sourced from [Microsoft.FluentUI.AspNetCore.Components's releases](https://github.com/microsoft/fluentui-blazor/releases)._ ## 4.14.2 ## What's Changed * [Select] Fix selected items color by @MarvinKlein1508 in microsoft/fluentui-blazor#4760 * [DesignTheme] Tolerate blocked localStorage during startup by @Copilot in microsoft/fluentui-blazor#4857 * [Chore] Prep for release and update icons by @vnbaaij in microsoft/fluentui-blazor#4869 **Full Changelog**: microsoft/fluentui-blazor@v4.14.1...v4.14.2 ## 4.14.1 ## What's Changed * Merge changes from Main by @vnbaaij in microsoft/fluentui-blazor#4516 * [AppBar] Make OnClick close popover by @vnbaaij in microsoft/fluentui-blazor#4518 * [Docs] Update keycode docs to reflect latest interface by @MarvinKlein1508 in microsoft/fluentui-blazor#4522 * Fix index.ts section causing "Illegal constructor" on older iOS devices by @GusPietrasanta-Polygon in microsoft/fluentui-blazor#4531 * [Docs] Add note about render mode and required interactivity by @MarvinKlein1508 in microsoft/fluentui-blazor#4540 * [Tabs] Call HandleOnTabChange when changing to a tab through the menu by @vnbaaij in microsoft/fluentui-blazor#4564 * [Popover] Allow tabbing inside open anchored regions, support keyboard accessible navigation for popover by @adamint in microsoft/fluentui-blazor#4561 * [DataGrid] Add OnSortChanged event callback by @vnbaaij in microsoft/fluentui-blazor#4573 * [Templates] Fix 404 in WebAssembly temp by @vnbaaij in microsoft/fluentui-blazor#4578 * Bump minimatch from 3.1.2 to 3.1.5 in /src/Core.Assets by @dependabot[bot] in microsoft/fluentui-blazor#4586 * fix: rename `dateselected` custom event to `fluentdateselected` to resolve .NET 11 exception by @Copilot in microsoft/fluentui-blazor#4605 * fix: rename custom events matching browserEventName to use fluent prefix by @Copilot in microsoft/fluentui-blazor#4609 * [General] Add accent-color in reboot.css by @wherewhere in microsoft/fluentui-blazor#4614 * [Dialog] Update docs by @vnbaaij in microsoft/fluentui-blazor#4625 * [DataGrid] Fix SelectedItems getting unselected when using pagination (and virtualization) by @vnbaaij in microsoft/fluentui-blazor#4623 * Bump flatted from 3.3.1 to 3.4.2 in /src/Core.Assets by @dependabot[bot] in microsoft/fluentui-blazor#4638 * [Docs] Fix incorrect Icon in search after Navigation by @sebbogle in microsoft/fluentui-blazor#4641 * [SplashScreen] Mark sync methods as Obsolete by @MarvinKlein1508 in microsoft/fluentui-blazor#4644 * Bump picomatch from 2.3.1 to 2.3.2 in /src/Core.Assets by @dependabot[bot] in microsoft/fluentui-blazor#4646 * [NavGroup] Fix disabled state for top-level `FluentNavGroup` by @MarvinKlein1508 in microsoft/fluentui-blazor#4647 * [NavGroup] Apply font opacity instead of color by @MarvinKlein1508 in microsoft/fluentui-blazor#4648 * Rollup PRs #4677 and and #4678 by @vnbaaij in microsoft/fluentui-blazor#4680 ## New Contributors * @GusPietrasanta-Polygon made their first contribution in microsoft/fluentui-blazor#4531 * @sebbogle made their first contribution in microsoft/fluentui-blazor#4641 **Full Changelog**: microsoft/fluentui-blazor@v4.14.0...v4.14.1 Commits viewable in [compare view](microsoft/fluentui-blazor@v4.14.0...v4.14.2). </details> Updated [Microsoft.FluentUI.AspNetCore.Components.Icons](https://github.com/microsoft/fluentui-blazor) from 4.14.2 to 4.14.3. <details> <summary>Release notes</summary> _Sourced from [Microsoft.FluentUI.AspNetCore.Components.Icons's releases](https://github.com/microsoft/fluentui-blazor/releases)._ ## 4.14.3 ## What's Changed * [Chore] Publish symbols from CI builds to internal symbol server by @tlmii in microsoft/fluentui-blazor#4910 * [Chore] Update dependencies in package.json by @dvoituron in microsoft/fluentui-blazor#4946 * [Docs] Update link to v5 docs by @MarvinKlein1508 in microsoft/fluentui-blazor#4927 * Update icons and prep for release by @vnbaaij in microsoft/fluentui-blazor#4958 **Full Changelog**: microsoft/fluentui-blazor@v4.14.2...v4.14.3 Commits viewable in [compare view](microsoft/fluentui-blazor@v4.14.2...v4.14.3). </details> Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) --- <details> <summary>Dependabot commands and options</summary> <br /> You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot show <dependency name> ignore conditions` will show all of the ignore conditions of the specified dependency - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) </details> --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Djuradj Kurepa <dkurepa@microsoft.com>
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.
Pull Request
📖 Description
Investigating the previous fix for menu buttons, I noticed that I forgot to support tabbing inside the anchored region. Previously, the first tab inside the region would close the popover and focus the next element on the page. Changed behavior to tabbing working until tabbing the last focusable element inside the popover (which will close the popover and focus the next page element).
Additionally, as mentioned in the linked issue, popovers were not keyboard accessible. The keyboard access patterns are identical for both the popover and menubutton components, so I moved the common logic to
FluentAnchoredRegion.razor.js, and updated theFluentPopovercomponent to support its use.🎫 Issues
Fixes #4127
👩💻 Reviewer Notes
You can manually test this by interacting with elements on /Popover and /MenuButton pages in the demo server. Click on the element just prior to the component you want to test, then tab.
📑 Test Plan
✅ Checklist
General
Component-specific
⏭ Next Steps