finish tests, errorbar and candlestick

FormidableLabs · Oct 5, 2020 · cdbd90c · cdbd90c
1 parent cdfdf8a
commit cdbd90c
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 22 deletions.
diff --git a/demo/demo-data.ts b/demo/demo-data.ts
@@ -12,11 +12,11 @@ export const accessibilityBarData = [
 ];
 
 export const accessibilityBoxData = [
-  { x: "red", y: [5, 10, 9, 2] },
-  { x: "blue", y: [1, 15, 6, 8] },
-  { x: "green", y: [3, 5, 6, 9] },
-  { x: "yellow", y: [5, 20, 8, 12] },
-  { x: "white", y: [2, 11, 12, 13] }
+  { x: 1, y: [5, 10, 9, 2] },
+  { x: 2, y: [1, 15, 6, 8] },
+  { x: 3, y: [3, 5, 6, 9] },
+  { x: 4, y: [5, 20, 8, 12] },
+  { x: 5, y: [2, 11, 12, 13] }
 ];
 
 export const accessibilityAreaData = {
@@ -75,18 +75,18 @@ export const accessibilityLineDemo = [
 ];
 
 export const accessibilityVoronoiData = [
-  { x: 1, y: 2 },
-  { x: 2, y: 3 },
-  { x: 3, y: 5 },
-  { x: 4, y: 4 },
-  { x: 5, y: 7 }
+  { x: 11, y: 20 },
+  { x: 21, y: 30 },
+  { x: 31, y: 50 },
+  { x: 42, y: 40 },
+  { x: 52, y: 70 }
 ];
 
 export const accessibilityCandlestickDemo = [
-  { x: new Date(2016, 6, 1), open: 20, close: 43, high: 66, low: 7 },
-  { x: new Date(2016, 6, 2), open: 80, close: 40, high: 120, low: 10 },
-  { x: new Date(2016, 6, 3), open: 50, close: 80, high: 90, low: 20 },
-  { x: new Date(2016, 6, 4), open: 70, close: 22, high: 70, low: 5 }
+  { x: "6/1", open: 20, close: 43, high: 66, low: 7 },
+  { x: "6/2", open: 80, close: 40, high: 120, low: 10 },
+  { x: "6/3", open: 50, close: 80, high: 90, low: 20 },
+  { x: "6/4", open: 70, close: 22, high: 70, low: 5 }
 ];
 
 export const accessibilityErrorBarDemo = [

diff --git a/demo/js/components/accessibility-demo.js b/demo/js/components/accessibility-demo.js
@@ -62,7 +62,7 @@ export default class App extends React.Component {
         <div className="demo" style={containerStyle}>
           {/** BAR CHART */}
           <div style={chartContainerStyle}>
-            <h3 style={chartHeadingStyle}> Bar </h3>
+            <h3 style={chartHeadingStyle}>Bar</h3>
             <VictoryChart domainPadding={{ x: 40, y: 40 }}>
               <VictoryBar
                 style={{ data: { fill: "#c43a31" } }}
@@ -78,7 +78,7 @@ export default class App extends React.Component {
           </div>
           {/** BOX PLOT */}
           <div style={chartContainerStyle}>
-            <h3 style={chartHeadingStyle}> Box plot </h3>
+            <h3 style={chartHeadingStyle}>Boxplot</h3>
             <VictoryChart domainPadding={{ x: 40, y: 40 }}>
               <VictoryBoxPlot
                 /** datum props available w/example values:
@@ -132,7 +132,7 @@ export default class App extends React.Component {
 
           {/** AREA */}
           <div style={chartContainerStyle}>
-            <h3 style={chartHeadingStyle}> Area </h3>
+            <h3 style={chartHeadingStyle}>Area</h3>
             <VictoryChart domainPadding={{ y: 10 }}>
               <VictoryStack>
                 <VictoryArea
@@ -177,7 +177,7 @@ export default class App extends React.Component {
 
           {/** LINE */}
           <div style={chartContainerStyle}>
-            <h3 style={chartHeadingStyle}> Line </h3>
+            <h3 style={chartHeadingStyle}>Line</h3>
             <VictoryChart domain={{ x: [0, 6], y: [0, 7] }}>
               <VictoryLine
                 data={accessibilityLineDemo}

diff --git a/demo/ts/components/accessibility-demo.tsx b/demo/ts/components/accessibility-demo.tsx
@@ -67,7 +67,7 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
         </div>
         <div className="demo" style={containerStyle}>
           <div style={chartContainerStyle} data-testid="bar-accessibility-chart">
-            <h3 style={chartHeadingStyle}> Bar chart</h3>
+            <h3 style={chartHeadingStyle}>Bar chart</h3>
             <VictoryChart domainPadding={{ x: 40, y: 40 }}>
               <VictoryBar
                 style={{ data: { fill: "#c43a31" } }}
@@ -82,7 +82,7 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
             </VictoryChart>
           </div>
           <div style={chartContainerStyle}>
-            <h3 style={chartHeadingStyle}> Box plot </h3>
+            <h3 style={chartHeadingStyle}>BoxPlot</h3>
             <VictoryChart domainPadding={{ x: 40, y: 40 }}>
               <VictoryBoxPlot
                 minLabels
@@ -136,7 +136,7 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
 
           {/** AREA */}
           <div style={chartContainerStyle}>
-            <h3 style={chartHeadingStyle}> Area </h3>
+            <h3 style={chartHeadingStyle}>Area</h3>
             <VictoryChart domainPadding={{ y: 10 }}>
               <VictoryStack>
                 <VictoryArea
@@ -181,7 +181,7 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
 
           {/** LINE */}
           <div style={chartContainerStyle}>
-            <h3 style={chartHeadingStyle}> Line </h3>
+            <h3 style={chartHeadingStyle}>Line</h3>
             <VictoryChart domain={{ x: [0, 6], y: [1, 7] }}>
               <VictoryLine
                 data={accessibilityLineDemo}

diff --git a/test/client/spec/victory-candlestick/victory-candlestick.spec.js b/test/client/spec/victory-candlestick/victory-candlestick.spec.js
@@ -199,5 +199,38 @@ describe("components/victory-candlestick", () => {
         }
       });
     });
+
+    it("adds an aria-label and tabIndex to Candle primitive", () => {
+      const data = [
+        { x: new Date(2016, 6, 1), open: 20, close: 43, high: 66, low: 7 },
+        { x: new Date(2016, 6, 2), open: 80, close: 40, high: 120, low: 10 },
+        { x: new Date(2016, 6, 3), open: 50, close: 80, high: 90, low: 20 }
+      ];
+      const wrapper = mount(
+        <VictoryCandlestick
+          data={data}
+          dataComponent={
+            <Candle
+              ariaLabel={({ datum }) => `open ${datum.open}, close ${datum.close}`}
+              tabIndex={({ index }) => index + 5}
+            />
+          }
+        />
+      );
+
+      expect(wrapper.find("rect")).to.have.length(3);
+      expect(wrapper.find("line")).to.have.length(6);
+      wrapper.find("rect").forEach((p, i) => {
+        expect(p.prop("aria-label")).to.equal(`open ${data[i].open}, close ${data[i].close}`);
+        expect(p.prop("tabIndex")).to.equal(i + 5);
+      });
+      wrapper.find("line").forEach((p, i) => {
+        const dataI = Math.floor(i / 2);
+        expect(p.prop("aria-label")).to.equal(
+          `open ${data[dataI].open}, close ${data[dataI].close}`
+        );
+        expect(p.prop("tabIndex")).to.equal(dataI + 5);
+      });
+    });
   });
 });
diff --git a/test/client/spec/victory-errorbars/victory-errorbars.spec.js b/test/client/spec/victory-errorbars/victory-errorbars.spec.js
@@ -816,5 +816,35 @@ describe("components/victory-errorbar", () => {
         expect(`${clickHandler.args[index][2]}`).to.eql(`${index}`);
       });
     });
+    describe("accessibility", () => {
+      it("adds an aria label-label and tabIndex to Error Bar primitive", () => {
+        const data = [
+          { x: 35, y: 50, error: 0.2 },
+          { x: 10, y: 43, error: 0.15 },
+          { x: 45, y: 65, error: 0.5 }
+        ];
+        const wrapper = mount(
+          <VictoryErrorBar
+            data={data}
+            dataComponent={
+              <ErrorBar
+                ariaLabel={({ datum }) => `error bar chart, x ${datum.x}`}
+                tabIndex={({ index }) => index + 2}
+              />
+            }
+          />
+        );
+
+        expect(wrapper.find("g")).to.have.length(4);
+        // first "g" holds the datagroup, child "g"s represent each data point, so we remove the first "g"
+        wrapper
+          .find("g")
+          .slice(1)
+          .forEach((g, i) => {
+            expect(g.prop("aria-label")).to.equal(`error bar chart, x ${data[i].x}`);
+            expect(g.prop("tabIndex")).to.equal(i + 2);
+          });
+      });
+    });
   });
 });