From c729b7c452ce10d91ad06f9ad8ed71cf71798af8 Mon Sep 17 00:00:00 2001 From: ljones87 Date: Tue, 6 Oct 2020 11:38:14 -0600 Subject: [PATCH 1/4] feat - accessiblity group component passes props correctly, update vic-clip-cont --- demo/demo-data.ts | 19 +++++++ demo/js/components/accessibility-demo.js | 40 ++++++++++++- demo/ts/components/accessibility-demo.tsx | 56 +++++++++++++++++-- packages/victory-core/src/index.d.ts | 20 +++++++ packages/victory-core/src/index.js | 1 + .../victory-accessibility-group.js | 42 ++++++++++++++ .../victory-clip-container.js | 17 +++--- .../victory-accessibility-group.spec.js | 11 ++++ 8 files changed, 191 insertions(+), 15 deletions(-) create mode 100644 packages/victory-core/src/victory-accessibility-group/victory-accessibility-group.js create mode 100644 test/client/spec/victory-core/victory-accessibility-group/victory-accessibility-group.spec.js diff --git a/demo/demo-data.ts b/demo/demo-data.ts index 0ce6d4c40..06c599cb3 100644 --- a/demo/demo-data.ts +++ b/demo/demo-data.ts @@ -91,3 +91,22 @@ 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 } + ] + +} \ No newline at end of file diff --git a/demo/js/components/accessibility-demo.js b/demo/js/components/accessibility-demo.js index b18d0aedc..c3e048621 100644 --- a/demo/js/components/accessibility-demo.js +++ b/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, + VictoryAccessibilityGroup +} from "Packages/victory-core"; import { accessibilityBarData, accessibilityBoxData, accessibilityPieData, - accessibilityLineData, accessibilityAreaData, + accessibilityLineData, + accessibilityGroupData, accessibilityScatterData, accessibilityVoronoiData, accessibilityErrorBarData, @@ -76,6 +85,7 @@ export default class App extends React.Component { /> + {/** BOX PLOT */}

Boxplot

@@ -293,6 +303,32 @@ export default class App extends React.Component { />
+ + {/**ACCESSIBILITYGROUP */} +
+

Accessibility Group

+ + + } + > + + + + + +
); diff --git a/demo/ts/components/accessibility-demo.tsx b/demo/ts/components/accessibility-demo.tsx index 3d4af6d1d..7f0d7a928 100644 --- a/demo/ts/components/accessibility-demo.tsx +++ b/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, + VictoryAccessibilityGroup +} from "@packages/victory-core"; import { accessibilityBarData, accessibilityBoxData, accessibilityPieData, - accessibilityLineData, accessibilityAreaData, + accessibilityLineData, + accessibilityGroupData, accessibilityScatterData, accessibilityVoronoiData, accessibilityErrorBarData, @@ -42,7 +51,8 @@ const containerStyle: React.CSSProperties = { display: "flex", flexFlow: "row wrap", alignItems: "center", - justifyContent: "flex-start" + justifyContent: "flex-start", + margin: "0 20px" }; const chartContainerStyle: React.CSSProperties = { @@ -50,7 +60,8 @@ const chartContainerStyle: React.CSSProperties = { flexDirection: "column", alignItems: "center", width: "50%", - height: "50%" + height: "50%", + padding: "50px" }; export const assignIndexValue = (index: number | string, value: number): number => { @@ -65,7 +76,8 @@ export default class VictoryAccessibilityDemo extends React.Component {

Tabbable charts with aria-labels

-
+
+ {/**BAR */}

Bar chart

@@ -81,6 +93,8 @@ export default class VictoryAccessibilityDemo extends React.Component { />
+ + {/** BOXPLOT */}

BoxPlot

@@ -137,10 +151,11 @@ export default class VictoryAccessibilityDemo extends React.Component { {/** AREA */}

Area

- + `area chart stack ${data[0]._stack}`} @@ -149,6 +164,7 @@ export default class VictoryAccessibilityDemo extends React.Component { } /> { /> `area chart stack ${data[0]._stack}`} @@ -168,6 +185,7 @@ export default class VictoryAccessibilityDemo extends React.Component { /> `area chart stack ${data[0]._stack}`} @@ -299,6 +317,32 @@ export default class VictoryAccessibilityDemo extends React.Component { />
+ + {/**ACCESSIBILITYGROUP */} +
+

Accessibility Group

+ + + } + > + + + + + +
); diff --git a/packages/victory-core/src/index.d.ts b/packages/victory-core/src/index.d.ts index 3e647634c..fa3c70dda 100644 --- a/packages/victory-core/src/index.d.ts +++ b/packages/victory-core/src/index.d.ts @@ -271,6 +271,7 @@ export class VictoryContainer extends React.Component {} + +// #endregion + // #region Victory Theme export type ThemeBaseProps = { diff --git a/packages/victory-core/src/index.js b/packages/victory-core/src/index.js index 3e5f4f3b8..f9c2729d5 100644 --- a/packages/victory-core/src/index.js +++ b/packages/victory-core/src/index.js @@ -1,3 +1,4 @@ +export { default as VictoryAccessibilityGroup } from "./victory-accessibility-group/victory-accessibility-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"; diff --git a/packages/victory-core/src/victory-accessibility-group/victory-accessibility-group.js b/packages/victory-core/src/victory-accessibility-group/victory-accessibility-group.js new file mode 100644 index 000000000..64ba0d270 --- /dev/null +++ b/packages/victory-core/src/victory-accessibility-group/victory-accessibility-group.js @@ -0,0 +1,42 @@ +import React from "react"; +import PropTypes from "prop-types"; +// import CustomPropTypes from "../victory-util/prop-types"; +// import Helpers from "../victory-util/helpers"; +import { assign /*defaults, isObject, uniqueId */ } from "lodash"; + +class VictoryAccessibilityGroup extends React.Component { + static displayName = "VictoryAccessibilityGroup"; + static role = "container"; + static propTypes = { + "aria-describedby": PropTypes.string, + "aria-label": PropTypes.string, + desc: PropTypes.string, + descId: PropTypes.string, + children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]), + className: PropTypes.string, + tabIndex: PropTypes.number + }; + + static defaultProps = { + className: "VictoryAccessibilityGroup" + }; + + render() { + const { desc, children, className, descId, tabIndex } = this.props; + + return desc ? ( + + + {desc} + + {children} + + ) : ( + + {children} + + ); + } +} + +export default VictoryAccessibilityGroup; diff --git a/packages/victory-core/src/victory-clip-container/victory-clip-container.js b/packages/victory-core/src/victory-clip-container/victory-clip-container.js index d6b46b263..77a9cea78 100644 --- a/packages/victory-core/src/victory-clip-container/victory-clip-container.js +++ b/packages/victory-core/src/victory-clip-container/victory-clip-container.js @@ -11,6 +11,7 @@ export default class VictoryClipContainer extends React.Component { static displayName = "VictoryClipContainer"; static role = "container"; static propTypes = { + "aria-label": PropTypes.string, children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]), circleComponent: PropTypes.element, className: PropTypes.string, @@ -30,6 +31,7 @@ export default class VictoryClipContainer extends React.Component { polar: PropTypes.bool, radius: CustomPropTypes.nonNegative, style: PropTypes.object, + tabIndex: PropTypes.number, transform: PropTypes.string, translateX: PropTypes.number, translateY: PropTypes.number @@ -61,7 +63,7 @@ export default class VictoryClipContainer extends React.Component { } renderClippedGroup(props, clipId) { - const { style, events, transform, children, className, groupComponent } = props; + const { style, events, transform, children, className, groupComponent, tabIndex } = props; const clipComponent = this.renderClipComponent(props, clipId); const groupProps = assign( { @@ -73,17 +75,18 @@ export default class VictoryClipContainer extends React.Component { }, events ); - return React.cloneElement(groupComponent, groupProps, [ - clipComponent, - ...React.Children.toArray(children) - ]); + return React.cloneElement( + groupComponent, + { ...groupProps, "aria-label": props[("aria-label", tabIndex)] }, + [clipComponent, ...React.Children.toArray(children)] + ); } renderGroup(props) { - const { style, events, transform, children, className, groupComponent } = props; + const { style, events, transform, children, className, groupComponent, tabIndex } = props; return React.cloneElement( groupComponent, - assign({ className, style, transform }, events), + assign({ className, style, transform, "aria-label": props["aria-label"], tabIndex }, events), children ); } diff --git a/test/client/spec/victory-core/victory-accessibility-group/victory-accessibility-group.spec.js b/test/client/spec/victory-core/victory-accessibility-group/victory-accessibility-group.spec.js new file mode 100644 index 000000000..c91d0b4e4 --- /dev/null +++ b/test/client/spec/victory-core/victory-accessibility-group/victory-accessibility-group.spec.js @@ -0,0 +1,11 @@ +import React from "react"; +import { shallow, mount } from "enzyme"; +import VictoryAccessibilityGroup from "packages/victory-core/src/victory-accessibility-group/victory-accessibility-group"; + +describe("components/victory-accessibility-group", () => { + it("renders an g with an aria-label", () => {}); + + it("renders an g with a title node", () => {}); + + it("renders an g with a desc node if given", () => {}); +}); From 5ed012223a1a979e5ddfa721ed4f7dfefbd0b38a Mon Sep 17 00:00:00 2001 From: ljones87 Date: Tue, 6 Oct 2020 12:10:08 -0600 Subject: [PATCH 2/4] feat - tests --- demo/js/components/accessibility-demo.js | 3 ++- demo/ts/components/accessibility-demo.tsx | 7 +++-- .../victory-accessibility-group.js | 3 --- .../victory-clip-container.js | 2 +- .../victory-accessibility-group.spec.js | 26 ++++++++++++++++--- 5 files changed, 29 insertions(+), 12 deletions(-) diff --git a/demo/js/components/accessibility-demo.js b/demo/js/components/accessibility-demo.js index c3e048621..00f0837d8 100644 --- a/demo/js/components/accessibility-demo.js +++ b/demo/js/components/accessibility-demo.js @@ -58,7 +58,8 @@ const chartContainerStyle = { flexDirection: "column", alignItems: "center", width: "50%", - height: "50%" + height: "50%", + padding: "25px" }; export default class App extends React.Component { diff --git a/demo/ts/components/accessibility-demo.tsx b/demo/ts/components/accessibility-demo.tsx index 7f0d7a928..1ffe65dd6 100644 --- a/demo/ts/components/accessibility-demo.tsx +++ b/demo/ts/components/accessibility-demo.tsx @@ -51,8 +51,7 @@ const containerStyle: React.CSSProperties = { display: "flex", flexFlow: "row wrap", alignItems: "center", - justifyContent: "flex-start", - margin: "0 20px" + justifyContent: "flex-start" }; const chartContainerStyle: React.CSSProperties = { @@ -61,7 +60,7 @@ const chartContainerStyle: React.CSSProperties = { alignItems: "center", width: "50%", height: "50%", - padding: "50px" + padding: "25px" }; export const assignIndexValue = (index: number | string, value: number): number => { @@ -76,7 +75,7 @@ export default class VictoryAccessibilityDemo extends React.Component {

Tabbable charts with aria-labels

-
+
{/**BAR */}

Bar chart

diff --git a/packages/victory-core/src/victory-accessibility-group/victory-accessibility-group.js b/packages/victory-core/src/victory-accessibility-group/victory-accessibility-group.js index 64ba0d270..9a5778326 100644 --- a/packages/victory-core/src/victory-accessibility-group/victory-accessibility-group.js +++ b/packages/victory-core/src/victory-accessibility-group/victory-accessibility-group.js @@ -1,8 +1,5 @@ import React from "react"; import PropTypes from "prop-types"; -// import CustomPropTypes from "../victory-util/prop-types"; -// import Helpers from "../victory-util/helpers"; -import { assign /*defaults, isObject, uniqueId */ } from "lodash"; class VictoryAccessibilityGroup extends React.Component { static displayName = "VictoryAccessibilityGroup"; diff --git a/packages/victory-core/src/victory-clip-container/victory-clip-container.js b/packages/victory-core/src/victory-clip-container/victory-clip-container.js index 77a9cea78..29b667147 100644 --- a/packages/victory-core/src/victory-clip-container/victory-clip-container.js +++ b/packages/victory-core/src/victory-clip-container/victory-clip-container.js @@ -77,7 +77,7 @@ export default class VictoryClipContainer extends React.Component { ); return React.cloneElement( groupComponent, - { ...groupProps, "aria-label": props[("aria-label", tabIndex)] }, + { ...groupProps, "aria-label": props["aria-label"], tabIndex }, [clipComponent, ...React.Children.toArray(children)] ); } diff --git a/test/client/spec/victory-core/victory-accessibility-group/victory-accessibility-group.spec.js b/test/client/spec/victory-core/victory-accessibility-group/victory-accessibility-group.spec.js index c91d0b4e4..4591aba9e 100644 --- a/test/client/spec/victory-core/victory-accessibility-group/victory-accessibility-group.spec.js +++ b/test/client/spec/victory-core/victory-accessibility-group/victory-accessibility-group.spec.js @@ -1,11 +1,31 @@ import React from "react"; import { shallow, mount } from "enzyme"; import VictoryAccessibilityGroup from "packages/victory-core/src/victory-accessibility-group/victory-accessibility-group"; +import { wrap } from "lodash"; describe("components/victory-accessibility-group", () => { - it("renders an g with an aria-label", () => {}); + it("renders an g with an aria-label", () => { + const wrapper = mount(); + expect(wrapper.find("g")).to.have.length(1); + expect(wrapper.find("g").prop("aria-label")).to.equal("test-aria-label"); + }); - it("renders an g with a title node", () => {}); + it("renders an g with a tabIndex and className", () => { + const wrapper = mount(); + expect(wrapper.find("g").prop("tabIndex")).to.equal(5); + expect(wrapper.find("g").prop("className")).to.equal("accessibility"); + }); - it("renders an g with a desc node if given", () => {}); + it("renders an g with a desc node if given", () => { + const wrapper = mount( + + ); + expect(wrapper.find("desc").text()).to.equal("test description"); + expect(wrapper.find("desc").prop("aria-describedby")).to.equal("test description aria"); + expect(wrapper.find("desc").prop("id")).to.equal("test-desc"); + }); }); From a94ce0ec8aaa3fec1c90cf970720a5471fd5d5e9 Mon Sep 17 00:00:00 2001 From: ljones87 Date: Tue, 6 Oct 2020 17:02:52 -0600 Subject: [PATCH 3/4] fix - PR comments --- demo/demo-data.ts | 3 +- demo/js/components/accessibility-demo.js | 4 +-- demo/ts/components/accessibility-demo.tsx | 7 ++-- packages/victory-core/src/index.d.ts | 35 +++++++++++-------- packages/victory-core/src/index.js | 2 +- .../victory-accessible-group.js} | 26 +++++++++----- .../victory-accessible-group.spec.js} | 10 +++--- 7 files changed, 51 insertions(+), 36 deletions(-) rename packages/victory-core/src/{victory-accessibility-group/victory-accessibility-group.js => victory-accessible-group/victory-accessible-group.js} (52%) rename test/client/spec/victory-core/{victory-accessibility-group/victory-accessibility-group.spec.js => victory-accessible-group/victory-accessible-group.spec.js} (69%) diff --git a/demo/demo-data.ts b/demo/demo-data.ts index 06c599cb3..ced1d633f 100644 --- a/demo/demo-data.ts +++ b/demo/demo-data.ts @@ -108,5 +108,4 @@ export const accessibilityGroupData = { { x: 2, y: 4 }, { x: 3, y: 9 } ] - -} \ No newline at end of file +}; diff --git a/demo/js/components/accessibility-demo.js b/demo/js/components/accessibility-demo.js index 00f0837d8..a0393a10e 100644 --- a/demo/js/components/accessibility-demo.js +++ b/demo/js/components/accessibility-demo.js @@ -18,7 +18,7 @@ import { Border, Point, VictoryLabel, - VictoryAccessibilityGroup + VictoryAccessibleGroup } from "Packages/victory-core"; import { accessibilityBarData, @@ -312,7 +312,7 @@ export default class App extends React.Component { { } diff --git a/packages/victory-core/src/index.d.ts b/packages/victory-core/src/index.d.ts index fa3c70dda..6c14e24d3 100644 --- a/packages/victory-core/src/index.d.ts +++ b/packages/victory-core/src/index.d.ts @@ -294,22 +294,29 @@ export class VictoryClipContainer extends React.Component {} +export class VictoryAccessibleGroup extends React.Component {} // #endregion diff --git a/packages/victory-core/src/index.js b/packages/victory-core/src/index.js index f9c2729d5..ce81cb6a8 100644 --- a/packages/victory-core/src/index.js +++ b/packages/victory-core/src/index.js @@ -1,4 +1,4 @@ -export { default as VictoryAccessibilityGroup } from "./victory-accessibility-group/victory-accessibility-group"; +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"; diff --git a/packages/victory-core/src/victory-accessibility-group/victory-accessibility-group.js b/packages/victory-core/src/victory-accessible-group/victory-accessible-group.js similarity index 52% rename from packages/victory-core/src/victory-accessibility-group/victory-accessibility-group.js rename to packages/victory-core/src/victory-accessible-group/victory-accessible-group.js index 9a5778326..cc2325554 100644 --- a/packages/victory-core/src/victory-accessibility-group/victory-accessibility-group.js +++ b/packages/victory-core/src/victory-accessible-group/victory-accessible-group.js @@ -1,8 +1,8 @@ import React from "react"; import PropTypes from "prop-types"; -class VictoryAccessibilityGroup extends React.Component { - static displayName = "VictoryAccessibilityGroup"; +class VictoryAccessibleGroup extends React.Component { + static displayName = "VictoryAccessibleGroup"; static role = "container"; static propTypes = { "aria-describedby": PropTypes.string, @@ -15,25 +15,33 @@ class VictoryAccessibilityGroup extends React.Component { }; static defaultProps = { - className: "VictoryAccessibilityGroup" + className: "VictoryAccessibleGroup" }; render() { const { desc, children, className, descId, tabIndex } = this.props; return desc ? ( - - - {desc} - + + {desc} {children} ) : ( - + {children} ); } } -export default VictoryAccessibilityGroup; +export default VictoryAccessibleGroup; diff --git a/test/client/spec/victory-core/victory-accessibility-group/victory-accessibility-group.spec.js b/test/client/spec/victory-core/victory-accessible-group/victory-accessible-group.spec.js similarity index 69% rename from test/client/spec/victory-core/victory-accessibility-group/victory-accessibility-group.spec.js rename to test/client/spec/victory-core/victory-accessible-group/victory-accessible-group.spec.js index 4591aba9e..66f0e3766 100644 --- a/test/client/spec/victory-core/victory-accessibility-group/victory-accessibility-group.spec.js +++ b/test/client/spec/victory-core/victory-accessible-group/victory-accessible-group.spec.js @@ -1,24 +1,24 @@ import React from "react"; import { shallow, mount } from "enzyme"; -import VictoryAccessibilityGroup from "packages/victory-core/src/victory-accessibility-group/victory-accessibility-group"; +import VictoryAccessibleGroup from "packages/victory-core/src/victory-accessible-group/victory-accessibility-group"; import { wrap } from "lodash"; -describe("components/victory-accessibility-group", () => { +describe("components/victory-accessible-group", () => { it("renders an g with an aria-label", () => { - const wrapper = mount(); + const wrapper = mount(); expect(wrapper.find("g")).to.have.length(1); expect(wrapper.find("g").prop("aria-label")).to.equal("test-aria-label"); }); it("renders an g with a tabIndex and className", () => { - const wrapper = mount(); + const wrapper = mount(); expect(wrapper.find("g").prop("tabIndex")).to.equal(5); expect(wrapper.find("g").prop("className")).to.equal("accessibility"); }); it("renders an g with a desc node if given", () => { const wrapper = mount( - Date: Wed, 7 Oct 2020 13:26:05 -0600 Subject: [PATCH 4/4] feat - mod accessible prop handling, finish tests --- demo/js/components/accessibility-demo.js | 24 ++++++++---- demo/ts/components/accessibility-demo.tsx | 33 ++++++++++++----- packages/victory-core/src/index.d.ts | 27 ++++---------- .../victory-accessible-group.js | 7 ++-- .../victory-accessible-group.spec.js | 37 ++++++++++++++----- 5 files changed, 79 insertions(+), 49 deletions(-) diff --git a/demo/js/components/accessibility-demo.js b/demo/js/components/accessibility-demo.js index a0393a10e..85023cc0a 100644 --- a/demo/js/components/accessibility-demo.js +++ b/demo/js/components/accessibility-demo.js @@ -43,14 +43,16 @@ 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 = { @@ -305,18 +307,16 @@ export default class App extends React.Component {
- {/**ACCESSIBILITYGROUP */} + {/**ACCESSIBLE GROUP */}
-

Accessibility Group

+

Accessible Group

} > @@ -325,6 +325,14 @@ export default class App extends React.Component { horizontal style={{ data: { fill: "#c43a31", opacity: 0.9 } }} data={accessibilityGroupData.b} + groupComponent={ + + } /> diff --git a/demo/ts/components/accessibility-demo.tsx b/demo/ts/components/accessibility-demo.tsx index 6c1c7d7d1..07b0fb8f4 100644 --- a/demo/ts/components/accessibility-demo.tsx +++ b/demo/ts/components/accessibility-demo.tsx @@ -44,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 = { @@ -151,7 +152,16 @@ export default class VictoryAccessibilityDemo extends React.Component {

Area

- + + } + > {
- {/**ACCESSIBILITYGROUP */} + {/**ACCESSIBLE GROUP */}
-

Accessibility Group

+

Accessible Group

} > @@ -338,6 +345,14 @@ export default class VictoryAccessibilityDemo extends React.Component { horizontal style={{ data: { fill: "#c43a31", opacity: 0.9 } }} data={accessibilityGroupData.b} + groupComponent={ + + } /> diff --git a/packages/victory-core/src/index.d.ts b/packages/victory-core/src/index.d.ts index 6c14e24d3..0e237203d 100644 --- a/packages/victory-core/src/index.d.ts +++ b/packages/victory-core/src/index.d.ts @@ -296,25 +296,14 @@ export class VictoryClipContainer extends React.Component {} diff --git a/packages/victory-core/src/victory-accessible-group/victory-accessible-group.js b/packages/victory-core/src/victory-accessible-group/victory-accessible-group.js index cc2325554..7e2147259 100644 --- a/packages/victory-core/src/victory-accessible-group/victory-accessible-group.js +++ b/packages/victory-core/src/victory-accessible-group/victory-accessible-group.js @@ -3,12 +3,10 @@ import PropTypes from "prop-types"; class VictoryAccessibleGroup extends React.Component { static displayName = "VictoryAccessibleGroup"; - static role = "container"; static propTypes = { "aria-describedby": PropTypes.string, "aria-label": PropTypes.string, desc: PropTypes.string, - descId: PropTypes.string, children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]), className: PropTypes.string, tabIndex: PropTypes.number @@ -19,12 +17,13 @@ class VictoryAccessibleGroup extends React.Component { }; render() { - const { desc, children, className, descId, tabIndex } = this.props; + const { desc, children, className, tabIndex } = this.props; + const descId = desc && (this.props["aria-describedby"] || desc.split(" ").join("-")); return desc ? ( diff --git a/test/client/spec/victory-core/victory-accessible-group/victory-accessible-group.spec.js b/test/client/spec/victory-core/victory-accessible-group/victory-accessible-group.spec.js index 66f0e3766..01cb9dc46 100644 --- a/test/client/spec/victory-core/victory-accessible-group/victory-accessible-group.spec.js +++ b/test/client/spec/victory-core/victory-accessible-group/victory-accessible-group.spec.js @@ -1,31 +1,50 @@ +/** + * Client tests + */ +/* global sinon */ +/*eslint-disable max-nested-callbacks */ +/* eslint no-unused-expressions: 0 */ import React from "react"; import { shallow, mount } from "enzyme"; -import VictoryAccessibleGroup from "packages/victory-core/src/victory-accessible-group/victory-accessibility-group"; -import { wrap } from "lodash"; +import VictoryAccessibleGroup from "packages/victory-core/src/victory-accessible-group/victory-accessible-group"; describe("components/victory-accessible-group", () => { it("renders an g with an aria-label", () => { - const wrapper = mount(); + const wrapper = shallow(); expect(wrapper.find("g")).to.have.length(1); expect(wrapper.find("g").prop("aria-label")).to.equal("test-aria-label"); }); it("renders an g with a tabIndex and className", () => { - const wrapper = mount(); + const wrapper = shallow(); expect(wrapper.find("g").prop("tabIndex")).to.equal(5); expect(wrapper.find("g").prop("className")).to.equal("accessibility"); }); it("renders an g with a desc node if given", () => { - const wrapper = mount( + const wrapper = shallow( ); + expect(wrapper.find("g").prop("aria-describedby")).to.equal("describes group"); expect(wrapper.find("desc").text()).to.equal("test description"); - expect(wrapper.find("desc").prop("aria-describedby")).to.equal("test description aria"); - expect(wrapper.find("desc").prop("id")).to.equal("test-desc"); + expect(wrapper.find("desc").props().id).to.equal("describes group"); + }); + + it("uses the desc prop value for descId and aria-describedby if no aria-describedby prop value", () => { + const wrapper = shallow( + + ); + expect(wrapper.find("desc").text()).to.equal("applies to both aria-describeby and descId"); + expect(wrapper.find("g").prop("aria-describedby")).to.equal( + "applies-to-both-aria-describeby-and-descId" + ); + expect(wrapper.find("desc").props().id).to.equal("applies-to-both-aria-describeby-and-descId"); }); });