From d8b5e15299ab66049d223381ee111464da60030a Mon Sep 17 00:00:00 2001 From: Kumar Kshitij Date: Thu, 9 May 2024 14:38:53 +0530 Subject: [PATCH 1/2] fix focus order issue in legends overflow callout --- .../react-charting/src/components/Legends/Legends.base.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react-charting/src/components/Legends/Legends.base.tsx b/packages/react-charting/src/components/Legends/Legends.base.tsx index ed42d3755508f..6ccbb97b52525 100644 --- a/packages/react-charting/src/components/Legends/Legends.base.tsx +++ b/packages/react-charting/src/components/Legends/Legends.base.tsx @@ -6,7 +6,7 @@ import { classNamesFunction, find, getNativeProps, buttonProperties } from '@flu import { ResizeGroup } from '@fluentui/react/lib/ResizeGroup'; import { IProcessedStyleSet } from '@fluentui/react/lib/Styling'; import { OverflowSet, IOverflowSetItemProps } from '@fluentui/react/lib/OverflowSet'; -import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus'; +import { FocusZone, FocusZoneDirection, FocusZoneTabbableElements } from '@fluentui/react-focus'; import { ILegend, ILegendsProps, @@ -234,6 +234,8 @@ export class LegendsBase extends React.Component { 'aria-multiselectable': canSelectMultipleLegends, })} direction={FocusZoneDirection.vertical} + handleTabKey={FocusZoneTabbableElements.all} + isCircularNavigation={true} {...this.props.focusZonePropsInHoverCard} className={classNames.hoverCardRoot} > From 090a2a4338668961a7d9cb0d42d98e8fd02ea945 Mon Sep 17 00:00:00 2001 From: Kumar Kshitij Date: Thu, 9 May 2024 14:41:38 +0530 Subject: [PATCH 2/2] add change file --- ...eact-charting-e105accc-fa3e-466e-8341-eca4d3a8ff6f.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-charting-e105accc-fa3e-466e-8341-eca4d3a8ff6f.json diff --git a/change/@fluentui-react-charting-e105accc-fa3e-466e-8341-eca4d3a8ff6f.json b/change/@fluentui-react-charting-e105accc-fa3e-466e-8341-eca4d3a8ff6f.json new file mode 100644 index 0000000000000..ff0bc4ac4f907 --- /dev/null +++ b/change/@fluentui-react-charting-e105accc-fa3e-466e-8341-eca4d3a8ff6f.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Fix focus order issue in legends overflow callout", + "packageName": "@fluentui/react-charting", + "email": "kumarkshitij@microsoft.com", + "dependentChangeType": "patch" +}