BUG 8860200 Focus enabled to line chart events (#31406)

microsoft · May 17, 2024 · e69f90d · e69f90d
1 parent 80b76eb
commit e69f90d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/change/@fluentui-react-charting-bddcfca4-84d0-4944-a0d4-453c827779c6.json b/change/@fluentui-react-charting-bddcfca4-84d0-4944-a0d4-453c827779c6.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Focus enabled to line chart events",
+  "packageName": "@fluentui/react-charting",
+  "email": "132879294+v-baambati@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-charting/src/components/LineChart/eventAnnotation/LabelLink.tsx b/packages/react-charting/src/components/LineChart/eventAnnotation/LabelLink.tsx
@@ -49,6 +49,8 @@ export const LabelLink: React.FunctionComponent<ILabelLinkProps> = props => {
           <FocusZone isCircularNavigation={true} direction={FocusZoneDirection.vertical}>
             <List<() => React.ReactNode>
               items={cards}
+              role="alert"
+              aria-roledescription=" "
               // eslint-disable-next-line react/jsx-no-bind
               onRenderCell={onRenderCell}
             />
@@ -71,7 +73,7 @@ export const LabelLink: React.FunctionComponent<ILabelLinkProps> = props => {
 
   return (
     <>
-      <g ref={gRef} onClick={onClick} data-is-focusable={false} style={{ cursor: 'pointer' }}>
+      <g ref={gRef} onClick={onClick} data-is-focusable={true} style={{ cursor: 'pointer' }}>
         <Textbox
           text={text}
           x={props.labelDef.x}