[A11y] add aria-hidden attributes to XYPlot (#273)

* add aria-hidden attributes to XYPlot elements

* more granual application of aria-hidden

src/AreaChart.js

@@ -223,7 +223,7 @@ export default class AreaChart extends React.Component {
     }
 
     return (
-      <g className="rct-area-chart">
+      <g className="rct-area-chart" aria-hidden="true">
         <path
           className={`rct-area-chart-path ${pathClassName}`}
           d={areaPathStr}

src/AreaHeatmap.js

@@ -139,7 +139,7 @@ export default class AreaHeatmap extends React.Component {
     };
 
     return (
-      <g className="rct-area-heatmap-chart" {...handlers}>
+      <g className="rct-area-heatmap-chart" aria-hidden="true" {...handlers}>
         <rect
           x="0"
           y="0"

src/Bar.js

@@ -186,6 +186,7 @@ export default class Bar extends React.Component {
 
     const rect = (
       <rect
+        aria-hidden="true"
         {...{
           x: rectX,
           y: rectY,
@@ -216,7 +217,7 @@ export default class Bar extends React.Component {
 
     if (showLabel) {
       return (
-        <g>
+        <g aria-hidden="true">
           {rect}
           {text}
         </g>

src/ColorHeatmap.js

@@ -185,7 +185,7 @@ export default class ColorHeatmap extends React.Component {
     }
 
     return (
-      <g className="rct-color-heatmap-chart">
+      <g className="rct-color-heatmap-chart" aria-hidden="true">
         {data.map((d, i) => {
           const color = colorScale(valueAccessor(d));
           const style = { ...getValue(rectStyle, d, i), fill: color };

src/FunnelChart.js

@@ -125,7 +125,7 @@ export default class FunnelChart extends React.Component {
     const colors = scaleOrdinal(schemeCategory10).domain(range(10));
 
     return (
-      <g className="rct-funnel-chart">
+      <g className="rct-funnel-chart" aria-hidden="true">
         {data.map((d, i) => {
           if (i === 0) return null;
           const pathStr = funnelArea([data[i - 1], d]);

src/LineChart.js

@@ -94,7 +94,7 @@ export default class LineChart extends React.Component {
       .y((d, i) => yScale(getValue(y, d, i)))(data);
 
     return (
-      <g className={`rct-line-chart ${lineClassName}`}>
+      <g className={`rct-line-chart ${lineClassName}`} aria-hidden="true">
         <path className="rct-line-path" d={pathStr} style={lineStyle} />
       </g>
     );

src/MarkerLineChart.js

@@ -331,7 +331,7 @@ export default class MarkerLineChart extends React.Component {
   render() {
     const tickType = getTickType(this.props);
     return (
-      <g className="rct-marker-line-chart">
+      <g className="rct-marker-line-chart" aria-hidden="true">
         {tickType === 'RangeValue'
           ? this.props.data.map(this.renderRangeValueLine)
           : this.props.data.map(this.renderValueValueLine)}

src/RangeBarChart.js

@@ -234,7 +234,7 @@ export default class RangeBarChart extends React.Component {
     } = this.props;
 
     return (
-      <g>
+      <g aria-hidden="true">
         {data.map((d, i) => {
           const [onMouseEnter, onMouseMove, onMouseLeave, onClick] = [
             'onMouseEnterBar',

src/RangeRect.js

@@ -112,6 +112,7 @@ export default class RangeRect extends React.Component {
 
     return (
       <rect
+        aria-hidden="true"
         {...{
           x: rectX,
           y: rectY,

src/ScatterPlot.js

@@ -163,6 +163,6 @@ export default class ScatterPlot extends React.Component {
   };
 
   render() {
-    return <g>{this.props.data.map(this.renderPoint)}</g>;
+    return <g aria-hidden="true">{this.props.data.map(this.renderPoint)}</g>;
   }
 }

src/XAxis.js

@@ -238,6 +238,7 @@ export default class XAxis extends React.Component {
     return (
       <g
         className="rct-chart-axis rct-chart-axis-x"
+        aria-hidden="true"
         onMouseMove={this.handleOnMouseMove}
         onMouseEnter={this.handleOnMouseEnter}
         onMouseLeave={this.handleOnMouseLeave}

src/XAxisLabels.js

@@ -361,6 +361,7 @@ class XAxisLabels extends React.Component {
           return (
             <g
               key={`x-axis-label-${i}`}
+              aria-hidden="true"
               {...{ onMouseEnter, onMouseMove, onMouseLeave, onClick }}
             >
               {/* <XAxisLabelDebugRect {...{x, y, label}}/> */}

src/XAxisTitle.js

@@ -139,7 +139,10 @@ export default class XAxisTitle extends React.Component {
         : '-0.2em';
 
     return (
-      <g transform={`translate(${translateX},${translateY})`}>
+      <g
+        transform={`translate(${translateX},${translateY})`}
+        aria-hidden="true"
+      >
         <text
           style={{ ...style, textAnchor }}
           transform={`rotate(${rotate})`}

src/XGrid.js

@@ -49,7 +49,7 @@ export default class XGrid extends React.Component {
     const className = `rct-chart-grid-line ${lineClassName || ''}`;
 
     return (
-      <g className="rct-chart-grid-x">
+      <g className="rct-chart-grid-x" aria-hidden="true">
         {ticks.map((tick, i) => {
           return (
             <XLine

src/XLine.js

@@ -81,6 +81,7 @@ export default class XLine extends React.Component {
 
     return (
       <line
+        aria-hidden="true"
         {...{
           x1: lineX,
           x2: lineX,

src/XTicks.js

@@ -114,7 +114,7 @@ export default class XTicks extends React.Component {
         : `translate(0, ${-spacingTop || 0})`;
 
     return (
-      <g className="rct-chart-ticks-x" transform={transform}>
+      <g className="rct-chart-ticks-x" transform={transform} aria-hidden="true">
         {ticks.map((tick, i) => {
           const x1 = xScale(tick);
           const y2 = placement === 'above' ? -tickLength : tickLength;

src/XYPlot.js

@@ -44,14 +44,14 @@ function getMouseOptions(
   const xValue = !inRange(innerX, 0, chartSize.width)
     ? null
     : xScaleType === 'ordinal'
-      ? invertPointScale(xScale, innerX)
-      : xScale.invert(innerX);
+    ? invertPointScale(xScale, innerX)
+    : xScale.invert(innerX);
 
   const yValue = !inRange(innerY, 0, chartSize.height)
     ? null
     : yScaleType === 'ordinal'
-      ? invertPointScale(yScale, innerY)
-      : yScale.invert(innerY);
+    ? invertPointScale(yScale, innerY)
+    : yScale.invert(innerY);
 
   return {
     event,
@@ -212,7 +212,7 @@ class XYPlot extends React.Component {
   onMouseUp = this.onXYMouseEvent.bind(this, 'onMouseUp');
   onClick = this.onXYMouseEvent.bind(this, 'onClick');
   onMouseEnter = this.onXYMouseEvent.bind(this, 'onMouseEnter');
-  onMouseLeave = this.onXYMouseEvent.bind(this, 'onMouseLeave')
+  onMouseLeave = this.onXYMouseEvent.bind(this, 'onMouseLeave');
 
   render() {
     const {
@@ -295,7 +295,11 @@ class XYPlot extends React.Component {
         {...{ width, height, className, style: xyPlotContainerStyle }}
         {...handlers}
       >
-        <rect className="rct-chart-background" {...{ width, height }} />
+        <rect
+          className="rct-chart-background"
+          {...{ width, height }}
+          aria-hidden="true"
+        />
         <g
           transform={`translate(${marginLeft + spacingLeft}, ${marginTop +
             spacingTop})`}
@@ -305,6 +309,7 @@ class XYPlot extends React.Component {
             transform={`translate(${-spacingLeft}, ${-spacingTop})`}
             className="rct-plot-background"
             style={xyPlotStyle}
+            aria-hidden="true"
             {...panelSize}
           />
           {React.Children.map(this.props.children, child => {

src/YAxis.js

@@ -229,6 +229,7 @@ export default class YAxis extends React.Component {
         onMouseEnter={this.handleOnMouseEnter}
         onMouseLeave={this.handleOnMouseLeave}
         onClick={this.handleOnClick}
+        aria-hidden="true"
       >
         {showGrid ? <YGrid {...gridProps} /> : null}
 

src/YAxisLabels.js

@@ -298,7 +298,11 @@ class YAxisLabels extends React.Component {
         : `translate(${width + spacingRight}, 0)`;
 
     return (
-      <g className="rct-chart-value-labels-y" transform={transform}>
+      <g
+        className="rct-chart-value-labels-y"
+        transform={transform}
+        aria-hidden="true"
+      >
         {labels.map((label, i) => {
           const y = yScale(label.value) + offset;
           const x = placement === 'before' ? -distance : distance;

src/YAxisTitle.js

@@ -137,7 +137,10 @@ export default class YAxisTitle extends React.Component {
         : null;
 
     return (
-      <g transform={`translate(${translateX},${translateY})`}>
+      <g
+        transform={`translate(${translateX},${translateY})`}
+        aria-hidden="true"
+      >
         <text
           style={{ ...style, textAnchor }}
           transform={`rotate(${rotate})`}

src/YGrid.js

@@ -47,7 +47,7 @@ export default class YGrid extends React.Component {
     const className = `rct-chart-grid-line ${lineClassName || ''}`;
 
     return (
-      <g className="rct-chart-grid-y">
+      <g className="rct-chart-grid-y" aria-hidden="true">
         {ticks.map((tick, i) => {
           return (
             <YLine

src/YLine.js

@@ -70,6 +70,7 @@ export default class YLine extends React.Component {
 
     return (
       <line
+        aria-hidden="true"
         {...{
           x1: -spacingLeft,
           x2: lineX,

src/YTicks.js

@@ -113,7 +113,7 @@ export default class YTicks extends React.Component {
         : `translate(${-spacingLeft || 0}, 0)`;
 
     return (
-      <g className="rct-chart-ticks-y" transform={transform}>
+      <g className="rct-chart-ticks-y" transform={transform} aria-hidden="true">
         {ticks.map((tick, i) => {
           const y1 = yScale(tick);
           const x2 = placement === 'before' ? -tickLength : tickLength;