aria fast follow (#722)

* personalize ariaLabel and ariaDescription on axes
* documentation: ariaLabel for lines is reduced to first value

Co-authored-by: Mike Bostock <[email protected]>

Author: Fil

README.md

@@ -680,7 +680,7 @@ If **x2** is not specified, it defaults to **x1**. If **y2** is not specified, i
 
 By default, the data is assumed to represent a single series (a single value that varies over time, *e.g.*). If the **z** channel is specified, data is grouped by *z* to form separate series. Typically *z* is a categorical value such as a series name. If **z** is not specified, it defaults to **fill** if a channel, or **stroke** if a channel.
 
-The **stroke** defaults to none. The **fill** defaults to currentColor if the stroke is none, and to none otherwise. If both the stroke and fill are defined as channels, or if the *z* channel is also specified, it is possible for the stroke or fill to vary within a series; varying color within a series is not supported, however, so only the first channel value for each series is considered. This limitation also applies to the **fillOpacity**, **strokeOpacity**, **strokeWidth**, and **title** channels.
+The **stroke** defaults to none. The **fill** defaults to currentColor if the stroke is none, and to none otherwise. If both the stroke and fill are defined as channels, or if the *z* channel is also specified, it is possible for the stroke or fill to vary within a series; varying color within a series is not supported, however, so only the first channel value for each series is considered. This limitation also applies to the **fillOpacity**, **strokeOpacity**, **strokeWidth**, **title**, and **ariaLabel** channels.
 
 Points along the baseline and topline are connected in input order. Likewise, if there are multiple series via the *z*, *fill*, or *stroke* channel, the series are drawn in input order such that the last series is drawn on top. Typically, the data is already in sorted order, such as chronological for time series; if sorting is needed, consider a [sort transform](#transforms).
 

src/axis.js

@@ -2,7 +2,7 @@ import {axisTop, axisBottom, axisRight, axisLeft, create, format, utcFormat} fro
 import {boolean, take, number, string, keyword, maybeKeyword, constant, isTemporal} from "./options.js";
 import {formatIsoDate} from "./format.js";
 import {radians} from "./math.js";
-import {impliedString} from "./style.js";
+import {applyAttr, impliedString} from "./style.js";
 
 export class AxisX {
   constructor({
@@ -18,7 +18,9 @@ export class AxisX {
     labelAnchor,
     labelOffset,
     line,
-    tickRotate
+    tickRotate,
+    ariaLabel,
+    ariaDescription
   } = {}) {
     this.name = name;
     this.axis = keyword(axis, "axis", ["top", "bottom"]);
@@ -33,6 +35,8 @@ export class AxisX {
     this.labelOffset = number(labelOffset);
     this.line = boolean(line);
     this.tickRotate = number(tickRotate);
+    this.ariaLabel = string(ariaLabel);
+    this.ariaDescription = string(ariaDescription);
   }
   render(
     index,
@@ -59,13 +63,14 @@ export class AxisX {
       labelAnchor,
       labelOffset,
       line,
+      name,
       tickRotate
     } = this;
-    const offset = this.name === "x" ? 0 : axis === "top" ? marginTop - facetMarginTop : marginBottom - facetMarginBottom;
+    const offset = name === "x" ? 0 : axis === "top" ? marginTop - facetMarginTop : marginBottom - facetMarginBottom;
     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`)
+        .call(applyAria, this)
         .attr("transform", `translate(0,${ty})`)
         .call(createAxis(axis === "top" ? axisTop : axisBottom, x, this))
         .call(maybeTickRotate, tickRotate)
@@ -106,7 +111,9 @@ export class AxisY {
     labelAnchor,
     labelOffset,
     line,
-    tickRotate
+    tickRotate,
+    ariaLabel,
+    ariaDescription
   } = {}) {
     this.name = name;
     this.axis = keyword(axis, "axis", ["left", "right"]);
@@ -121,6 +128,8 @@ export class AxisY {
     this.labelOffset = number(labelOffset);
     this.line = boolean(line);
     this.tickRotate = number(tickRotate);
+    this.ariaLabel = string(ariaLabel);
+    this.ariaDescription = string(ariaDescription);
   }
   render(
     index,
@@ -145,13 +154,14 @@ export class AxisY {
       labelAnchor,
       labelOffset,
       line,
+      name,
       tickRotate
     } = this;
-    const offset = this.name === "y" ? 0 : axis === "left" ? marginLeft - facetMarginLeft : marginRight - facetMarginRight;
+    const offset = name === "y" ? 0 : axis === "left" ? marginLeft - facetMarginLeft : marginRight - facetMarginRight;
     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`)
+        .call(applyAria, this)
         .attr("transform", `translate(${tx},0)`)
         .call(createAxis(axis === "right" ? axisRight : axisLeft, y, this))
         .call(maybeTickRotate, tickRotate)
@@ -180,6 +190,16 @@ export class AxisY {
   }
 }
 
+function applyAria(selection, {
+  name,
+  label,
+  ariaLabel = `${name}-axis`,
+  ariaDescription = label
+}) {
+  applyAttr(selection, "aria-label", ariaLabel);
+  applyAttr(selection, "aria-description", ariaDescription);
+}
+
 function gridX(y2) {
   return g => g.selectAll(".tick line")
     .clone(true)