Adding focusable to generated <svg> tag based on props

src/__tests__/index.js

@@ -111,6 +111,13 @@ test("SVGInline: should add height", t => {
   t.is(result, `${SVGInlineStart} style="height: 1rem;"><g></g></svg></span>`);
 });
 
+test("SVGInline: should add focusable", t => {
+  const result = ReactDOMServer.renderToStaticMarkup(
+    <SVGInline svg={"<svg><g></g></svg>"} focusable="false" />
+  );
+  t.is(result, `${SVGInlineStart} focusable="false"><g></g></svg></span>`);
+});
+
 test("SVGInline: does not pass internal props to component", t => {
   const TestComponent = props => {
     t.not(props.className, undefined);

src/index.js

@@ -34,6 +34,7 @@ class SVGInline extends Component {
       svg,
       fill,
       width,
+      focusable,
       accessibilityLabel,
       accessibilityDesc,
       classSuffix,
@@ -78,7 +79,8 @@ class SVGInline extends Component {
             (width ? `width: ${width};` : "") +
             (height ? `height: ${height};` : "") +
             '"'
-          : "")
+          : "") +
+        (focusable ? ` focusable="${focusable}"` : "")
     );
     let match;
     if (accessibilityDesc) {
@@ -120,6 +122,7 @@ SVGInline.propTypes = {
   cleanupExceptions: PropTypes.array,
   width: PropTypes.string,
   height: PropTypes.string,
+  focusable: PropTypes.string,
   accessibilityLabel: PropTypes.string,
   accessibilityDesc: PropTypes.string
 };