Skip to content

Commit 3613288

Browse files
Anush2303Anush2303
authored
fix(react-charts): add missing aria labels (#35560)
1 parent 4a46ec4 commit 3613288

File tree

13 files changed

+352
-133
lines changed

13 files changed

+352
-133
lines changed

‎change/@fluentui-react-charts-10d13dd8-9e96-4686-b123-4fe3136b5e5a.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": "add missing aria-labels in v9 cartesian charts",
4+
"packageName": "@fluentui/react-charts",
5+
"email": "[email protected]",
6+
"dependentChangeType": "patch"
7+
}

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

Lines changed: 64 additions & 32 deletions
Large diffs are not rendered by default.

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

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -531,6 +531,30 @@ export const CartesianChart: React.FunctionComponent<ModifiedCartesianChartProps
531531
return minChartWidth;
532532
}
533533

534+
function _getChartDescription(): string {
535+
return (
536+
(props.chartTitle || 'Chart. ') +
537+
_getAxisTitle('X', props.xAxisTitle, props.xAxisType) +
538+
_getAxisTitle('Y', props.yAxisTitle, props.yAxisType || YAxisType.NumericAxis) +
539+
(props.secondaryYScaleOptions
540+
? _getAxisTitle('secondary Y', props.secondaryYAxistitle, YAxisType.NumericAxis)
541+
: '')
542+
);
543+
}
544+
545+
function _getAxisTitle(axisLabel: string, axisTitle: string | undefined, axisType: XAxisTypes | YAxisType): string {
546+
return (
547+
`The ${axisLabel} axis displays ` +
548+
(axisTitle ||
549+
(axisType === XAxisTypes.StringAxis || axisType === YAxisType.StringAxis
550+
? 'categories'
551+
: axisType === XAxisTypes.DateAxis || axisType === YAxisType.DateAxis
552+
? 'time'
553+
: 'values')) +
554+
'. '
555+
);
556+
}
557+
534558
function _calcMaxLabelWidthWithTransform(x: (string | number)[]) {
535559
// Case: rotated labels
536560
if (!props.wrapXAxisLables && props.rotateXAxisLables && props.xAxisType! === XAxisTypes.StringAxis) {
@@ -710,7 +734,8 @@ export const CartesianChart: React.FunctionComponent<ModifiedCartesianChartProps
710734
<svg
711735
width={svgDimensions.width}
712736
height={svgDimensions.height}
713-
aria-label={props.chartTitle}
737+
role="region"
738+
aria-label={_getChartDescription()}
714739
style={{ display: 'block' }}
715740
className={classes.chart}
716741
{...getSecureProps(svgProps)}

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

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,10 @@ exports[`GanttChart interaction and accessibility tests should render custom cal
1212
data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
1313
>
1414
<svg
15-
aria-label="Gantt chart with 8 data points. "
15+
aria-label="Gantt chart with 8 data points. The X axis displays time. The Y axis displays categories. "
1616
class="fui-cart__chart"
1717
height="0"
18+
role="region"
1819
style="display: block;"
1920
width="600"
2021
>
@@ -481,9 +482,10 @@ exports[`GanttChart rendering and behavior tests should display full y-axis tick
481482
data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
482483
>
483484
<svg
484-
aria-label="Gantt chart with 8 data points. "
485+
aria-label="Gantt chart with 8 data points. The X axis displays time. The Y axis displays categories. "
485486
class="fui-cart__chart"
486487
height="0"
488+
role="region"
487489
style="display: block;"
488490
width="600"
489491
>
@@ -897,9 +899,10 @@ exports[`GanttChart rendering and behavior tests should render GanttChart correc
897899
data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
898900
>
899901
<svg
900-
aria-label="Gantt chart with 8 data points. "
902+
aria-label="Gantt chart with 8 data points. The X axis displays time. The Y axis displays categories. "
901903
class="fui-cart__chart"
902904
height="0"
905+
role="region"
903906
style="display: block;"
904907
width="600"
905908
>
@@ -1321,9 +1324,10 @@ exports[`GanttChart rendering and behavior tests should render GanttChart correc
13211324
data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
13221325
>
13231326
<svg
1324-
aria-label="Gantt chart with 8 data points. "
1327+
aria-label="Gantt chart with 8 data points. The X axis displays time. The Y axis displays categories. "
13251328
class="fui-cart__chart"
13261329
height="0"
1330+
role="region"
13271331
style="display: block;"
13281332
width="600"
13291333
>
@@ -1748,9 +1752,10 @@ Object {
17481752
data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
17491753
>
17501754
<svg
1751-
aria-label="Gantt chart with 8 data points. "
1755+
aria-label="Gantt chart with 8 data points. The X axis displays time. The Y axis displays categories. "
17521756
class="fui-cart__chart"
17531757
height="0"
1758+
role="region"
17541759
style="display: block;"
17551760
width="600"
17561761
>
@@ -2170,9 +2175,10 @@ Object {
21702175
data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
21712176
>
21722177
<svg
2173-
aria-label="Gantt chart with 8 data points. "
2178+
aria-label="Gantt chart with 8 data points. The X axis displays time. The Y axis displays categories. "
21742179
class="fui-cart__chart"
21752180
height="0"
2181+
role="region"
21762182
style="display: block;"
21772183
width="600"
21782184
>
@@ -2643,9 +2649,10 @@ exports[`GanttChart rendering and behavior tests should render GanttChart correc
26432649
data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
26442650
>
26452651
<svg
2646-
aria-label="Gantt chart with 6 data points. "
2652+
aria-label="Gantt chart with 6 data points. The X axis displays time. The Y axis displays values. "
26472653
class="fui-cart__chart"
26482654
height="0"
2655+
role="region"
26492656
style="display: block;"
26502657
width="600"
26512658
>
@@ -3082,9 +3089,10 @@ exports[`GanttChart rendering and behavior tests should render bars with gradien
30823089
data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
30833090
>
30843091
<svg
3085-
aria-label="Gantt chart with 8 data points. "
3092+
aria-label="Gantt chart with 8 data points. The X axis displays time. The Y axis displays categories. "
30863093
class="fui-cart__chart"
30873094
height="0"
3095+
role="region"
30883096
style="display: block;"
30893097
width="600"
30903098
>
@@ -3540,9 +3548,10 @@ exports[`GanttChart rendering and behavior tests should render bars with rounded
35403548
data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
35413549
>
35423550
<svg
3543-
aria-label="Gantt chart with 8 data points. "
3551+
aria-label="Gantt chart with 8 data points. The X axis displays time. The Y axis displays categories. "
35443552
class="fui-cart__chart"
35453553
height="0"
3554+
role="region"
35463555
style="display: block;"
35473556
width="600"
35483557
>
@@ -3960,9 +3969,10 @@ exports[`GanttChart rendering and behavior tests should render callout correctly
39603969
data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
39613970
>
39623971
<svg
3963-
aria-label="Gantt chart with 8 data points. "
3972+
aria-label="Gantt chart with 8 data points. The X axis displays time. The Y axis displays categories. "
39643973
class="fui-cart__chart"
39653974
height="0"
3975+
role="region"
39663976
style="display: block;"
39673977
width="600"
39683978
>
@@ -4429,9 +4439,10 @@ exports[`GanttChart rendering and behavior tests should truncate y-axis tick lab
44294439
data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
44304440
>
44314441
<svg
4432-
aria-label="Gantt chart with 8 data points. "
4442+
aria-label="Gantt chart with 8 data points. The X axis displays time. The Y axis displays categories. "
44334443
class="fui-cart__chart"
44344444
height="0"
4445+
role="region"
44354446
style="display: block;"
44364447
width="600"
44374448
>

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

Lines changed: 34 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,10 @@ exports[`Grouped Vertical bar chart rendering Should render the grouped vertical
1212
data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
1313
>
1414
<svg
15-
aria-label="Vertical bar chart with 2 grouped bar series. "
15+
aria-label="Vertical bar chart with 2 grouped bar series. The X axis displays categories. The Y axis displays values. "
1616
class="fui-cart__chart"
1717
height="300"
18+
role="region"
1819
style="display: block;"
1920
width="650"
2021
>
@@ -431,9 +432,10 @@ exports[`Grouped Vertical bar chart rendering Should render the grouped vertical
431432
data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
432433
>
433434
<svg
434-
aria-label="Vertical bar chart with 2 grouped bar series. "
435+
aria-label="Vertical bar chart with 2 grouped bar series. The X axis displays categories. The Y axis displays values. "
435436
class="fui-cart__chart"
436437
height="300"
438+
role="region"
437439
style="display: block;"
438440
width="650"
439441
>
@@ -857,9 +859,10 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
857859
tabindex="0"
858860
/>
859861
<svg
860-
aria-label="Vertical bar chart with 2 grouped bar series. "
862+
aria-label="Vertical bar chart with 2 grouped bar series. The X axis displays categories. The Y axis displays values. "
861863
class="fui-cart__chart"
862864
height="300"
865+
role="region"
863866
style="display: block;"
864867
width="650"
865868
>
@@ -1348,9 +1351,10 @@ Object {
13481351
data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
13491352
>
13501353
<svg
1351-
aria-label="Vertical bar chart with 2 grouped bar series. "
1354+
aria-label="Vertical bar chart with 2 grouped bar series. The X axis displays categories. The Y axis displays values. "
13521355
class="fui-cart__chart"
13531356
height="300"
1357+
role="region"
13541358
style="display: block;"
13551359
width="650"
13561360
>
@@ -1765,9 +1769,10 @@ Object {
17651769
data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
17661770
>
17671771
<svg
1768-
aria-label="Vertical bar chart with 2 grouped bar series. "
1772+
aria-label="Vertical bar chart with 2 grouped bar series. The X axis displays categories. The Y axis displays values. "
17691773
class="fui-cart__chart"
17701774
height="300"
1775+
role="region"
17711776
style="display: block;"
17721777
width="650"
17731778
>
@@ -2241,9 +2246,10 @@ Object {
22412246
data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
22422247
>
22432248
<svg
2244-
aria-label="Vertical bar chart with 2 grouped bar series. "
2249+
aria-label="Vertical bar chart with 2 grouped bar series. The X axis displays categories. The Y axis displays values. "
22452250
class="fui-cart__chart"
22462251
height="300"
2252+
role="region"
22472253
style="display: block;"
22482254
width="650"
22492255
>
@@ -2665,9 +2671,10 @@ Object {
26652671
data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
26662672
>
26672673
<svg
2668-
aria-label="Vertical bar chart with 2 grouped bar series. "
2674+
aria-label="Vertical bar chart with 2 grouped bar series. The X axis displays categories. The Y axis displays values. "
26692675
class="fui-cart__chart"
26702676
height="300"
2677+
role="region"
26712678
style="display: block;"
26722679
width="650"
26732680
>
@@ -3148,9 +3155,10 @@ Object {
31483155
data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
31493156
>
31503157
<svg
3151-
aria-label="Vertical bar chart with 2 grouped bar series. "
3158+
aria-label="Vertical bar chart with 2 grouped bar series. The X axis displays categories. The Y axis displays values. "
31523159
class="fui-cart__chart"
31533160
height="50"
3161+
role="region"
31543162
style="display: block;"
31553163
width="650"
31563164
>
@@ -3510,9 +3518,10 @@ Object {
35103518
data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
35113519
>
35123520
<svg
3513-
aria-label="Vertical bar chart with 2 grouped bar series. "
3521+
aria-label="Vertical bar chart with 2 grouped bar series. The X axis displays categories. The Y axis displays values. "
35143522
class="fui-cart__chart"
35153523
height="50"
3524+
role="region"
35163525
style="display: block;"
35173526
width="650"
35183527
>
@@ -3931,9 +3940,10 @@ Object {
39313940
data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
39323941
>
39333942
<svg
3934-
aria-label="Vertical bar chart with 2 grouped bar series. "
3943+
aria-label="Vertical bar chart with 2 grouped bar series. The X axis displays categories. The Y axis displays values. "
39353944
class="fui-cart__chart"
39363945
height="300"
3946+
role="region"
39373947
style="display: block;"
39383948
width="650"
39393949
>
@@ -4348,9 +4358,10 @@ Object {
43484358
data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
43494359
>
43504360
<svg
4351-
aria-label="Vertical bar chart with 2 grouped bar series. "
4361+
aria-label="Vertical bar chart with 2 grouped bar series. The X axis displays categories. The Y axis displays values. "
43524362
class="fui-cart__chart"
43534363
height="300"
4364+
role="region"
43544365
style="display: block;"
43554366
width="650"
43564367
>
@@ -4824,9 +4835,10 @@ Object {
48244835
data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
48254836
>
48264837
<svg
4827-
aria-label="Vertical bar chart with 2 grouped bar series. "
4838+
aria-label="Vertical bar chart with 2 grouped bar series. The X axis displays categories. The Y axis displays values. "
48284839
class="fui-cart__chart"
48294840
height="300"
4841+
role="region"
48304842
style="display: block;"
48314843
width="650"
48324844
>
@@ -5288,9 +5300,10 @@ Object {
52885300
data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
52895301
>
52905302
<svg
5291-
aria-label="Vertical bar chart with 2 grouped bar series. "
5303+
aria-label="Vertical bar chart with 2 grouped bar series. The X axis displays categories. The Y axis displays values. "
52925304
class="fui-cart__chart"
52935305
height="300"
5306+
role="region"
52945307
style="display: block;"
52955308
width="650"
52965309
>
@@ -5811,9 +5824,10 @@ Object {
58115824
data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
58125825
>
58135826
<svg
5814-
aria-label="Vertical bar chart with 2 grouped bar series. "
5827+
aria-label="Vertical bar chart with 2 grouped bar series. The X axis displays categories. The Y axis displays values. "
58155828
class="fui-cart__chart"
58165829
height="300"
5830+
role="region"
58175831
style="display: block;"
58185832
width="650"
58195833
>
@@ -6316,9 +6330,10 @@ Object {
63166330
data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
63176331
>
63186332
<svg
6319-
aria-label="Vertical bar chart with 2 grouped bar series. "
6333+
aria-label="Vertical bar chart with 2 grouped bar series. The X axis displays categories. The Y axis displays values. "
63206334
class="fui-cart__chart"
63216335
height="300"
6336+
role="region"
63226337
style="display: block;"
63236338
width="650"
63246339
>
@@ -6885,9 +6900,10 @@ Object {
68856900
data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
68866901
>
68876902
<svg
6888-
aria-label="Vertical bar chart with 2 grouped bar series. "
6903+
aria-label="Vertical bar chart with 2 grouped bar series. The X axis displays categories. The Y axis displays values. "
68896904
class="fui-cart__chart"
68906905
height="300"
6906+
role="region"
68916907
style="display: block;"
68926908
width="650"
68936909
>
@@ -7302,9 +7318,10 @@ Object {
73027318
data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
73037319
>
73047320
<svg
7305-
aria-label="Vertical bar chart with 2 grouped bar series. "
7321+
aria-label="Vertical bar chart with 2 grouped bar series. The X axis displays categories. The Y axis displays values. "
73067322
class="fui-cart__chart"
73077323
height="300"
7324+
role="region"
73087325
style="display: block;"
73097326
width="650"
73107327
>

0 commit comments

Comments
 (0)