microsoft / microsoft/fluentui
[Sankey chart-SankeyChart inbox]: Keyboard focus order is not logically sequential during navigation in Sankey Chart
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 20.3k
- Forks
- 2.9k
- Avg merge
- 2d 9h
- Merged PRs (30d)
- 46
Description
Test Environment:
OS Build: Windows 11
Version: 24H2 (OS Build 26058.1400)
Browser: Edge-Dev
URL: Fluent UI - Controls - React - SankeyChart (microsoft.com)
Browser Version: 123.0.2420.10 (Official build) dev (64-bit)
Pre-requisites:
Navigate using keyboard only.
Repro Steps:
Open the above-mentioned URL in edge-dev browser.
'Sankey chart' page opens.
Navigate to 'Sankeychart' under the 'SankeyChart inbox' section using tab key/ arrow keys.
Observe the issue.
Actual Result:
When navigating using the tab key, focus shifts to all nodes simultaneously, and subsequently, all link connections become navigable at once. This navigation pattern does not follow a logical sequence and may confuse users.
Observation:
Same issue reproduces when user navigates using arrow keys.
Expected Result:
The focus order should follow a logical sequence under the Sankey chart. When navigating using the tab key, the first node (e.g., '192.168.42.72, 80') should receive focus, and subsequent nodes and link connections should be accessible using the right/left and up/down arrow keys.
The flow of navigation should progress horizontally using the right/left arrow keys and vertically using the up/down arrow keys.
User Impact:
The current illogical focus order impedes keyboard and screen reader users's ability to navigate the Sankey chart efficiently, leading to confusion and frustration. Users may experience difficulty in understanding the data and relationships depicted in the chart, leading to frustration and inefficiency in interaction.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the SankeyChart page linked in the issue and reproduce the behavior using only Tab and arrow keys in Edge. Trace the SankeyChart component and its keyboard navigation entry point, then verify that focus begins on the first node, moves horizontally and vertically in the stated directions, and exposes links in a logical sequence.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100