feat(a11y): add changes to allow for improved accessibility on charts (…

…#1054)
plouc · Sep 12, 2020 · 464185c · 464185c
1 parent ce9a172
commit 464185c
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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