Skip to content

Commit 1216ed6

Browse files
theiliadtheiliad
committedDec 17, 2019
feat(core, react, angular, vue): add WAI-ARIA tags to elements
·
v1.23.6v0.24.0
1 parent b411e6f commit 1216ed6

File tree

6 files changed

+56
-18
lines changed

6 files changed

+56
-18
lines changed
 

‎packages/core/src/components/graphs/bar-grouped.ts

+9-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
// Internal Imports
22
import { Bar } from "./bar";
3+
import { TooltipTypes, Roles } from "../../interfaces";
34

45
// D3 Imports
56
import { select } from "d3-selection";
67
import { color } from "d3-color";
78
import { ScaleBand, scaleBand } from "d3-scale";
8-
import { TooltipTypes } from "../../interfaces";
99

1010
export class GroupedBar extends Bar {
1111
type = "grouped-bar";
@@ -67,7 +67,9 @@ export class GroupedBar extends Bar {
6767
// Add the bar groups that need to be introduced
6868
const barGroupsEnter = barGroups.enter()
6969
.append("g")
70-
.classed("bars", true);
70+
.classed("bars", true)
71+
.attr("role", Roles.GROUP)
72+
.attr("aria-labelledby", d => d);
7173

7274
// Update data on all bars
7375
const bars = barGroupsEnter.merge(barGroups)
@@ -98,7 +100,11 @@ export class GroupedBar extends Bar {
98100
return Math.abs(this.services.axes.getYValue(d, i) - this.services.axes.getYValue(0));
99101
})
100102
.attr("fill", d => this.model.getFillScale()[d.datasetLabel](d.label))
101-
.attr("opacity", 1);
103+
.attr("opacity", 1)
104+
// a11y
105+
.attr("role", Roles.GRAPHICS_SYMBOL)
106+
.attr("aria-roledescription", "bar")
107+
.attr("aria-label", d => d.value);
102108

103109
// Add event listeners to elements drawn
104110
this.addEventListeners();

‎packages/core/src/components/graphs/bar-simple.ts

+8-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
// Internal Imports
22
import { Bar } from "./bar";
3+
import { TooltipTypes, Roles } from "../../interfaces";
34

45
// D3 Imports
56
import { select } from "d3-selection";
67
import { color } from "d3-color";
7-
import { TooltipTypes } from "../../interfaces";
88

99
export class SimpleBar extends Bar {
1010
type = "simple-bar";
@@ -35,7 +35,8 @@ export class SimpleBar extends Bar {
3535
// Add the bar groups that need to be introduced
3636
const barGroupsEnter = barGroups.enter()
3737
.append("g")
38-
.classed("bars", true);
38+
.classed("bars", true)
39+
.attr("role", Roles.GROUP);
3940

4041
// Update data on all bars
4142
const bars = barGroupsEnter.merge(barGroups)
@@ -66,7 +67,11 @@ export class SimpleBar extends Bar {
6667
.attr("height", (d, i) => {
6768
return Math.abs(this.services.axes.getYValue(d, i) - this.services.axes.getYValue(0));
6869
})
69-
.attr("opacity", 1);
70+
.attr("opacity", 1)
71+
// a11y
72+
.attr("role", Roles.GRAPHICS_SYMBOL)
73+
.attr("aria-roledescription", "bar")
74+
.attr("aria-label", d => d.value);
7075

7176
// Add event listeners to elements drawn
7277
this.addEventListeners();

‎packages/core/src/components/graphs/bar-stacked.ts

+8-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Internal Imports
2-
import { ScaleTypes, TooltipTypes } from "../../interfaces/enums";
32
import { Tools } from "../../tools";
43
import { Bar } from "./bar";
4+
import { Roles, ScaleTypes, TooltipTypes } from "../../interfaces";
55

66
// D3 Imports
77
import { select } from "d3-selection";
@@ -111,7 +111,8 @@ export class StackedBar extends Bar {
111111
// Add bar groups that need to be introduced
112112
barGroups.enter()
113113
.append("g")
114-
.classed("bars", true);
114+
.classed("bars", true)
115+
.attr("role", Roles.GROUP);
115116

116117
// Update data on all bars
117118
const bars = svg.selectAll("g.bars").selectAll("rect.bar")
@@ -146,7 +147,11 @@ export class StackedBar extends Bar {
146147

147148
return height;
148149
})
149-
.attr("opacity", 1);
150+
.attr("opacity", 1)
151+
// a11y
152+
.attr("role", Roles.GRAPHICS_SYMBOL)
153+
.attr("aria-roledescription", "bar")
154+
.attr("aria-label", d => d.value);
150155

151156
// Add event listeners for the above elements
152157
this.addEventListeners();

‎packages/core/src/components/graphs/line.ts

+6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// Internal Imports
22
import { Component } from "../component";
33
import * as Configuration from "../../configuration";
4+
import { Roles } from "../../interfaces";
45

56
// D3 Imports
67
import { select } from "d3-selection";
@@ -81,6 +82,11 @@ export class Line extends Component {
8182

8283
return parentDatum.data;
8384
})
85+
// a11y
86+
.attr("role", Roles.GRAPHICS_SYMBOL)
87+
.attr("aria-roledescription", "line")
88+
.attr("aria-label", d => d.map(datum => datum.value || datum).join(","))
89+
// Transition
8490
.transition(this.services.transitions.getTransition("line-update-enter", animate))
8591
.attr("opacity", 1)
8692
.attr("class", "line")

‎packages/core/src/components/graphs/pie.ts

+17-6
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { Component } from "../component";
33
import { DOMUtils } from "../../services";
44
import { Tools } from "../../tools";
5-
import { CalloutDirections, TooltipTypes } from "../../interfaces/enums";
5+
import { CalloutDirections, Roles, TooltipTypes } from "../../interfaces";
66

77
// D3 Imports
88
import { select } from "d3-selection";
@@ -81,7 +81,9 @@ export class Pie extends Component {
8181
.sort((a: any, b: any) => a.index - b.index);
8282

8383
// Update data on all slices
84-
const paths = DOMUtils.appendOrSelect(svg, "g.slices").selectAll("path.slice")
84+
const slicesGroup = DOMUtils.appendOrSelect(svg, "g.slices")
85+
.attr("role", Roles.GROUP);
86+
const paths = slicesGroup.selectAll("path.slice")
8587
.data(pieLayoutData, d => d.data.label);
8688

8789
// Remove slices that need to be exited
@@ -101,13 +103,18 @@ export class Pie extends Component {
101103
.attr("d", this.arc)
102104
.transition(this.services.transitions.getTransition("pie-slice-enter-update", animate))
103105
.attr("opacity", 1)
106+
// a11y
107+
.attr("role", Roles.GRAPHICS_SYMBOL)
108+
.attr("aria-roledescription", "slice")
109+
.attr("aria-label", d => `${d.value}, ${Tools.convertValueToPercentage(d.data.value, dataList) + "%"}`)
110+
// Tween
104111
.attrTween("d", function (a) {
105112
return arcTween.bind(this)(a, self.arc);
106113
});
107114

108115
// Draw the slice labels
109-
const labels = DOMUtils.appendOrSelect(svg, "g.labels")
110-
.selectAll("text.pie-label")
116+
const labelsGroup = DOMUtils.appendOrSelect(svg, "g.labels").attr("role", Roles.GROUP);
117+
const labels = labelsGroup.selectAll("text.pie-label")
111118
.data(pieLayoutData, (d: any) => d.data.label);
112119

113120
// Remove labels that are existing
@@ -193,7 +200,8 @@ export class Pie extends Component {
193200
}
194201

195202
renderCallouts(calloutData: any[]) {
196-
const svg = DOMUtils.appendOrSelect(this.getContainerSVG(), "g.callouts");
203+
const svg = DOMUtils.appendOrSelect(this.getContainerSVG(), "g.callouts")
204+
.attr("role", Roles.GROUP);
197205
const options = this.model.getOptions();
198206

199207
// Update data on callouts
@@ -204,7 +212,10 @@ export class Pie extends Component {
204212

205213
const enteringCallouts = callouts.enter()
206214
.append("g")
207-
.classed("callout", true);
215+
.classed("callout", true)
216+
// a11y
217+
.attr("role", `${Roles.GRAPHICS_SYMBOL} ${Roles.GROUP}`)
218+
.attr("aria-roledescription", "label callout");
208219

209220
// Update data values for each callout
210221
// For the horizontal and vertical lines to use

‎packages/core/src/components/graphs/scatter.ts

+8-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
// Internal Imports
22
import { Component } from "../component";
3+
import { TooltipTypes, Roles } from "../../interfaces";
34

45
// D3 Imports
56
import { select } from "d3-selection";
6-
import { TooltipTypes } from "../../interfaces";
77

88
export class Scatter extends Component {
99
type = "scatter";
@@ -37,7 +37,8 @@ export class Scatter extends Component {
3737
// Add the dot groups that need to be introduced
3838
const dotGroupsEnter = dotGroups.enter()
3939
.append("g")
40-
.classed("dots", true);
40+
.classed("dots", true)
41+
.attr("role", Roles.GROUP);
4142

4243
// Update data on all circles
4344
const dots = dotGroupsEnter.merge(dotGroups)
@@ -67,7 +68,11 @@ export class Scatter extends Component {
6768
})
6869
.attr("fill-opacity", filled ? 0.2 : 1)
6970
.attr("stroke", d => this.model.getStrokeColor(d.datasetLabel, d.label, d.value))
70-
.attr("opacity", 1);
71+
.attr("opacity", 1)
72+
// a11y
73+
.attr("role", Roles.GRAPHICS_SYMBOL)
74+
.attr("aria-roledescription", "point")
75+
.attr("aria-label", d => d.value);
7176

7277
// Add event listeners to elements drawn
7378
this.addEventListeners();

0 commit comments

Comments
 (0)
Please sign in to comment.