From 6d6e4f844363843d254732ff0f64096f172ed505 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Mon, 4 Jun 2018 15:25:42 -0700
Subject: [PATCH] Normalize DOM structure of EuiFormControlLayoutCustomIcon.

---
 .../form_control_layout.test.js.snap          | 152 ++++++++++--------
 .../form_control_layout_custom_icon.js        |  15 +-
 2 files changed, 94 insertions(+), 73 deletions(-)

diff --git a/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.js.snap b/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.js.snap
index 25d86d36c042..8e008cca1a80 100644
--- a/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.js.snap
+++ b/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.js.snap
@@ -59,25 +59,29 @@ exports[`EuiFormControlLayout props icon is rendered as a string 1`] = `
   <div
     class="euiFormControlLayoutIcons"
   >
-    <svg
-      aria-hidden="true"
-      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon"
-      height="16"
-      viewBox="0 0 16 16"
-      width="16"
-      xmlns="http://www.w3.org/2000/svg"
+    <span
+      class="euiFormControlLayoutCustomIcon"
     >
-      <g
-        fill-rule="evenodd"
+      <svg
+        aria-hidden="true"
+        class="euiIcon euiIcon--medium"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M7.5 2.236L1.618 14h11.764L7.5 2.236zm.894-.447l5.882 11.764A1 1 0 0 1 13.382 15H1.618a1 1 0 0 1-.894-1.447L6.606 1.789a1 1 0 0 1 1.788 0z"
-        />
-        <path
-          d="M7 6h1v5H7zM7 12h1v1H7z"
-        />
-      </g>
-    </svg>
+        <g
+          fill-rule="evenodd"
+        >
+          <path
+            d="M7.5 2.236L1.618 14h11.764L7.5 2.236zm.894-.447l5.882 11.764A1 1 0 0 1 13.382 15H1.618a1 1 0 0 1-.894-1.447L6.606 1.789a1 1 0 0 1 1.788 0z"
+          />
+          <path
+            d="M7 6h1v5H7zM7 12h1v1H7z"
+          />
+        </g>
+      </svg>
+    </span>
   </div>
 </div>
 `;
@@ -89,26 +93,30 @@ exports[`EuiFormControlLayout props icon is rendered as an object 1`] = `
   <div
     class="euiFormControlLayoutIcons"
   >
-    <svg
-      aria-hidden="true"
-      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon customClass"
+    <span
+      class="euiFormControlLayoutCustomIcon customClass"
       data-test-subj="myIcon"
-      height="16"
-      viewBox="0 0 16 16"
-      width="16"
-      xmlns="http://www.w3.org/2000/svg"
     >
-      <g
-        fill-rule="evenodd"
+      <svg
+        aria-hidden="true"
+        class="euiIcon euiIcon--medium"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M7.5 2.236L1.618 14h11.764L7.5 2.236zm.894-.447l5.882 11.764A1 1 0 0 1 13.382 15H1.618a1 1 0 0 1-.894-1.447L6.606 1.789a1 1 0 0 1 1.788 0z"
-        />
-        <path
-          d="M7 6h1v5H7zM7 12h1v1H7z"
-        />
-      </g>
-    </svg>
+        <g
+          fill-rule="evenodd"
+        >
+          <path
+            d="M7.5 2.236L1.618 14h11.764L7.5 2.236zm.894-.447l5.882 11.764A1 1 0 0 1 13.382 15H1.618a1 1 0 0 1-.894-1.447L6.606 1.789a1 1 0 0 1 1.788 0z"
+          />
+          <path
+            d="M7 6h1v5H7zM7 12h1v1H7z"
+          />
+        </g>
+      </svg>
+    </span>
   </div>
 </div>
 `;
@@ -120,25 +128,29 @@ exports[`EuiFormControlLayout props icon side left is rendered 1`] = `
   <div
     class="euiFormControlLayoutIcons"
   >
-    <svg
-      aria-hidden="true"
-      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon"
-      height="16"
-      viewBox="0 0 16 16"
-      width="16"
-      xmlns="http://www.w3.org/2000/svg"
+    <span
+      class="euiFormControlLayoutCustomIcon"
     >
-      <g
-        fill-rule="evenodd"
+      <svg
+        aria-hidden="true"
+        class="euiIcon euiIcon--medium"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M7.5 2.236L1.618 14h11.764L7.5 2.236zm.894-.447l5.882 11.764A1 1 0 0 1 13.382 15H1.618a1 1 0 0 1-.894-1.447L6.606 1.789a1 1 0 0 1 1.788 0z"
-        />
-        <path
-          d="M7 6h1v5H7zM7 12h1v1H7z"
-        />
-      </g>
-    </svg>
+        <g
+          fill-rule="evenodd"
+        >
+          <path
+            d="M7.5 2.236L1.618 14h11.764L7.5 2.236zm.894-.447l5.882 11.764A1 1 0 0 1 13.382 15H1.618a1 1 0 0 1-.894-1.447L6.606 1.789a1 1 0 0 1 1.788 0z"
+          />
+          <path
+            d="M7 6h1v5H7zM7 12h1v1H7z"
+          />
+        </g>
+      </svg>
+    </span>
   </div>
 </div>
 `;
@@ -150,25 +162,29 @@ exports[`EuiFormControlLayout props icon side right is rendered 1`] = `
   <div
     class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
   >
-    <svg
-      aria-hidden="true"
-      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon"
-      height="16"
-      viewBox="0 0 16 16"
-      width="16"
-      xmlns="http://www.w3.org/2000/svg"
+    <span
+      class="euiFormControlLayoutCustomIcon"
     >
-      <g
-        fill-rule="evenodd"
+      <svg
+        aria-hidden="true"
+        class="euiIcon euiIcon--medium"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M7.5 2.236L1.618 14h11.764L7.5 2.236zm.894-.447l5.882 11.764A1 1 0 0 1 13.382 15H1.618a1 1 0 0 1-.894-1.447L6.606 1.789a1 1 0 0 1 1.788 0z"
-        />
-        <path
-          d="M7 6h1v5H7zM7 12h1v1H7z"
-        />
-      </g>
-    </svg>
+        <g
+          fill-rule="evenodd"
+        >
+          <path
+            d="M7.5 2.236L1.618 14h11.764L7.5 2.236zm.894-.447l5.882 11.764A1 1 0 0 1 13.382 15H1.618a1 1 0 0 1-.894-1.447L6.606 1.789a1 1 0 0 1 1.788 0z"
+          />
+          <path
+            d="M7 6h1v5H7zM7 12h1v1H7z"
+          />
+        </g>
+      </svg>
+    </span>
   </div>
 </div>
 `;
diff --git a/src/components/form/form_control_layout/form_control_layout_custom_icon.js b/src/components/form/form_control_layout/form_control_layout_custom_icon.js
index cc2d8c4b16e0..02fb60bb8535 100644
--- a/src/components/form/form_control_layout/form_control_layout_custom_icon.js
+++ b/src/components/form/form_control_layout/form_control_layout_custom_icon.js
@@ -22,13 +22,14 @@ export const EuiFormControlLayoutCustomIcon = ({
   if (onClick) {
     return (
       <button
-        className={classes}
         onClick={onClick}
+        className={classes}
         ref={iconRef}
         {...rest}
       >
         <EuiIcon
           className="euiFormControlLayoutCustomIcon__clickableIcon"
+          aria-hidden="true"
           type={type}
         />
       </button>
@@ -36,12 +37,16 @@ export const EuiFormControlLayoutCustomIcon = ({
   }
 
   return (
-    <EuiIcon
-      aria-hidden="true"
+    <span
       className={classes}
-      type={type}
+      ref={iconRef}
       {...rest}
-    />
+    >
+      <EuiIcon
+        aria-hidden="true"
+        type={type}
+      />
+    </span>
   );
 };