feat - aria-label applies correctly, bars can be tabbed individually

demo/js/app.js

@@ -4,6 +4,7 @@ import React from "react";
 import ReactDOM from "react-dom";
 import { keys } from "lodash";
 
+import AccessibilityDemo from "./components/accessibility-demo";
 import AreaDemo from "./components/victory-area-demo";
 import AxisDemo from "./components/victory-axis-demo";
 import BarDemo from "./components/victory-bar-demo";
@@ -40,6 +41,7 @@ import DraggableDemo from "./components/draggable-demo";
 import OuiaDemo from "./components/ouia-demo";
 
 const MAP = {
+  "/accessibility": { component: AccessibilityDemo, name: "AccessibilityDemo" },
   "/axis": { component: AxisDemo, name: "AxisDemo" },
   "/area": { component: AreaDemo, name: "AreaDemo" },
   "/bar": { component: BarDemo, name: "BarDemo" },

demo/js/components/accessibility-demo.js

@@ -0,0 +1,51 @@
+/*global window:false*/
+/*eslint-disable no-magic-numbers,react/no-multi-comp */
+import React from "react";
+import { VictoryChart } from "Packages/victory-chart/src/index";
+import { VictoryBar } from "Packages/victory-bar/src/index";
+
+export default class App extends React.Component {
+  constructor() {
+    super();
+  }
+
+  render() {
+    const containerStyle = {
+      display: "flex",
+      flexDirection: "row",
+      flexWrap: "wrap",
+      alignItems: "center",
+      justifyContent: "center",
+      maxWidth: "40%",
+      margin: "3%"
+    };
+
+    const chartContainerStyle = {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      width: "100%",
+      height: "100%"
+    };
+
+    return (
+      <div className="demo" style={containerStyle}>
+        <div style={chartContainerStyle}>
+          <h3>Tabbable with aria-labels bar chart</h3>
+          <VictoryChart domainPadding={{ x: 40, y: 40 }}>
+            <VictoryBar
+              data={[
+                { x: "Small", y: 1 },
+                { x: "Medium", y: 3 },
+                { x: "Large", y: 5 },
+                { x: "Larger", y: 7 }
+              ]}
+              ariaLabel={({ datum }) => `bar-value-${datum.x}`}
+              tabIndex={({ index }) => index + 1}
+            />
+          </VictoryChart>
+        </div>
+      </div>
+    );
+  }
+}

demo/ts/app.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { keys } from "lodash";
 
+import AccessibilityDemo from "./components/accessibility-demo";
 import AreaDemo from "./components/victory-area-demo";
 import AxisDemo from "./components/victory-axis-demo";
 import BarDemo from "./components/victory-bar-demo";
@@ -36,6 +37,7 @@ import ZoomContainerDemo from "./components/victory-zoom-container-demo";
 import OuiaDemo from "./components/ouia-demo";
 
 const MAP = {
+  "/accessibility": { component: AccessibilityDemo, name: "AccessibilityDemo"},
   "/area": { component: AreaDemo, name: "AreaDemo" },
   "/axis": { component: AxisDemo, name: "AxisDemo" },
   "/bar": { component: BarDemo, name: "BarDemo" },

demo/ts/components/accessibility-demo.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { VictoryChart } from "@packages/victory-chart";
+import { VictoryBar } from "@packages/victory-bar";
+
+type BarData = {
+  x: string | number;
+  y: string | number;
+}[][];
+
+interface VictoryBarDemoState {
+  barData: BarData;
+  numericBarData: BarData;
+}
+
+export default class VictoryAccessibilityDemo extends React.Component<any, VictoryBarDemoState> {
+  setStateInterval?: number = undefined;
+
+  constructor(props: any) {
+    super(props);
+  }
+
+  render() {
+    const containerStyle: React.CSSProperties = {
+      display: "flex",
+      flexDirection: "row",
+      flexWrap: "wrap",
+      alignItems: "center",
+      justifyContent: "flex-start"
+    };
+    const chartContainerStyle: React.CSSProperties = {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      width: "50%",
+      height: "50%"
+    };
+
+    return (
+      <div className="demo" style={containerStyle}>
+        <div style={chartContainerStyle} data-testId="bar-accessibility-chart">
+          <h3>Tabbable with aria-labels bar chart</h3>
+          <VictoryChart domainPadding={{ x: 40, y: 40 }}>
+            <VictoryBar
+              data={[
+                { x: "Small", y: 1 },
+                { x: "Medium", y: 3 },
+                { x: "Large", y: 5 },
+                { x: "Larger", y: 7 }
+              ]}
+              ariaLabel={({ datum }) => `bar-value-${datum.x}`}
+              tabIndex={({ index }) => index + 1}
+            />
+          </VictoryChart>
+        </div>
+      </div>
+    );
+  }
+}

packages/victory-bar/src/bar.js

@@ -95,8 +95,9 @@ const evaluateProps = (props) => {
   const desc = Helpers.evaluateProp(props.desc, props);
   const id = Helpers.evaluateProp(props.id, props);
   const tabIndex = Helpers.evaluateProp(props.tabIndex, props);
+  const ariaLabel = Helpers.evaluateProp(props.ariaLabel, props);
 
-  return assign({}, props, { style, barWidth, cornerRadius, desc, id, tabIndex });
+  return assign({}, props, { style, barWidth, cornerRadius, desc, id, tabIndex, ariaLabel });
 };
 
 const Bar = (props) => {
@@ -107,17 +108,18 @@ const Bar = (props) => {
     ? getPolarBarPath(props, cornerRadius)
     : getBarPath(props, barWidth, cornerRadius);
   const defaultTransform = polar && origin ? `translate(${origin.x}, ${origin.y})` : undefined;
-
   return React.cloneElement(props.pathComponent, {
     ...props.events,
     style,
     d: path,
-    transform: props.transform || defaultTransform,
+    "aria-label": props.ariaLabel,
     className: props.className,
-    role: props.role,
-    shapeRendering: props.shapeRendering,
     clipPath: props.clipPath,
     desc: props.desc,
+    index: props.index,
+    role: props.role,
+    shapeRendering: props.shapeRendering,
+    transform: props.transform || defaultTransform,
     tabIndex: props.tabIndex
   });
 };

packages/victory-bar/src/helper-methods.js

@@ -50,9 +50,9 @@ const getCalculatedValues = (props) => {
 const getBaseProps = (props, fallbackProps) => {
   const modifiedProps = Helpers.modifyProps(props, fallbackProps, "bar");
   props = assign({}, modifiedProps, getCalculatedValues(modifiedProps));
-
   const {
     alignment,
+    ariaLabel,
     barRatio,
     cornerRadius,
     data,
@@ -67,6 +67,7 @@ const getBaseProps = (props, fallbackProps) => {
     sharedEvents,
     standalone,
     style,
+    tabIndex,
     theme,
     width,
     labels,
@@ -97,11 +98,14 @@ const getBaseProps = (props, fallbackProps) => {
     const { x, y, y0, x0 } = getBarPosition(props, datum);
 
     const dataProps = {
+      ariaLabel,
       alignment,
       barRatio,
+      barWidth,
       cornerRadius,
       data,
       datum,
+      getPath,
       horizontal,
       index,
       polar,
@@ -110,12 +114,11 @@ const getBaseProps = (props, fallbackProps) => {
       style: style.data,
       width,
       height,
+      tabIndex,
       x,
       y,
       y0,
-      x0,
-      barWidth,
-      getPath
+      x0
     };
 
     childProps[eventKey] = {

packages/victory-bar/src/index.d.ts

@@ -2,6 +2,7 @@ import * as React from "react";
 import {
   EventPropTypeInterface,
   NumberOrCallback,
+  StringOrCallback,
   StringOrNumberOrCallback,
   VictoryCommonProps,
   VictoryCommonPrimitiveProps,
@@ -15,56 +16,60 @@ export type VictoryBarAlignmentType = "start" | "middle" | "end";
 
 export interface VictoryBarProps
   extends VictoryCommonProps,
-    VictoryDatableProps,
-    VictoryMultiLabelableProps {
+  VictoryDatableProps,
+  VictoryMultiLabelableProps {
   alignment?: VictoryBarAlignmentType;
+  ariaLabel?: StringOrCallback;
   barRatio?: number;
   barWidth?: NumberOrCallback;
   cornerRadius?:
-    | NumberOrCallback
-    | {
-        top?: NumberOrCallback;
-        topLeft?: NumberOrCallback;
-        topRight?: NumberOrCallback;
-        bottom?: NumberOrCallback;
-        bottomLeft?: NumberOrCallback;
-        bottomRight?: NumberOrCallback;
-      };
+  | NumberOrCallback
+  | {
+    top?: NumberOrCallback;
+    topLeft?: NumberOrCallback;
+    topRight?: NumberOrCallback;
+    bottom?: NumberOrCallback;
+    bottomLeft?: NumberOrCallback;
+    bottomRight?: NumberOrCallback;
+  };
   events?: EventPropTypeInterface<VictoryBarTTargetType, number | string | number[] | string[]>[];
   eventKey?: StringOrNumberOrCallback;
   horizontal?: boolean;
+  index?: number;
   style?: VictoryStyleInterface;
+  tabIndex?: NumberOrCallback;
 }
 
 /**
  * Draw SVG bar charts with React. VictoryBar is a composable component, so it doesn"t include axes
  * Check out VictoryChart for complete bar charts and more.
  */
-export class VictoryBar extends React.Component<VictoryBarProps, any> {}
+export class VictoryBar extends React.Component<VictoryBarProps, any> { }
 
 export interface BarProps extends VictoryCommonPrimitiveProps {
   alignment?: VictoryBarAlignmentType;
   barOffset?: number[];
   barRatio?: number;
   barWidth?: NumberOrCallback;
   cornerRadius?:
-    | NumberOrCallback
-    | {
-        top?: NumberOrCallback;
-        topLeft?: NumberOrCallback;
-        topRight?: NumberOrCallback;
-        bottom?: NumberOrCallback;
-        bottomLeft?: NumberOrCallback;
-        bottomRight?: NumberOrCallback;
-      };
+  | NumberOrCallback
+  | {
+    top?: NumberOrCallback;
+    topLeft?: NumberOrCallback;
+    topRight?: NumberOrCallback;
+    bottom?: NumberOrCallback;
+    bottomLeft?: NumberOrCallback;
+    bottomRight?: NumberOrCallback;
+  };
   datum?: any;
   getPath?: Function;
   horizontal?: boolean;
+  index?: number;
   pathComponent?: React.ReactElement;
   width?: number;
   x?: number;
   y?: number;
   y0?: number;
 }
 
-export class Bar extends React.Component<BarProps, any> {}
+export class Bar extends React.Component<BarProps, any> { }