axis marks’ ariaLabel option (#2162)

* refactor the axis marks’ ariaLabel option * concrete use case: a continuous horizontal crosshair
observablehq · Sep 5, 2024 · 09edfec · 09edfec
1 parent 0032c11
commit 09edfec
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 8 deletions.
diff --git a/src/marks/axis.js b/src/marks/axis.js
@@ -89,6 +89,7 @@ function axisKy(
     labelAnchor,
     labelArrow,
     labelOffset,
+    ariaLabel = `${k}-axis`,
     ...options
   }
 ) {
@@ -107,6 +108,7 @@ function axisKy(
           tickPadding,
           tickRotate,
           x,
+          ariaLabel,
           ...options
         })
       : null,
@@ -126,6 +128,7 @@ function axisKy(
           marginRight,
           marginBottom,
           marginLeft,
+          ariaLabel,
           ...options
         })
       : null,
@@ -150,7 +153,7 @@ function axisKy(
             }
             this.dy = cla === "top" ? 3 - marginTop : cla === "bottom" ? marginBottom - 3 : 0;
             this.dx = anchor === "right" ? clo : -clo;
-            this.ariaLabel = `${k}-axis label`;
+            this.ariaLabel = `${ariaLabel} label`;
             return {
               facets: [[0]],
               channels: {text: {value: [formatAxisLabel(k, scale, {anchor, label, labelAnchor: cla, labelArrow})]}}
@@ -190,6 +193,7 @@ function axisKx(
     labelAnchor,
     labelArrow,
     labelOffset,
+    ariaLabel = `${k}-axis`,
     ...options
   }
 ) {
@@ -208,6 +212,7 @@ function axisKx(
           tickPadding,
           tickRotate,
           y,
+          ariaLabel,
           ...options
         })
       : null,
@@ -227,6 +232,7 @@ function axisKx(
           marginRight,
           marginBottom,
           marginLeft,
+          ariaLabel,
           ...options
         })
       : null,
@@ -248,7 +254,7 @@ function axisKx(
             this.lineAnchor = anchor;
             this.dy = anchor === "top" ? -clo : clo;
             this.dx = cla === "right" ? marginRight - 3 : cla === "left" ? 3 - marginLeft : 0;
-            this.ariaLabel = `${k}-axis label`;
+            this.ariaLabel = `${ariaLabel} label`;
             return {
               facets: [[0]],
               channels: {text: {value: [formatAxisLabel(k, scale, {anchor, label, labelAnchor: cla, labelArrow})]}}
@@ -275,6 +281,7 @@ function axisTickKy(
     insetRight = inset,
     dx = 0,
     y = k === "y" ? undefined : null,
+    ariaLabel,
     ...options
   }
 ) {
@@ -283,7 +290,7 @@ function axisTickKy(
     k,
     data,
     {
-      ariaLabel: `${k}-axis tick`,
+      ariaLabel: `${ariaLabel} tick`,
       ariaHidden: true
     },
     {
@@ -318,6 +325,7 @@ function axisTickKx(
     insetBottom = inset,
     dy = 0,
     x = k === "x" ? undefined : null,
+    ariaLabel,
     ...options
   }
 ) {
@@ -326,7 +334,7 @@ function axisTickKx(
     k,
     data,
     {
-      ariaLabel: `${k}-axis tick`,
+      ariaLabel: `${ariaLabel} tick`,
       ariaHidden: true
     },
     {
@@ -363,6 +371,7 @@ function axisTextKy(
     insetLeft = inset,
     insetRight = inset,
     dx = 0,
+    ariaLabel,
     y = k === "y" ? undefined : null,
     ...options
   }
@@ -371,7 +380,7 @@ function axisTextKy(
     textY,
     k,
     data,
-    {ariaLabel: `${k}-axis tick label`},
+    {ariaLabel: `${ariaLabel} tick label`},
     {
       facetAnchor,
       frameAnchor,
@@ -410,14 +419,15 @@ function axisTextKx(
     insetBottom = inset,
     dy = 0,
     x = k === "x" ? undefined : null,
+    ariaLabel,
     ...options
   }
 ) {
   return axisMark(
     textX,
     k,
     data,
-    {ariaLabel: `${k}-axis tick label`},
+    {ariaLabel: `${ariaLabel} tick label`},
     {
       facetAnchor,
       frameAnchor,
@@ -466,10 +476,12 @@ function gridKy(
     x = null,
     x1 = anchor === "left" ? x : null,
     x2 = anchor === "right" ? x : null,
+    ariaLabel = `${k}-grid`,
+    ariaHidden = true,
     ...options
   }
 ) {
-  return axisMark(ruleY, k, data, {ariaLabel: `${k}-grid`, ariaHidden: true}, {y, x1, x2, ...gridDefaults(options)});
+  return axisMark(ruleY, k, data, {ariaLabel, ariaHidden}, {y, x1, x2, ...gridDefaults(options)});
 }
 
 function gridKx(
@@ -481,10 +493,12 @@ function gridKx(
     y = null,
     y1 = anchor === "top" ? y : null,
     y2 = anchor === "bottom" ? y : null,
+    ariaLabel = `${k}-grid`,
+    ariaHidden = true,
     ...options
   }
 ) {
-  return axisMark(ruleX, k, data, {ariaLabel: `${k}-grid`, ariaHidden: true}, {x, y1, y2, ...gridDefaults(options)});
+  return axisMark(ruleX, k, data, {ariaLabel, ariaHidden}, {x, y1, y2, ...gridDefaults(options)});
 }
 
 function gridDefaults({