axis ariaDescription

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({
@@ -19,7 +19,8 @@ export class AxisX {
     labelOffset,
     line,
     tickRotate,
-    ariaLabel
+    ariaLabel,
+    ariaDescription
   } = {}) {
     this.name = name;
     this.axis = keyword(axis, "axis", ["top", "bottom"]);
@@ -35,6 +36,7 @@ export class AxisX {
     this.line = boolean(line);
     this.tickRotate = number(tickRotate);
     this.ariaLabel = string(ariaLabel);
+    this.ariaDescription = string(ariaDescription);
   }
   render(
     index,
@@ -62,14 +64,13 @@ export class AxisX {
       labelOffset,
       line,
       name,
-      tickRotate,
-      ariaLabel
+      tickRotate
     } = this;
     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", ariaLabel === undefined ? `${name}-axis${label != null ? ` ${label}` : ""}` : ariaLabel)
+        .call(applyAria, this)
         .attr("transform", `translate(0,${ty})`)
         .call(createAxis(axis === "top" ? axisTop : axisBottom, x, this))
         .call(maybeTickRotate, tickRotate)
@@ -81,7 +82,6 @@ export class AxisX {
           : fy ? gridFacetX(index, fy, -ty)
           : gridX(offsetSign * (marginBottom + marginTop - height)))
         .call(!label ? () => {} : g => g.append("text")
-            .attr("aria-hidden", true)
             .attr("fill", "currentColor")
             .attr("transform", `translate(${
                 labelAnchor === "center" ? (width + marginLeft - marginRight) / 2
@@ -112,7 +112,8 @@ export class AxisY {
     labelOffset,
     line,
     tickRotate,
-    ariaLabel
+    ariaLabel,
+    ariaDescription
   } = {}) {
     this.name = name;
     this.axis = keyword(axis, "axis", ["left", "right"]);
@@ -128,6 +129,7 @@ export class AxisY {
     this.line = boolean(line);
     this.tickRotate = number(tickRotate);
     this.ariaLabel = string(ariaLabel);
+    this.ariaDescription = string(ariaDescription);
   }
   render(
     index,
@@ -153,14 +155,13 @@ export class AxisY {
       labelOffset,
       line,
       name,
-      tickRotate,
-      ariaLabel
+      tickRotate
     } = this;
     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", ariaLabel === undefined ? `${name}-axis${label != null ? ` ${label}` : ""}` : ariaLabel)
+        .call(applyAria, this)
         .attr("transform", `translate(${tx},0)`)
         .call(createAxis(axis === "right" ? axisRight : axisLeft, y, this))
         .call(maybeTickRotate, tickRotate)
@@ -172,7 +173,6 @@ export class AxisY {
           : fx ? gridFacetY(index, fx, -tx)
           : gridY(offsetSign * (marginLeft + marginRight - width)))
         .call(!label ? () => {} : g => g.append("text")
-            .attr("aria-hidden", true)
             .attr("fill", "currentColor")
             .attr("transform", `translate(${labelOffset * offsetSign},${
                 labelAnchor === "center" ? (height + marginTop - marginBottom) / 2
@@ -190,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)