Allow focus navigation with tab key in donut chart (#25654)

* allow focus navigation with tab key in donut chart * add change file
microsoft · Nov 17, 2022 · 50ee718 · 50ee718
1 parent 0cc13a6
commit 50ee718
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/change/@fluentui-react-charting-ccfd96da-8e65-4550-b18b-3c45ca241de3.json b/change/@fluentui-react-charting-ccfd96da-8e65-4550-b18b-3c45ca241de3.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Allow focus navigation with tab key in donut chart",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-charting/src/components/DonutChart/DonutChart.base.tsx b/packages/react-charting/src/components/DonutChart/DonutChart.base.tsx
@@ -3,7 +3,7 @@ import { classNamesFunction, getId } from '@fluentui/react/lib/Utilities';
 import * as scale from 'd3-scale';
 import { IProcessedStyleSet, IPalette } from '@fluentui/react/lib/Styling';
 import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';
-import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';
+import { FocusZone, FocusZoneDirection, FocusZoneTabbableElements } from '@fluentui/react-focus';
 import { IAccessibilityProps, ChartHoverCard, ILegend, Legends } from '../../index';
 import { Pie } from './Pie/index';
 import { IChartDataPoint, IChartProps, IDonutChartProps, IDonutChartStyleProps, IDonutChartStyles } from './index';
@@ -104,7 +104,7 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
         ref={(rootElem: HTMLElement | null) => (this._rootElem = rootElem)}
         onMouseLeave={this._handleChartMouseLeave}
       >
-        <FocusZone direction={FocusZoneDirection.horizontal} isCircularNavigation={true}>
+        <FocusZone direction={FocusZoneDirection.horizontal} handleTabKey={FocusZoneTabbableElements.all}>
           <div>
             <svg
               className={this._classNames.chart}