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

src/marks/rect.js

@@ -7,7 +7,9 @@ import {maybeIdentityX, maybeIdentityY} from "../transforms/identity.js";
 import {maybeIntervalX, maybeIntervalY} from "../transforms/interval.js";
 import {maybeStackX, maybeStackY} from "../transforms/stack.js";
 
-const defaults = {};
+const defaults = {
+  ariaLabel: "rect"
+};
 
 export class Rect extends Mark {
   constructor(data, options = {}) {

src/marks/rule.js

@@ -6,6 +6,7 @@ import {applyDirectStyles, applyIndirectStyles, applyTransform, applyChannelStyl
 import {maybeIntervalX, maybeIntervalY} from "../transforms/interval.js";
 
 const defaults = {
+  ariaLabel: "rule",
   fill: null,
   stroke: "currentColor"
 };

src/marks/text.js

@@ -6,6 +6,7 @@ import {Mark} from "../plot.js";
 import {applyChannelStyles, applyDirectStyles, applyIndirectStyles, applyAttr, applyTransform, offset, impliedString, applyFrameAnchor} from "../style.js";
 
 const defaults = {
+  ariaLabel: "text",
   strokeLinejoin: "round",
   strokeWidth: 3,
   paintOrder: "stroke"

src/marks/tick.js

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

src/marks/vector.js

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

src/plot.js

@@ -10,7 +10,7 @@ import {applyInlineStyles, maybeClassName, styles} from "./style.js";
 import {basic} from "./transforms/basic.js";
 
 export function plot(options = {}) {
-  const {facet, style, caption} = options;
+  const {facet, style, caption, ariaLabel, ariaDescription} = options;
 
   // className for inline styles
   const className = maybeClassName(options.className);
@@ -77,6 +77,8 @@ export function plot(options = {}) {
       .attr("width", width)
       .attr("height", height)
       .attr("viewBox", `0 0 ${width} ${height}`)
+      .attr("aria-label", ariaLabel)
+      .attr("aria-description", ariaDescription)
       .call(svg => svg.append("style").text(`
         .${className} {
           display: block;

src/style.js

@@ -10,6 +10,9 @@ export function styles(
   {
     title,
     href,
+    ariaLabel: variaLabel,
+    ariaDescription,
+    ariaHidden,
     target,
     fill,
     fillOpacity,
@@ -27,6 +30,7 @@ export function styles(
   },
   channels,
   {
+    ariaLabel: cariaLabel,
     fill: defaultFill = "currentColor",
     stroke: defaultStroke = "none",
     strokeWidth: defaultStrokeWidth,
@@ -102,6 +106,9 @@ export function styles(
   }
 
   mark.target = string(target);
+  mark.ariaLabel = string(cariaLabel);
+  mark.ariaDescription = string(ariaDescription);
+  mark.ariaHidden = string(ariaHidden);
   mark.opacity = impliedNumber(copacity, 1);
   mark.mixBlendMode = impliedString(mixBlendMode, "normal");
   mark.paintOrder = impliedString(paintOrder, "normal");
@@ -111,6 +118,7 @@ export function styles(
     ...channels,
     {name: "title", value: title, optional: true},
     {name: "href", value: href, optional: true},
+    {name: "ariaLabel", value: variaLabel, optional: true},
     {name: "fill", value: vfill, scale: "color", optional: true},
     {name: "fillOpacity", value: vfillOpacity, scale: "opacity", optional: true},
     {name: "stroke", value: vstroke, scale: "color", optional: true},
@@ -138,29 +146,34 @@ export function applyTextGroup(selection, T) {
   if (T) selection.text(isTemporal(T) ? ([i]) => isoFormat(T[i]) : isNumeric(T) ? (f => ([i]) => f(T[i]))(formatNumber()) : ([i]) => T[i]);
 }
 
-export function applyChannelStyles(selection, {target}, {title: L, fill: F, fillOpacity: FO, stroke: S, strokeOpacity: SO, strokeWidth: SW, opacity: O, href: H}) {
+export function applyChannelStyles(selection, {target}, {ariaLabel: AL, title: T, fill: F, fillOpacity: FO, stroke: S, strokeOpacity: SO, strokeWidth: SW, opacity: O, href: H}) {
+  if (AL) applyAttr(selection, "aria-label", i => AL[i]);
   if (F) applyAttr(selection, "fill", i => F[i]);
   if (FO) applyAttr(selection, "fill-opacity", i => FO[i]);
   if (S) applyAttr(selection, "stroke", i => S[i]);
   if (SO) applyAttr(selection, "stroke-opacity", i => SO[i]);
   if (SW) applyAttr(selection, "stroke-width", i => SW[i]);
   if (O) applyAttr(selection, "opacity", i => O[i]);
   if (H) applyHref(selection, i => H[i], target);
-  applyTitle(selection, L);
+  applyTitle(selection, T);
 }
 
-export function applyGroupedChannelStyles(selection, {target}, {title: L, fill: F, fillOpacity: FO, stroke: S, strokeOpacity: SO, strokeWidth: SW, opacity: O, href: H}) {
+export function applyGroupedChannelStyles(selection, {target}, {ariaLabel: AL, title: T, fill: F, fillOpacity: FO, stroke: S, strokeOpacity: SO, strokeWidth: SW, opacity: O, href: H}) {
+  if (AL) applyAttr(selection, "aria-label", ([i]) => AL[i]);
   if (F) applyAttr(selection, "fill", ([i]) => F[i]);
   if (FO) applyAttr(selection, "fill-opacity", ([i]) => FO[i]);
   if (S) applyAttr(selection, "stroke", ([i]) => S[i]);
   if (SO) applyAttr(selection, "stroke-opacity", ([i]) => SO[i]);
   if (SW) applyAttr(selection, "stroke-width", ([i]) => SW[i]);
   if (O) applyAttr(selection, "opacity", ([i]) => O[i]);
   if (H) applyHref(selection, ([i]) => H[i], target);
-  applyTitleGroup(selection, L);
+  applyTitleGroup(selection, T);
 }
 
 export function applyIndirectStyles(selection, mark) {
+  applyAttr(selection, "aria-label", mark.ariaLabel);
+  applyAttr(selection, "aria-description", mark.ariaDescription);
+  applyAttr(selection, "aria-hidden", mark.ariaHidden);
   applyAttr(selection, "fill", mark.fill);
   applyAttr(selection, "fill-opacity", mark.fillOpacity);
   applyAttr(selection, "stroke", mark.stroke);