fix(react-charts): fix accessibility bugs (#34609)

Co-authored-by: Anush <anushgupta@microsoft.com>

Author: Anush2303

change/@fluentui-react-charts-57b808bd-6961-42ab-9ea2-ba7357370cd4.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix accessibility bugs",
+  "packageName": "@fluentui/react-charts",
+  "email": "anushgupta@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.tsx

@@ -630,9 +630,7 @@ export const CartesianChart: React.FunctionComponent<ModifiedCartesianChartProps
               content={props.yAxisTitle}
               textProps={{
                 x: (yAxisTitleMaximumAllowedHeight - margins.bottom!) / 2 + removalValueForTextTuncate!,
-                y: _useRtl
-                  ? svgDimensions.width - margins.right! / 2 + titleMargin
-                  : margins.left! / 2 + startFromX - titleMargin,
+                y: _useRtl ? svgDimensions.width - margins.right! / 2 + titleMargin : margins.left! / 2 - titleMargin,
                 textAnchor: 'middle',
                 transform: `translate(0,
                  ${svgDimensions.height - margins.bottom! - margins.top! - titleMargin})rotate(-90)`,

packages/charts/react-charts/library/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.tsx

@@ -419,7 +419,7 @@ export const GroupedVerticalBarChart: React.FC<GroupedVerticalBarChartProps> = R
               onBlur={_onBarLeave}
               onClick={pointData.onClick}
               aria-label={getAriaLabel(pointData, singleSet.xAxisPoint)}
-              tabIndex={pointData.legend !== '' ? 0 : undefined}
+              tabIndex={_legendHighlighted(pointData.legend) || _noLegendHighlighted() ? 0 : undefined}
               role="img"
             />
           </React.Fragment>,

packages/charts/react-charts/library/src/components/LineChart/LineChart.tsx

@@ -456,7 +456,7 @@ export const LineChart: React.FunctionComponent<LineChartProps> = React.forwardR
               cy={_yAxisScale(y1)}
               fill={activePoint === circleId ? tokens.colorNeutralBackground1 : lineColor}
               opacity={isLegendSelected ? 1 : 0.1}
-              tabIndex={_points[i].legend !== '' ? 0 : undefined}
+              tabIndex={isLegendSelected ? 0 : undefined}
               onMouseOver={(event: React.MouseEvent<SVGElement>) =>
                 _handleHover(
                   x1,
@@ -558,7 +558,7 @@ export const LineChart: React.FunctionComponent<LineChartProps> = React.forwardR
                 onMouseOut={_handleMouseOut}
                 {..._getClickHandler(_points[i].onLineClick)}
                 opacity={1}
-                tabIndex={_points[i].legend !== '' ? 0 : undefined}
+                tabIndex={isLegendSelected ? 0 : undefined}
               />,
             );
           } else {
@@ -654,7 +654,7 @@ export const LineChart: React.FunctionComponent<LineChartProps> = React.forwardR
                 strokeWidth={strokeWidth}
                 role="img"
                 aria-label={_getAriaLabel(i, j - 1)}
-                tabIndex={_points[i].legend !== '' ? 0 : undefined}
+                tabIndex={isLegendSelected ? 0 : undefined}
               />,
             );
             if (j + 1 === _points[i].data.length) {
@@ -708,7 +708,7 @@ export const LineChart: React.FunctionComponent<LineChartProps> = React.forwardR
                     strokeWidth={strokeWidth}
                     role="img"
                     aria-label={_getAriaLabel(i, j)}
-                    tabIndex={_points[i].legend !== '' ? 0 : undefined}
+                    tabIndex={isLegendSelected ? 0 : undefined}
                   />
                   {/* Dummy circle acting as magnetic latch for last callout point */}
                   <circle

packages/charts/react-charts/library/src/components/ScatterChart/ScatterChart.tsx

@@ -331,7 +331,7 @@ export const ScatterChart: React.FunctionComponent<ScatterChartProps> = React.fo
             stroke={seriesColor}
             role="img"
             aria-label={_getAriaLabel(i, j)}
-            tabIndex={_points[i].legend !== '' ? 0 : undefined}
+            tabIndex={isLegendSelected ? 0 : undefined}
           />,
         );
       }

packages/charts/react-charts/library/src/components/Sparkline/useSparklineStyles.styles.ts

@@ -2,7 +2,6 @@ import { makeStyles, mergeClasses } from '@griffel/react';
 import { SparklineProps, SparklineStyles } from './Sparkline.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
-import { HighContrastSelector } from '../../utilities/index';
 
 /**
  * @internal
@@ -22,11 +21,7 @@ const useStyles = makeStyles({
   valueText: {
     ...typographyStyles.caption1,
     fill: tokens.colorNeutralForeground1,
-    [HighContrastSelector]: {
-      opacity: 0.1,
-      stroke: 'rgb(179, 179, 179)',
-      forcedColorAdjust: 'none',
-    },
+    forcedColorAdjust: 'auto',
   },
 });
 

packages/charts/react-charts/library/src/utilities/SVGTooltipText.tsx

@@ -6,7 +6,6 @@ import { Async } from './async-utils';
 import { KeyCodes } from './KeyCodes';
 import { useId } from '@fluentui/react-utilities';
 import { tokens } from '@fluentui/react-theme';
-import { useRtl } from './utilities';
 
 interface SVGTooltipTextProps {
   closeDelay?: number;
@@ -28,8 +27,6 @@ export const SVGTooltipText: React.FunctionComponent<SVGTooltipTextProps> = Reac
 >((props, forwardedRef) => {
   const [isTooltipVisible, setIsTooltipVisible] = useState(false);
   const [isOverflowing, setIsOverflowing] = useState(false);
-  const [textX, setTextX] = useState(0);
-  const [textY, setTextY] = useState(0);
   const [textWidth, setTextWidth] = useState(0);
   const [textHeight, setTextHeight] = useState(0);
 
@@ -58,8 +55,6 @@ export const SVGTooltipText: React.FunctionComponent<SVGTooltipTextProps> = Reac
   const measureText = useCallback((): void => {
     if (tooltipHostRef.current && typeof tooltipHostRef.current.getBBox === 'function') {
       const bbox = tooltipHostRef.current.getBBox();
-      setTextX(bbox.x);
-      setTextY(bbox.y);
       setTextWidth(bbox.width);
       setTextHeight(bbox.height);
     }
@@ -168,15 +163,15 @@ export const SVGTooltipText: React.FunctionComponent<SVGTooltipTextProps> = Reac
     (props.isTooltipVisibleProp && isOverflowing && !!props.content) || (isTooltipVisible && !!props.content);
 
   const backgroundColor = tokens.colorNeutralBackground1;
-  const isRTL = useRtl();
-  const rectX = isRTL ? (textX ?? 0) + (textWidth ?? 0) - PADDING : (textX ?? 0) - PADDING;
+  const rectX = (typeof props.textProps?.x === 'number' ? props.textProps.x : 0) - (textWidth ?? 0) / 2 - PADDING;
+  const rectY = (typeof props.textProps?.y === 'number' ? props.textProps.y : 0) - (textHeight ?? 0) / 2 - PADDING;
 
   return (
     <>
       {props.showBackground && (
         <rect
           x={rectX}
-          y={(textY ?? 0) - PADDING}
+          y={rectY}
           width={(textWidth ?? 0) + 2 * PADDING}
           height={(textHeight ?? 0) + 2 * PADDING}
           fill={backgroundColor}