Update focus order in sankey chart for vertical navigation

change/@fluentui-react-charting-53e6e8eb-6b93-49b1-8419-7701781c49a0.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Update focus order in sankey chart for vertical navigation",
+  "packageName": "@fluentui/react-charting",
+  "email": "kumarkshitij@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-charting/src/components/SankeyChart/SankeyChart.base.tsx

@@ -759,6 +759,41 @@ export class SankeyChartBase extends React.Component<ISankeyChartProps, ISankeyC
         borderColorsForNodes,
       );
 
+      const nodeLinkDomOrderArray: { layer: number; type: string; index: number }[] = [];
+      nodes.sort((a: SNode, b: SNode) => {
+        if (a.x0 !== b.x0) {
+          return a.x0! - b.x0!;
+        }
+        return a.y0! - b.y0!;
+      });
+      nodes.forEach((item: SNode, index) => {
+        nodeLinkDomOrderArray.push({ layer: item.layer!, type: 'node', index: index });
+      });
+      links.sort((a: SLink, b: SLink) => {
+        const asx0 = (a.source as SNode).x0;
+        const bsx0 = (b.source as SNode).x0;
+        if (asx0 !== bsx0) {
+          return asx0! - bsx0!;
+        }
+        return a.y0! - b.y0!;
+      });
+      links.forEach((item: SLink, index) => {
+        nodeLinkDomOrderArray.push({ layer: (item.source as SNode).layer!, type: 'link', index: index });
+      });
+      nodeLinkDomOrderArray.sort((a, b) => {
+        if (a.layer !== b.layer) {
+          return a.layer - b.layer;
+        }
+
+        if (a.type > b.type) {
+          return -1;
+        }
+        if (a.type < b.type) {
+          return 1;
+        }
+        return 0;
+      });
+
       // NOTE: I don't love this approach to caching the "select" result. Is it still valid from render-to-render?
       // although local testing seems to indicate so, I do not trust that React will always support that instance.
       // It might be better to perform this `fetch` within the `_showTooltip` and `_hideTooltip` methods.
@@ -792,12 +827,27 @@ export class SankeyChartBase extends React.Component<ISankeyChartProps, ISankeyC
           ref={(rootElem: HTMLDivElement) => (this.chartContainer = rootElem)}
           onMouseLeave={this._onCloseCallout}
         >
-          <FocusZone direction={FocusZoneDirection.bidirectional}>
+          <FocusZone direction={FocusZoneDirection.vertical}>
             <svg width={width} height={height} id={this._chartId}>
-              <g className={classNames.links} strokeOpacity={1}>
-                {linkData}
-              </g>
-              <g className={classNames.nodes}>{nodeData}</g>
+              {nodeLinkDomOrderArray.map(item => {
+                if (item.type === 'node') {
+                  return (
+                    <g key={nodes[item.index].nodeId} className={classNames.nodes}>
+                      {nodeData![item.index]}
+                    </g>
+                  );
+                }
+
+                return (
+                  <g
+                    key={`${(links[item.index].source as SNode).nodeId}-${(links[item.index].target as SNode).nodeId}`}
+                    className={classNames.links}
+                    strokeOpacity={1}
+                  >
+                    {linkData![item.index]}
+                  </g>
+                );
+              })}
               {calloutProps.isCalloutVisible && (
                 <Callout {...calloutProps}>
                   <ChartHoverCard