fix: hide axis ticks from aria since they are just adding noise (#2018)

* fix: hide axis ticks from aria since they are just adding noise

* plumbing; update test snapshots

---------

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

Author: domoritz

src/marks/axis.js

@@ -278,19 +278,28 @@ function axisTickKy(
     ...options
   }
 ) {
-  return axisMark(vectorY, k, anchor, `${k}-axis tick`, data, {
-    strokeWidth,
-    strokeLinecap,
-    strokeLinejoin,
-    facetAnchor,
-    frameAnchor,
-    y,
-    ...options,
-    dx: anchor === "left" ? +dx - offset + +insetLeft : +dx + offset - insetRight,
-    anchor: "start",
-    length: tickSize,
-    shape: anchor === "left" ? shapeTickLeft : shapeTickRight
-  });
+  return axisMark(
+    vectorY,
+    k,
+    data,
+    {
+      ariaLabel: `${k}-axis tick`,
+      ariaHidden: true
+    },
+    {
+      strokeWidth,
+      strokeLinecap,
+      strokeLinejoin,
+      facetAnchor,
+      frameAnchor,
+      y,
+      ...options,
+      dx: anchor === "left" ? +dx - offset + +insetLeft : +dx + offset - insetRight,
+      anchor: "start",
+      length: tickSize,
+      shape: anchor === "left" ? shapeTickLeft : shapeTickRight
+    }
+  );
 }
 
 function axisTickKx(
@@ -312,19 +321,28 @@ function axisTickKx(
     ...options
   }
 ) {
-  return axisMark(vectorX, k, anchor, `${k}-axis tick`, data, {
-    strokeWidth,
-    strokeLinejoin,
-    strokeLinecap,
-    facetAnchor,
-    frameAnchor,
-    x,
-    ...options,
-    dy: anchor === "bottom" ? +dy - offset - insetBottom : +dy + offset + +insetTop,
-    anchor: "start",
-    length: tickSize,
-    shape: anchor === "bottom" ? shapeTickBottom : shapeTickTop
-  });
+  return axisMark(
+    vectorX,
+    k,
+    data,
+    {
+      ariaLabel: `${k}-axis tick`,
+      ariaHidden: true
+    },
+    {
+      strokeWidth,
+      strokeLinejoin,
+      strokeLinecap,
+      facetAnchor,
+      frameAnchor,
+      x,
+      ...options,
+      dy: anchor === "bottom" ? +dy - offset - insetBottom : +dy + offset + +insetTop,
+      anchor: "start",
+      length: tickSize,
+      shape: anchor === "bottom" ? shapeTickBottom : shapeTickTop
+    }
+  );
 }
 
 function axisTextKy(
@@ -352,9 +370,8 @@ function axisTextKy(
   return axisMark(
     textY,
     k,
-    anchor,
-    `${k}-axis tick label`,
     data,
+    {ariaLabel: `${k}-axis tick label`},
     {
       facetAnchor,
       frameAnchor,
@@ -399,9 +416,8 @@ function axisTextKx(
   return axisMark(
     textX,
     k,
-    anchor,
-    `${k}-axis tick label`,
     data,
+    {ariaLabel: `${k}-axis tick label`},
     {
       facetAnchor,
       frameAnchor,
@@ -453,7 +469,7 @@ function gridKy(
     ...options
   }
 ) {
-  return axisMark(ruleY, k, anchor, `${k}-grid`, data, {y, x1, x2, ...gridDefaults(options)});
+  return axisMark(ruleY, k, data, {ariaLabel: `${k}-grid`, ariaHidden: true}, {y, x1, x2, ...gridDefaults(options)});
 }
 
 function gridKx(
@@ -468,7 +484,7 @@ function gridKx(
     ...options
   }
 ) {
-  return axisMark(ruleX, k, anchor, `${k}-grid`, data, {x, y1, y2, ...gridDefaults(options)});
+  return axisMark(ruleX, k, data, {ariaLabel: `${k}-grid`, ariaHidden: true}, {x, y1, y2, ...gridDefaults(options)});
 }
 
 function gridDefaults({
@@ -520,7 +536,7 @@ function labelOptions(
   };
 }
 
-function axisMark(mark, k, anchor, ariaLabel, data, options, initialize) {
+function axisMark(mark, k, data, properties, options, initialize) {
   let channels;
 
   function axisInitializer(data, facets, _channels, scales, dimensions, context) {
@@ -615,7 +631,7 @@ function axisMark(mark, k, anchor, ariaLabel, data, options, initialize) {
   } else {
     channels = {};
   }
-  m.ariaLabel = ariaLabel;
+  if (properties !== undefined) Object.assign(m, properties);
   if (m.clip === undefined) m.clip = false; // don’t clip axes by default
   return m;
 }