Feature/accessibility group component

demo/demo-data.ts

@@ -91,3 +91,21 @@ export const accessibilityErrorBarData = [
   { x: 34, y: 65, error: 0.15 },
   { x: 43, y: 50, error: 0.2 }
 ];
+
+export const accessibilityGroupData = {
+  a: [
+    { x: 1, y: 1 },
+    { x: 2, y: 2 },
+    { x: 3, y: 5 }
+  ],
+  b: [
+    { x: 1, y: 2 },
+    { x: 2, y: 1 },
+    { x: 3, y: 7 }
+  ],
+  c: [
+    { x: 1, y: 3 },
+    { x: 2, y: 4 },
+    { x: 3, y: 9 }
+  ]
+};

demo/js/components/accessibility-demo.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { Curve } from "Packages/victory-line";
 import { VictoryLine } from "Packages/victory-line";
+import { VictoryGroup } from "Packages/victory-group";
 import { VictoryStack } from "Packages/victory-stack";
 import { VictoryChart } from "Packages/victory-chart";
 import { VictoryScatter } from "Packages/victory-scatter";
@@ -11,13 +12,21 @@ import { VictoryArea, Area } from "Packages/victory-area";
 import { VictoryVoronoi, Voronoi } from "Packages/victory-voronoi";
 import { ErrorBar, VictoryErrorBar } from "Packages/victory-errorbar";
 import { Candle, VictoryCandlestick } from "Packages/victory-candlestick";
-import { LineSegment, Whisker, Border, Point, VictoryLabel } from "Packages/victory-core";
+import {
+  LineSegment,
+  Whisker,
+  Border,
+  Point,
+  VictoryLabel,
+  VictoryAccessibleGroup
+} from "Packages/victory-core";
 import {
   accessibilityBarData,
   accessibilityBoxData,
   accessibilityPieData,
-  accessibilityLineData,
   accessibilityAreaData,
+  accessibilityLineData,
+  accessibilityGroupData,
   accessibilityScatterData,
   accessibilityVoronoiData,
   accessibilityErrorBarData,
@@ -34,22 +43,25 @@ const pageHeadingStyle = {
 
 const chartHeadingStyle = {
   marginBottom: "0px",
-  marginTop: "25px"
+  marginTop: "25px",
+  fontSize: "calc(1vw + 5px)"
 };
 
 const containerStyle = {
   display: "flex",
   flexFlow: "row wrap",
   alignItems: "center",
-  justifyContent: "flex-start"
+  justifyContent: "flex-start",
+  maxWidth: "1300px"
 };
 
 const chartContainerStyle = {
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
   width: "50%",
-  height: "50%"
+  height: "50%",
+  padding: "25px"
 };
 
 export default class App extends React.Component {
@@ -76,6 +88,7 @@ export default class App extends React.Component {
               />
             </VictoryChart>
           </div>
+
           {/** BOX PLOT */}
           <div style={chartContainerStyle}>
             <h3 style={chartHeadingStyle}>Boxplot</h3>
@@ -293,6 +306,38 @@ export default class App extends React.Component {
               />
             </VictoryChart>
           </div>
+
+          {/**ACCESSIBLE GROUP */}
+          <div style={chartContainerStyle}>
+            <h2 style={chartHeadingStyle}>Accessible Group</h2>
+            <VictoryChart domainPadding={{ x: 40 }}>
+              <VictoryGroup
+                offset={20}
+                groupComponent={
+                  <VictoryAccessibleGroup
+                    aria-label="victory group"
+                    desc="accessible bar group chart"
+                  />
+                }
+              >
+                <VictoryBar horizontal data={accessibilityGroupData.a} />
+                <VictoryBar
+                  horizontal
+                  style={{ data: { fill: "#c43a31", opacity: 0.9 } }}
+                  data={accessibilityGroupData.b}
+                  groupComponent={
+                    <VictoryAccessibleGroup
+                      aria-label="victory bar group 2"
+                      desc="accessible bar chart group 2"
+                      aria-describedby="accessible bar chart group 2 aria description"
+                      tabIndex={67}
+                    />
+                  }
+                />
+                <VictoryBar horizontal data={accessibilityGroupData.c} />
+              </VictoryGroup>
+            </VictoryChart>
+          </div>
         </div>
       </>
     );

demo/ts/components/accessibility-demo.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { isNumber } from "lodash";
 import { Curve } from "@packages/victory-line";
+import { VictoryGroup } from "@packages/victory-group";
 import { VictoryStack } from "@packages/victory-stack";
 import { VictoryLine } from "@packages/victory-line";
 import { VictoryBar, Bar } from "@packages/victory-bar";
@@ -12,13 +13,21 @@ import { VictoryBoxPlot } from "@packages/victory-box-plot";
 import { VictoryVoronoi, Voronoi } from "@packages/victory-voronoi";
 import { ErrorBar, VictoryErrorBar } from "@packages/victory-errorbar";
 import { Candle, VictoryCandlestick } from "@packages/victory-candlestick";
-import { LineSegment, Whisker, Border, Point, VictoryLabel } from "@packages/victory-core";
+import {
+  LineSegment,
+  Whisker,
+  Border,
+  Point,
+  VictoryLabel,
+  VictoryAccessibleGroup
+} from "@packages/victory-core";
 import {
   accessibilityBarData,
   accessibilityBoxData,
   accessibilityPieData,
-  accessibilityLineData,
   accessibilityAreaData,
+  accessibilityLineData,
+  accessibilityGroupData,
   accessibilityScatterData,
   accessibilityVoronoiData,
   accessibilityErrorBarData,
@@ -35,7 +44,8 @@ const pageHeadingStyle: React.CSSProperties = {
 
 const chartHeadingStyle: React.CSSProperties = {
   marginBottom: "0px",
-  marginTop: "25px"
+  marginTop: "25px",
+  fontSize: "calc(1vw + 5px)"
 };
 
 const containerStyle: React.CSSProperties = {
@@ -50,7 +60,8 @@ const chartContainerStyle: React.CSSProperties = {
   flexDirection: "column",
   alignItems: "center",
   width: "50%",
-  height: "50%"
+  height: "50%",
+  padding: "25px"
 };
 
 export const assignIndexValue = (index: number | string, value: number): number => {
@@ -66,6 +77,7 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
           <h3>Tabbable charts with aria-labels</h3>
         </div>
         <div className="demo" style={containerStyle}>
+          {/**BAR */}
           <div style={chartContainerStyle} data-testid="bar-accessibility-chart">
             <h3 style={chartHeadingStyle}>Bar chart</h3>
             <VictoryChart domainPadding={{ x: 40, y: 40 }}>
@@ -81,6 +93,8 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
               />
             </VictoryChart>
           </div>
+
+          {/** BOXPLOT */}
           <div style={chartContainerStyle}>
             <h3 style={chartHeadingStyle}>BoxPlot</h3>
             <VictoryChart domainPadding={{ x: 40, y: 40 }}>
@@ -137,10 +151,20 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
           {/** AREA */}
           <div style={chartContainerStyle}>
             <h3 style={chartHeadingStyle}>Area</h3>
-            <VictoryChart domainPadding={{ y: 10 }}>
-              <VictoryStack>
+            <VictoryChart>
+              <VictoryStack
+                groupComponent={
+                  <VictoryAccessibleGroup
+                    aria-label="stack graph"
+                    desc="stack graph description"
+                    aria-describedby="stack graph aria description, descId should match"
+                    tabIndex={67}
+                  />
+                }
+              >
                 <VictoryArea
                   data={accessibilityAreaData.a}
+                  style={{ data: { fill: "#c43a31" } }}
                   dataComponent={
                     <Area
                       ariaLabel={({ data }) => `area chart stack ${data[0]._stack}`}
@@ -149,6 +173,7 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
                   }
                 />
                 <VictoryArea
+                  style={{ data: { fill: "#c43a31", opacity: 0.9 } }}
                   data={accessibilityAreaData.b}
                   dataComponent={
                     <Area
@@ -159,6 +184,7 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
                 />
                 <VictoryArea
                   data={accessibilityAreaData.c}
+                  style={{ data: { fill: "#c43a31", opacity: 0.8 } }}
                   dataComponent={
                     <Area
                       ariaLabel={({ data }) => `area chart stack ${data[0]._stack}`}
@@ -168,6 +194,7 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
                 />
                 <VictoryArea
                   data={accessibilityAreaData.d}
+                  style={{ data: { fill: "#c43a31", opacity: 0.6 } }}
                   dataComponent={
                     <Area
                       ariaLabel={({ data }) => `area chart stack ${data[0]._stack}`}
@@ -299,6 +326,38 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
               />
             </VictoryChart>
           </div>
+
+          {/**ACCESSIBLE GROUP */}
+          <div style={chartContainerStyle}>
+            <h3 style={chartHeadingStyle}>Accessible Group</h3>
+            <VictoryChart domainPadding={{ x: 40 }}>
+              <VictoryGroup
+                offset={20}
+                groupComponent={
+                  <VictoryAccessibleGroup
+                    aria-label="victory group"
+                    desc="accessible bar group chart"
+                  />
+                }
+              >
+                <VictoryBar horizontal data={accessibilityGroupData.a} />
+                <VictoryBar
+                  horizontal
+                  style={{ data: { fill: "#c43a31", opacity: 0.9 } }}
+                  data={accessibilityGroupData.b}
+                  groupComponent={
+                    <VictoryAccessibleGroup
+                      aria-label="victory bar group 2"
+                      desc="accessible bar chart group 2"
+                      aria-describedby="accessible bar chart group 2 aria description"
+                      tabIndex={67}
+                    />
+                  }
+                />
+                <VictoryBar horizontal data={accessibilityGroupData.c} />
+              </VictoryGroup>
+            </VictoryChart>
+          </div>
         </div>
       </>
     );

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

@@ -271,6 +271,7 @@ export class VictoryContainer extends React.Component<VictoryContainerProps, any
 // #region Victory Clip Container
 
 export interface VictoryClipContainerProps {
+  "aria-label"?: string;
   children?: React.ReactElement | React.ReactElement[];
   circleComponent?: React.ReactElement;
   className?: string;
@@ -293,6 +294,21 @@ export class VictoryClipContainer extends React.Component<VictoryClipContainerPr
 
 // #endregion
 
+// #region Victory Accessibile Group
+
+export interface VictoryAccessibleGroupProps {
+  desc?: string;
+  "aria-describedby"?: string;
+  "aria-label": string;
+  children?: React.ReactElement | React.ReactElement[];
+  className?: string;
+  tabIndex?: number;
+}
+
+export class VictoryAccessibleGroup extends React.Component<VictoryAccessibleGroupProps, any> {}
+
+// #endregion
+
 // #region Victory Theme
 
 export type ThemeBaseProps = {

packages/victory-core/src/index.js

@@ -1,3 +1,4 @@
+export { default as VictoryAccessibleGroup } from "./victory-accessible-group/victory-accessible-group";
 export { default as VictoryAnimation } from "./victory-animation/victory-animation";
 export { default as VictoryContainer } from "./victory-container/victory-container";
 export { default as VictoryLabel } from "./victory-label/victory-label";

packages/victory-core/src/victory-accessible-group/victory-accessible-group.js

@@ -0,0 +1,46 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+class VictoryAccessibleGroup extends React.Component {
+  static displayName = "VictoryAccessibleGroup";
+  static propTypes = {
+    "aria-describedby": PropTypes.string,
+    "aria-label": PropTypes.string,
+    desc: PropTypes.string,
+    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+    className: PropTypes.string,
+    tabIndex: PropTypes.number
+  };
+
+  static defaultProps = {
+    className: "VictoryAccessibleGroup"
+  };
+
+  render() {
+    const { desc, children, className, tabIndex } = this.props;
+    const descId = desc && (this.props["aria-describedby"] || desc.split(" ").join("-"));
+
+    return desc ? (
+      <g
+        aria-label={this.props["aria-label"]}
+        aria-describedby={descId}
+        className={className}
+        tabIndex={tabIndex}
+      >
+        <desc id={descId}>{desc}</desc>
+        {children}
+      </g>
+    ) : (
+      <g
+        aria-label={this.props["aria-label"]}
+        aria-describedby={this.props["aria-describedby"]}
+        className={className}
+        tabIndex={tabIndex}
+      >
+        {children}
+      </g>
+    );
+  }
+}
+
+export default VictoryAccessibleGroup;