AtishayMsft
commented
4 months ago Currently all links are shown in navigation order after all the nodes, this gives an incomplete understanding of the data to the user. We need to modify the tab order so that user can navigate through 1 column of nodes, then through 1 column of links and so on.
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.