Merge pull request #1743 from FormidableLabs/improvement/container-role-prop

allow user provided roles for VictoryContainer

Author: boygirl

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

@@ -256,6 +256,7 @@ export interface VictoryContainerProps {
   portalZIndex?: number;
   preserveAspectRatio?: string;
   responsive?: boolean;
+  role?: string;
   style?: React.CSSProperties;
   tabIndex?: number;
   theme?: VictoryThemeDefinition;

packages/victory-core/src/victory-container/victory-container.js

@@ -33,6 +33,7 @@ export default class VictoryContainer extends React.Component {
     portalZIndex: CustomPropTypes.integer,
     preserveAspectRatio: PropTypes.string,
     responsive: PropTypes.bool,
+    role: PropTypes.string,
     style: PropTypes.object,
     tabIndex: PropTypes.number,
     theme: PropTypes.object,
@@ -44,7 +45,8 @@ export default class VictoryContainer extends React.Component {
     className: "VictoryContainer",
     portalComponent: <Portal />,
     portalZIndex: 99,
-    responsive: true
+    responsive: true,
+    role: "img"
   };
 
   static contextType = TimerContext;
@@ -178,7 +180,8 @@ export default class VictoryContainer extends React.Component {
       title,
       desc,
       tabIndex,
-      preserveAspectRatio
+      preserveAspectRatio,
+      role
     } = this.props;
     const style = responsive
       ? this.props.style
@@ -188,7 +191,7 @@ export default class VictoryContainer extends React.Component {
         width,
         height,
         tabIndex,
-        role: "img",
+        role,
         "aria-labelledby":
           [title && this.getIdForElement("title"), this.props["aria-labelledby"]]
             .filter(Boolean)

test/client/spec/victory-core/victory-container/victory-container.spec.js

@@ -16,6 +16,12 @@ describe("components/victory-container", () => {
     expect(output.prop("role")).to.contain("img");
   });
 
+  it("renders an svg with a custom role", () => {
+    const wrapper = shallow(<VictoryContainer role="presentation" />);
+    const output = wrapper.find("svg").at(0);
+    expect(output.prop("role")).to.contain("presentation");
+  });
+
   it("renders an svg with a title node", () => {
     const wrapper = shallow(<VictoryContainer title="Victory Chart" />);
     const output = wrapper.find("title");