From 464185c8758f72880c40778f1507edff5bfef697 Mon Sep 17 00:00:00 2001
From: erik-1234 <68087803+erik-1234@users.noreply.github.com>
Date: Sat, 12 Sep 2020 07:31:45 -0700
Subject: [PATCH] feat(a11y): add changes to allow for improved accessibility
 on charts (#1054)

---
 packages/axes/index.d.ts                   | 1 +
 packages/axes/src/components/Axis.js       | 4 +++-
 packages/axes/src/props.js                 | 1 +
 packages/bar/index.d.ts                    | 2 ++
 packages/bar/src/Bar.js                    | 3 +++
 packages/bar/src/props.js                  | 4 ++++
 packages/core/src/components/SvgWrapper.js | 5 +++--
 7 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/axes/index.d.ts b/packages/axes/index.d.ts
index a49fdb6234..df6807b632 100644
--- a/packages/axes/index.d.ts
+++ b/packages/axes/index.d.ts
@@ -37,6 +37,7 @@ declare module '@nivo/axes' {
         legend?: React.ReactNode
         legendPosition?: 'start' | 'middle' | 'end'
         legendOffset?: number
+        ariaHidden?: boolean
     }
 
     export interface GridProps extends Dimensions, Scales {
diff --git a/packages/axes/src/components/Axis.js b/packages/axes/src/components/Axis.js
index 8a77bb191c..922794cd20 100644
--- a/packages/axes/src/components/Axis.js
+++ b/packages/axes/src/components/Axis.js
@@ -33,6 +33,7 @@ const Axis = ({
     legendPosition,
     legendOffset,
     onClick,
+    ariaHidden,
 }) => {
     const theme = useTheme()
 
@@ -133,7 +134,7 @@ const Axis = ({
     })
 
     return (
-        <animated.g transform={animatedProps.transform}>
+        <animated.g transform={animatedProps.transform} aria-hidden={ariaHidden}>
             {transitions.map(({ item: tick, props: transitionProps, key }, tickIndex) => {
                 return React.createElement(renderTick, {
                     tickIndex,
@@ -176,6 +177,7 @@ Axis.propTypes = {
     legendPosition: PropTypes.oneOf(['start', 'middle', 'end']).isRequired,
     legendOffset: PropTypes.number.isRequired,
     onClick: PropTypes.func,
+    ariaHidden: PropTypes.bool,
 }
 Axis.defaultProps = {
     x: 0,
diff --git a/packages/axes/src/props.js b/packages/axes/src/props.js
index 85d8d6525d..0d555f40e8 100644
--- a/packages/axes/src/props.js
+++ b/packages/axes/src/props.js
@@ -25,6 +25,7 @@ export const axisPropTypes = {
     legend: PropTypes.node,
     legendPosition: PropTypes.oneOf(['start', 'middle', 'end']),
     legendOffset: PropTypes.number,
+    ariaHidden: PropTypes.bool,
 }
 
 export const axisPropType = PropTypes.shape(axisPropTypes)
diff --git a/packages/bar/index.d.ts b/packages/bar/index.d.ts
index 5a01a4a365..6cd0cca79f 100644
--- a/packages/bar/index.d.ts
+++ b/packages/bar/index.d.ts
@@ -132,6 +132,8 @@ declare module '@nivo/bar' {
         legends: ({ dataFrom: 'indexes' | 'keys' } & LegendProps)[]
 
         markers: CartesianMarkerProps[]
+
+        role: string
     }>
 
     export enum BarLayerType {
diff --git a/packages/bar/src/Bar.js b/packages/bar/src/Bar.js
index 654fd0eea8..60fc059ad9 100644
--- a/packages/bar/src/Bar.js
+++ b/packages/bar/src/Bar.js
@@ -108,6 +108,8 @@ const Bar = props => {
         animate,
         motionStiffness,
         motionDamping,
+
+        role,
     } = props
     const options = {
         layout,
@@ -315,6 +317,7 @@ const Bar = props => {
                         margin={margin}
                         defs={boundDefs}
                         theme={theme}
+                        role={role}
                     >
                         {layers.map((layer, i) => {
                             if (typeof layer === 'function') {
diff --git a/packages/bar/src/props.js b/packages/bar/src/props.js
index 9f19ce79e8..68f7e2095b 100644
--- a/packages/bar/src/props.js
+++ b/packages/bar/src/props.js
@@ -92,6 +92,8 @@ export const BarPropTypes = {
     ).isRequired,
 
     pixelRatio: PropTypes.number.isRequired,
+
+    role: PropTypes.string,
 }
 
 export const BarDefaultProps = {
@@ -141,4 +143,6 @@ export const BarDefaultProps = {
 
     pixelRatio:
         global.window && global.window.devicePixelRatio ? global.window.devicePixelRatio : 1,
+
+    role: 'img',
 }
diff --git a/packages/core/src/components/SvgWrapper.js b/packages/core/src/components/SvgWrapper.js
index e144084659..5ef2ba596d 100644
--- a/packages/core/src/components/SvgWrapper.js
+++ b/packages/core/src/components/SvgWrapper.js
@@ -11,11 +11,11 @@ import PropTypes from 'prop-types'
 import { Defs } from './defs'
 import { useTheme } from '../theming'
 
-const SvgWrapper = ({ width, height, margin, defs, children }) => {
+const SvgWrapper = ({ width, height, margin, defs, children, role }) => {
     const theme = useTheme()
 
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" role="img" width={width} height={height}>
+        <svg xmlns="http://www.w3.org/2000/svg" role={role} width={width} height={height}>
             <Defs defs={defs} />
             <rect width={width} height={height} fill={theme.background} />
             <g transform={`translate(${margin.left},${margin.top})`}>{children}</g>
@@ -32,6 +32,7 @@ SvgWrapper.propTypes = {
     }).isRequired,
     defs: PropTypes.array,
     children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+    role: PropTypes.string,
 }
 
 export default SvgWrapper