Skip to content

Commit 11432bd

Browse files
Anush2303Anush
Anush2303
and
Anush
authored
fix(react-charts): fix a11y bugs (microsoft#35127)
Co-authored-by: Anush <[email protected]>
1 parent 84750b3 commit 11432bd

File tree

6 files changed

+30
-13
lines changed

6 files changed

+30
-13
lines changed

‎change/@fluentui-react-charts-190ba090-4c75-4d1a-861f-de991afa4462.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "patch",
3+
"comment": "fix a11y bugs",
4+
"packageName": "@fluentui/react-charts",
5+
"email": "[email protected]",
6+
"dependentChangeType": "patch"
7+
}

‎packages/charts/react-charts/library/src/components/ChartTable/ChartTable.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ export const ChartTable: React.FunctionComponent<ChartTableProps> = React.forwar
126126
style.backgroundColor = getSafeBackgroundColor(fg, bg);
127127
}
128128
return (
129-
<th key={idx} className={classes.headerCell} style={style}>
129+
<th key={idx} className={classes.headerCell} style={style} tabIndex={0}>
130130
{header.value}
131131
</th>
132132
);
@@ -145,7 +145,7 @@ export const ChartTable: React.FunctionComponent<ChartTableProps> = React.forwar
145145
style.backgroundColor = getSafeBackgroundColor(fg, bg);
146146
}
147147
return (
148-
<td key={colIdx} className={classes.bodyCell} style={style}>
148+
<td key={colIdx} className={classes.bodyCell} style={style} tabIndex={0}>
149149
{cell.value}
150150
</td>
151151
);

‎packages/charts/react-charts/library/src/components/GaugeChart/GaugeChart.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -679,8 +679,7 @@ export const GaugeChart: React.FunctionComponent<GaugeChartProps> = React.forwar
679679
onMouseEnter={e => _handleMouseOver(e, segment.legend)}
680680
onMouseLeave={e => _handleCalloutDismiss()}
681681
onMouseMove={e => _handleMouseOver(e, segment.legend)}
682-
data-is-focusable={_legendHighlighted(segment.legend) || _noLegendHighlighted()}
683-
tabIndex={segment.legend !== '' ? 0 : undefined}
682+
tabIndex={_legendHighlighted(segment.legend) || _noLegendHighlighted() ? 0 : undefined}
684683
/>
685684
</React.Fragment>
686685
);

‎packages/charts/react-charts/library/src/components/GaugeChart/__snapshots__/GaugeChart.test.tsx.snap‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -341,23 +341,21 @@ exports[`Gauge chart - Subcomponent Legend Should reduce the opacity of the othe
341341
aria-label="Medium Risk, 33 to 67"
342342
class="fui-gc__segment"
343343
d="M0,0Z"
344-
data-is-focusable="false"
344+
data-is-focusable="true"
345345
fill="#f7630c"
346346
opacity="0.1"
347347
role="img"
348348
stroke-width="0"
349-
tabindex="0"
350349
/>
351350
<path
352351
aria-label="High Risk, 67 to 100"
353352
class="fui-gc__segment"
354353
d="M0,0Z"
355-
data-is-focusable="false"
354+
data-is-focusable="true"
356355
fill="#c50f1f"
357356
opacity="0.1"
358357
role="img"
359358
stroke-width="0"
360-
tabindex="0"
361359
/>
362360
<g
363361
transform="rotate(54, 0, 0)"
@@ -532,23 +530,21 @@ exports[`Gauge chart - Subcomponent Legend Should reduce the opacity of the othe
532530
aria-label="Medium Risk, 33 to 67"
533531
class="fui-gc__segment"
534532
d="M0,0Z"
535-
data-is-focusable="false"
533+
data-is-focusable="true"
536534
fill="#f7630c"
537535
opacity="0.1"
538536
role="img"
539537
stroke-width="0"
540-
tabindex="0"
541538
/>
542539
<path
543540
aria-label="High Risk, 67 to 100"
544541
class="fui-gc__segment"
545542
d="M0,0Z"
546-
data-is-focusable="false"
543+
data-is-focusable="true"
547544
fill="#c50f1f"
548545
opacity="0.1"
549546
role="img"
550547
stroke-width="0"
551-
tabindex="0"
552548
/>
553549
<g
554550
transform="rotate(54, 0, 0)"

‎packages/charts/react-charts/library/src/components/HorizontalBarChart/HorizontalBarChart.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -322,7 +322,7 @@ export const HorizontalBarChart: React.FunctionComponent<HorizontalBarChartProps
322322
onMouseLeave={_hoverOff}
323323
className={classes.barWrapper}
324324
opacity={isLegendSelected ? 1 : 0.1}
325-
tabIndex={point.legend !== '' ? 0 : undefined}
325+
tabIndex={_legendHighlighted(point.legend!) || _noLegendHighlighted() ? 0 : undefined}
326326
/>
327327
);
328328
});

‎packages/charts/react-charts/library/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
6060
height="12"
6161
opacity="1"
6262
role="img"
63+
tabindex="0"
6364
width="89.71333333333334%"
6465
x="10.286666666666665%"
6566
y="0"
@@ -123,6 +124,7 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
123124
height="12"
124125
opacity="1"
125126
role="img"
127+
tabindex="0"
126128
width="94.66666666666667%"
127129
x="5.333333333333334%"
128130
y="0"
@@ -186,6 +188,7 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
186188
height="12"
187189
opacity="1"
188190
role="img"
191+
tabindex="0"
189192
width="40.74666666666666%"
190193
x="59.25333333333334%"
191194
y="0"
@@ -262,6 +265,7 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
262265
height="12"
263266
opacity="1"
264267
role="img"
268+
tabindex="0"
265269
width="89.71333333333334%"
266270
x="10.286666666666665%"
267271
y="0"
@@ -325,6 +329,7 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
325329
height="12"
326330
opacity="1"
327331
role="img"
332+
tabindex="0"
328333
width="94.66666666666667%"
329334
x="5.333333333333334%"
330335
y="0"
@@ -388,6 +393,7 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
388393
height="12"
389394
opacity="1"
390395
role="img"
396+
tabindex="0"
391397
width="40.74666666666666%"
392398
x="59.25333333333334%"
393399
y="0"
@@ -468,6 +474,7 @@ exports[`Horizontal bar chart - Theme Should reflect theme change 1`] = `
468474
height="12"
469475
opacity="1"
470476
role="img"
477+
tabindex="0"
471478
width="89.71333333333334%"
472479
x="10.286666666666665%"
473480
y="0"
@@ -531,6 +538,7 @@ exports[`Horizontal bar chart - Theme Should reflect theme change 1`] = `
531538
height="12"
532539
opacity="1"
533540
role="img"
541+
tabindex="0"
534542
width="94.66666666666667%"
535543
x="5.333333333333334%"
536544
y="0"
@@ -594,6 +602,7 @@ exports[`Horizontal bar chart - Theme Should reflect theme change 1`] = `
594602
height="12"
595603
opacity="1"
596604
role="img"
605+
tabindex="0"
597606
width="40.74666666666666%"
598607
x="59.25333333333334%"
599608
y="0"
@@ -683,6 +692,7 @@ exports[`Horizontal bar chart re-rendering Should re-render the Horizontal bar c
683692
height="12"
684693
opacity="1"
685694
role="img"
695+
tabindex="0"
686696
width="89.71333333333334%"
687697
x="10.286666666666665%"
688698
y="0"
@@ -746,6 +756,7 @@ exports[`Horizontal bar chart re-rendering Should re-render the Horizontal bar c
746756
height="12"
747757
opacity="1"
748758
role="img"
759+
tabindex="0"
749760
width="94.66666666666667%"
750761
x="5.333333333333334%"
751762
y="0"
@@ -809,6 +820,7 @@ exports[`Horizontal bar chart re-rendering Should re-render the Horizontal bar c
809820
height="12"
810821
opacity="1"
811822
role="img"
823+
tabindex="0"
812824
width="40.74666666666666%"
813825
x="59.25333333333334%"
814826
y="0"
@@ -1177,6 +1189,7 @@ exports[`Horizontal bar chart rendering Should render the Horizontal bar chart l
11771189
height="12"
11781190
opacity="1"
11791191
role="img"
1192+
tabindex="0"
11801193
width="89.71333333333334%"
11811194
x="10.286666666666665%"
11821195
y="0"
@@ -1240,6 +1253,7 @@ exports[`Horizontal bar chart rendering Should render the Horizontal bar chart l
12401253
height="12"
12411254
opacity="1"
12421255
role="img"
1256+
tabindex="0"
12431257
width="94.66666666666667%"
12441258
x="5.333333333333334%"
12451259
y="0"
@@ -1303,6 +1317,7 @@ exports[`Horizontal bar chart rendering Should render the Horizontal bar chart l
13031317
height="12"
13041318
opacity="1"
13051319
role="img"
1320+
tabindex="0"
13061321
width="40.74666666666666%"
13071322
x="59.25333333333334%"
13081323
y="0"

0 commit comments

Comments
 (0)