From f40bdbffb67e7e37bdd5311b78e120582c832b0a Mon Sep 17 00:00:00 2001
From: Paul Sandwell <paul.sandwell@mirumagency.com>
Date: Thu, 24 Jan 2019 16:28:19 +0000
Subject: [PATCH] Adding focusable to generated <svg> tag based on props

---
 src/__tests__/index.js | 7 +++++++
 src/index.js           | 5 ++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/__tests__/index.js b/src/__tests__/index.js
index 160c243..b31b7c4 100644
--- a/src/__tests__/index.js
+++ b/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);
diff --git a/src/index.js b/src/index.js
index 40238d0..b097eef 100644
--- a/src/index.js
+++ b/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
 };