[WIP] fix: keyboard navigation not working for FluentNavLink inside a FluentNavGroup #3998
Conversation
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
Co-authored-by: vnbaaij <[email protected]>
Co-authored-by: vnbaaij <[email protected]>
Copilot stopped work on behalf of
vnbaaij due to an error
July 10, 2025 13:47
vnbaaij
requested changes
Jul 10, 2025
Collaborator
vnbaaij
left a comment
vnbaaij
left a comment
There was a problem hiding this comment.
The HandleNavLinkKeyDownAsync should not just handle the 'Enter' case. It should trigger the same action when 'Space' is pressed
Co-authored-by: vnbaaij <[email protected]>
Contributor
Author
Added Space key support to HandleNavLinkKeyDownAsync. Now both Enter and Space keys trigger navigation for better accessibility compliance. Changes committed in 698603e. Warning Firewall rules blocked me from connecting to one or more addressesI tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
Copilot finished work on behalf of
vnbaaij
July 10, 2025 14:50
Collaborator
|
@copilot onlt thing missing is that the Id parameter needs to be generated in the FluentNavLink constructor |
Co-authored-by: vnbaaij <[email protected]>
Contributor
Author
Added Id generation in FluentNavLink constructor using Identifier.NewId() to ensure proper keyboard handling anchors. Changes committed in 60df235. Warning Firewall rules blocked me from connecting to one or more addressesI tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
vnbaaij
approved these changes
Jul 10, 2025
dvoituron
approved these changes
Jul 12, 2025
|
✅ All tests passed successfully Details on your Workflow / Core Tests page. |
Summary - Unit Tests Code CoverageSummary
CoverageMicrosoft.FluentUI.AspNetCore.Components - 60.5%
|
dvoituron
approved these changes
Jul 14, 2025
dvoituron
approved these changes
Jul 14, 2025
This was referenced Jul 22, 2025
This was referenced Jul 30, 2025
Closed
This was referenced Oct 13, 2025
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Fix: Keyboard navigation not working for FluentNavLink inside a FluentNavGroup
Problem Analysis
StopPropagation="@true"andPreventDefaultOnly="new[] { KeyCode.Enter, KeyCode.Left, KeyCode.Right }"Solution Implementation
Changes Made
FluentNavLink.razor: Added FluentKeyCode component that:
Hrefand anOwner(indicating it's inside a NavGroup){Id}-navlink)StopPropagation="@true"andPreventDefault="@true"FluentNavLink.razor.cs: Added
HandleNavLinkKeyDownAsyncmethod that:OnClickHandlerAsyncmethod to trigger navigationMicrosoft.AspNetCore.Components.WebTest Updates: Added test cases to verify the keyboard handling is correctly applied
How It Works
Fixes #3996.
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.