microsoft / microsoft/fluentui

[Sankey chart-SankeyChart inbox]: Keyboard focus order is not logically sequential during navigation in Sankey Chart

Open
#31,080 7 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Package: charting Resolution: Soft Close
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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.