ariaLabel, ariaDescription, ariaHidden (#710)

* ariaLabel, ariaDescription

* aria-description, not desc

* ariaHidden

Author: mbostock

src/axis.js

@@ -65,6 +65,7 @@ export class AxisX {
     const offsetSign = axis === "top" ? -1 : 1;
     const ty = offsetSign * offset + (axis === "top" ? marginTop : height - marginBottom);
     return create("svg:g")
+        .attr("aria-label", `${this.name}-axis`)
         .attr("transform", `translate(0,${ty})`)
         .call(createAxis(axis === "top" ? axisTop : axisBottom, x, this))
         .call(maybeTickRotate, tickRotate)
@@ -150,6 +151,7 @@ export class AxisY {
     const offsetSign = axis === "left" ? -1 : 1;
     const tx = offsetSign * offset + (axis === "right" ? width - marginRight : marginLeft);
     return create("svg:g")
+        .attr("aria-label", `${this.name}-axis`)
         .attr("transform", `translate(${tx},0)`)
         .call(createAxis(axis === "right" ? axisRight : axisLeft, y, this))
         .call(maybeTickRotate, tickRotate)

src/marks/area.js

@@ -8,6 +8,7 @@ import {maybeIdentityX, maybeIdentityY} from "../transforms/identity.js";
 import {maybeStackX, maybeStackY} from "../transforms/stack.js";
 
 const defaults = {
+  ariaLabel: "area",
   strokeWidth: 1,
   strokeMiterlimit: 1
 };

src/marks/arrow.js

@@ -5,6 +5,7 @@ import {applyChannelStyles, applyDirectStyles, applyIndirectStyles, applyTransfo
 import {maybeSameValue} from "./link.js";
 
 const defaults = {
+  ariaLabel: "arrow",
   fill: "none",
   stroke: "currentColor",
   strokeLinecap: "round",

src/marks/bar.js

@@ -7,10 +7,8 @@ import {maybeIdentityX, maybeIdentityY} from "../transforms/identity.js";
 import {maybeIntervalX, maybeIntervalY} from "../transforms/interval.js";
 import {maybeStackX, maybeStackY} from "../transforms/stack.js";
 
-const defaults = {};
-
 export class AbstractBar extends Mark {
-  constructor(data, channels, options = {}) {
+  constructor(data, channels, options = {}, defaults) {
     super(data, channels, options, defaults);
     const {inset = 0, insetTop = inset, insetRight = inset, insetBottom = inset, insetLeft = inset, rx, ry} = options;
     this.insetTop = number(insetTop);
@@ -58,6 +56,10 @@ export class AbstractBar extends Mark {
   }
 }
 
+const defaults = {
+  ariaLabel: "bar"
+};
+
 export class BarX extends AbstractBar {
   constructor(data, options = {}) {
     const {x1, x2, y} = options;
@@ -68,7 +70,8 @@ export class BarX extends AbstractBar {
         {name: "x2", value: x2, scale: "x"},
         {name: "y", value: y, scale: "y", type: "band", optional: true}
       ],
-      options
+      options,
+      defaults
     );
   }
   _transform(selection, {x}, dx, dy) {
@@ -94,7 +97,8 @@ export class BarY extends AbstractBar {
         {name: "y2", value: y2, scale: "y"},
         {name: "x", value: x, scale: "x", type: "band", optional: true}
       ],
-      options
+      options,
+      defaults
     );
   }
   _transform(selection, {y}, dx, dy) {

src/marks/cell.js

@@ -1,6 +1,10 @@
 import {identity, indexOf, maybeColorChannel, maybeTuple} from "../options.js";
 import {AbstractBar} from "./bar.js";
 
+const defaults = {
+  ariaLabel: "cell"
+};
+
 export class Cell extends AbstractBar {
   constructor(data, {x, y, ...options} = {}) {
     super(
@@ -9,7 +13,8 @@ export class Cell extends AbstractBar {
         {name: "x", value: x, scale: "x", type: "band", optional: true},
         {name: "y", value: y, scale: "y", type: "band", optional: true}
       ],
-      options
+      options,
+      defaults
     );
   }
   _transform() {

src/marks/dot.js

@@ -5,6 +5,7 @@ import {Mark} from "../plot.js";
 import {applyChannelStyles, applyDirectStyles, applyFrameAnchor, applyIndirectStyles, applyTransform, offset} from "../style.js";
 
 const defaults = {
+  ariaLabel: "dot",
   fill: "none",
   stroke: "currentColor",
   strokeWidth: 1.5

src/marks/frame.js

@@ -4,6 +4,7 @@ import {number} from "../options.js";
 import {applyDirectStyles, applyIndirectStyles, applyTransform, offset} from "../style.js";
 
 const defaults = {
+  ariaLabel: "frame",
   fill: "none",
   stroke: "currentColor"
 };

src/marks/image.js

@@ -5,6 +5,7 @@ import {Mark} from "../plot.js";
 import {applyChannelStyles, applyDirectStyles, applyIndirectStyles, applyTransform, applyAttr, offset, impliedString, applyFrameAnchor} from "../style.js";
 
 const defaults = {
+  ariaLabel: "image",
   fill: null,
   stroke: null
 };

src/marks/line.js

@@ -6,6 +6,7 @@ import {indexOf, identity, maybeTuple, maybeZ} from "../options.js";
 import {applyDirectStyles, applyIndirectStyles, applyTransform, applyGroupedChannelStyles, offset} from "../style.js";
 
 const defaults = {
+  ariaLabel: "line",
   fill: "none",
   stroke: "currentColor",
   strokeWidth: 1.5,

src/marks/link.js

@@ -4,6 +4,7 @@ import {Mark} from "../plot.js";
 import {applyChannelStyles, applyDirectStyles, applyIndirectStyles, applyTransform, offset} from "../style.js";
 
 const defaults = {
+  ariaLabel: "link",
   fill: "none",
   stroke: "currentColor",
   strokeMiterlimit: 1