Update focus order in sankey chart for vertical navigation #31469
Conversation
This file contains 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
📊 Bundle size report✅ No changes found |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
fabricteam
reviewed
May 23, 2024
change/@fluentui-react-charting-53e6e8eb-6b93-49b1-8419-7701781c49a0.json
Show resolved
Hide resolved
AtishayMsft
reviewed
May 24, 2024
AtishayMsft
reviewed
May 27, 2024
packages/react-charting/src/components/SankeyChart/SankeyChart.base.tsx
Outdated
Show resolved
Hide resolved
AtishayMsft
reviewed
May 27, 2024
packages/react-charting/src/components/SankeyChart/SankeyChart.base.tsx
Outdated
Show resolved
Hide resolved
AtishayMsft
approved these changes
May 27, 2024
marcosmoura
added a commit
to marcosmoura/fluentui
that referenced
this pull request
May 28, 2024
* master: (49 commits) Update focus order in sankey chart for vertical navigation (microsoft#31469) chore: use new performant 'type-check' for v9 libaries (microsoft#31454) applying package updates fix(Timepicker-compat): clearIcon not working in freeform (microsoft#31324) chore: re-enable lint rule (microsoft#31459) feat(react-tag-picker): adds text property to TagPickerOption (microsoft#31474) feat(recipes): create package with initial implementation (moved from /apps) (microsoft#31386) applying package updates applying package updates chore: revert globals changes (microsoft#31470) (web-components) Use `ElementInternals` for TextInput elements (microsoft#31201) chore:(docs) Update and migrate component implementation guide (microsoft#31398) disallow all globals in Fluent v9 (microsoft#30967) chore:(react-nav-preview) Recomposing more components and some pixel pushing (microsoft#31387) fix(pr-deploy-site): explicitly set types to not include whole @types/* globals which are causing issues with addition of @types/web (microsoft#31465) fix(recipes-react-components): explicitly set types to not include whole @types/* globals which are cauising issues with addition of @types/web (microsoft#31463) applying package updates applying package updates applying package updates Update IconDirectionContextProvider import to import from specific path (microsoft#31006) ...
miroslavstastny
pushed a commit
to miroslavstastny/fluentui
that referenced
this pull request
Jun 14, 2024
…#31469) Co-authored-by: Shubhabrata Ghosh <shubhabrata08@gmail.com>
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.
Previous Behavior
The focus first moves through all the links and then the nodes, not following a logical sequence in the Sankey chart.
New Behavior
The focus moves layer by layer in a vertical order. It first moves through the nodes in the 1st layer, then the links starting from these 1st layer nodes, and continues this pattern through each subsequent layer.
In FocusZone, the focus order is determined by the rendering order of the elements. Although the new focus order may not be entirely logical, it seems to be the most effective solution with FocusZone ensuring that the links (especially skip layer links) do not render over the nodes.
Future Work
A more logical focus order in the Sankey chart would involve navigating focus horizontally, moving to the node first, then the connecting link, followed by the target node, and so on. This focus order needs to be implemented without altering the rendering order of nodes and links.