EuiIcon no longer takes focus in Edge and IE unless tabIndex is speci…

…fied as a value other than "-1" (#900)
elastic · Jun 5, 2018 · ceab30e · ceab30e
1 parent a7fd7a6
commit ceab30e
Show file tree

Hide file tree

Showing 33 changed files with 621 additions and 272 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@
 **Bug fixes**
 - Removed `.nvmrc` file from published npm package ([#892](https://github.com/elastic/eui/pull/892))
 - `EuiComboBox` no longer shows the _clear_ icon when it's a no-op ([#890](https://github.com/elastic/eui/pull/890))
+- `EuiIcon` no longer takes focus in Edge and IE unless `tabIndex` is defined as a value other than `"-1"` ([#900](https://github.com/elastic/eui/pull/900))
 
 ## [`0.0.51`](https://github.com/elastic/eui/tree/v0.0.51)
 

diff --git a/src/components/accordion/__snapshots__/accordion.test.js.snap b/src/components/accordion/__snapshots__/accordion.test.js.snap
@@ -60,6 +60,7 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
                       >
                         <arrowRight
                           className="euiIcon euiIcon--medium"
+                          focusable="false"
                           height="16"
                           style={
                             Object {
@@ -73,6 +74,7 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
                         >
                           <svg
                             className="euiIcon euiIcon--medium"
+                            focusable="false"
                             height="16"
                             style={
                               Object {
@@ -190,6 +192,7 @@ exports[`EuiAccordion behavior opens when clicked once 1`] = `
                       >
                         <arrowDown
                           className="euiIcon euiIcon--medium"
+                          focusable="false"
                           height="16"
                           style={
                             Object {
@@ -203,6 +206,7 @@ exports[`EuiAccordion behavior opens when clicked once 1`] = `
                         >
                           <svg
                             className="euiIcon euiIcon--medium"
+                            focusable="false"
                             height="16"
                             style={
                               Object {
@@ -284,6 +288,7 @@ exports[`EuiAccordion is rendered 1`] = `
           >
             <svg
               class="euiIcon euiIcon--medium"
+              focusable="false"
               height="16"
               viewBox="0 0 16 16"
               width="16"
@@ -346,6 +351,7 @@ exports[`EuiAccordion props buttonContent is rendered 1`] = `
           >
             <svg
               class="euiIcon euiIcon--medium"
+              focusable="false"
               height="16"
               viewBox="0 0 16 16"
               width="16"
@@ -412,6 +418,7 @@ exports[`EuiAccordion props buttonContentClassName is rendered 1`] = `
           >
             <svg
               class="euiIcon euiIcon--medium"
+              focusable="false"
               height="16"
               viewBox="0 0 16 16"
               width="16"
@@ -474,6 +481,7 @@ exports[`EuiAccordion props extraAction is rendered 1`] = `
           >
             <svg
               class="euiIcon euiIcon--medium"
+              focusable="false"
               height="16"
               viewBox="0 0 16 16"
               width="16"
@@ -543,6 +551,7 @@ exports[`EuiAccordion props initialIsOpen is rendered 1`] = `
           >
             <svg
               class="euiIcon euiIcon--medium"
+              focusable="false"
               height="16"
               viewBox="0 0 16 16"
               width="16"

diff --git a/src/components/badge/__snapshots__/badge.test.js.snap b/src/components/badge/__snapshots__/badge.test.js.snap
@@ -139,6 +139,7 @@ exports[`EuiBadge props iconSide left is rendered 1`] = `
   >
     <svg
       class="euiIcon euiIcon--small euiBadge__icon"
+      focusable="false"
       height="18"
       viewBox="0 0 18 18"
       width="18"
@@ -173,6 +174,7 @@ exports[`EuiBadge props iconSide right is rendered 1`] = `
   >
     <svg
       class="euiIcon euiIcon--small euiBadge__icon"
+      focusable="false"
       height="18"
       viewBox="0 0 18 18"
       width="18"
@@ -207,6 +209,7 @@ exports[`EuiBadge props iconType is rendered 1`] = `
   >
     <svg
       class="euiIcon euiIcon--small euiBadge__icon"
+      focusable="false"
       height="18"
       viewBox="0 0 18 18"
       width="18"

diff --git a/src/components/button/__snapshots__/button.test.js.snap b/src/components/button/__snapshots__/button.test.js.snap
@@ -152,6 +152,7 @@ exports[`EuiButton props iconSide left is rendered 1`] = `
     <svg
       aria-hidden="true"
       class="euiIcon euiIcon--medium euiButton__icon"
+      focusable="false"
       height="18"
       viewBox="0 0 18 18"
       width="18"
@@ -188,6 +189,7 @@ exports[`EuiButton props iconSide right is rendered 1`] = `
     <svg
       aria-hidden="true"
       class="euiIcon euiIcon--medium euiButton__icon"
+      focusable="false"
       height="18"
       viewBox="0 0 18 18"
       width="18"
@@ -224,6 +226,7 @@ exports[`EuiButton props iconType is rendered 1`] = `
     <svg
       aria-hidden="true"
       class="euiIcon euiIcon--medium euiButton__icon"
+      focusable="false"
       height="18"
       viewBox="0 0 18 18"
       width="18"

diff --git a/src/components/button/button_empty/__snapshots__/button_empty.test.js.snap b/src/components/button/button_empty/__snapshots__/button_empty.test.js.snap
@@ -134,6 +134,7 @@ exports[`EuiButtonEmpty props iconSide left is rendered 1`] = `
     <svg
       aria-hidden="true"
       class="euiIcon euiIcon--medium euiButtonEmpty__icon"
+      focusable="false"
       height="18"
       viewBox="0 0 18 18"
       width="18"
@@ -168,6 +169,7 @@ exports[`EuiButtonEmpty props iconSide right is rendered 1`] = `
     <svg
       aria-hidden="true"
       class="euiIcon euiIcon--medium euiButtonEmpty__icon"
+      focusable="false"
       height="18"
       viewBox="0 0 18 18"
       width="18"
@@ -202,6 +204,7 @@ exports[`EuiButtonEmpty props iconType is rendered 1`] = `
     <svg
       aria-hidden="true"
       class="euiIcon euiIcon--medium euiButtonEmpty__icon"
+      focusable="false"
       height="18"
       viewBox="0 0 18 18"
       width="18"

diff --git a/src/components/button/button_icon/__snapshots__/button_icon.test.js.snap b/src/components/button/button_icon/__snapshots__/button_icon.test.js.snap
@@ -68,6 +68,7 @@ exports[`EuiButtonIcon props iconType is rendered 1`] = `
   <svg
     aria-hidden="true"
     class="euiIcon euiIcon--medium euiButtonIcon__icon"
+    focusable="false"
     height="18"
     viewBox="0 0 18 18"
     width="18"

diff --git a/src/components/call_out/__snapshots__/call_out.test.js.snap b/src/components/call_out/__snapshots__/call_out.test.js.snap
@@ -87,6 +87,7 @@ exports[`EuiCallOut props iconType is rendered 1`] = `
     <svg
       aria-hidden="true"
       class="euiIcon euiIcon--medium euiCallOutHeader__icon"
+      focusable="false"
       height="18"
       viewBox="0 0 18 18"
       width="18"

diff --git a/src/components/card/__snapshots__/card.test.js.snap b/src/components/card/__snapshots__/card.test.js.snap
@@ -32,6 +32,7 @@ exports[`EuiCard icon 1`] = `
   >
     <svg
       class="euiIcon euiIcon--medium myIconClass euiCard__icon"
+      focusable="false"
       height="32"
       viewBox="0 0 32 32"
       width="32"

diff --git a/src/components/context_menu/__snapshots__/context_menu.test.js.snap b/src/components/context_menu/__snapshots__/context_menu.test.js.snap
@@ -27,6 +27,7 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
       >
         <svg
           class="euiIcon euiIcon--medium euiContextMenu__icon"
+          focusable="false"
           height="16"
           viewBox="0 0 16 16"
           width="16"
@@ -80,6 +81,7 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
       >
         <svg
           class="euiIcon euiIcon--medium euiContextMenu__icon"
+          focusable="false"
           height="16"
           viewBox="0 0 16 16"
           width="16"
@@ -125,6 +127,7 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
       >
         <svg
           class="euiIcon euiIcon--medium euiContextMenu__icon"
+          focusable="false"
           height="16"
           viewBox="0 0 16 16"
           width="16"
@@ -165,6 +168,7 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
           </span>
           <svg
             class="euiIcon euiIcon--medium euiContextMenu__arrow"
+            focusable="false"
             height="16"
             viewBox="0 0 16 16"
             width="16"
@@ -199,6 +203,7 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
           </span>
           <svg
             class="euiIcon euiIcon--medium euiContextMenu__arrow"
+            focusable="false"
             height="16"
             viewBox="0 0 16 16"
             width="16"
@@ -233,6 +238,7 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
           </span>
           <svg
             class="euiIcon euiIcon--medium euiContextMenu__arrow"
+            focusable="false"
             height="16"
             viewBox="0 0 16 16"
             width="16"
@@ -276,6 +282,7 @@ exports[`EuiContextMenu props panels and initialPanelId renders the referenced p
       >
         <svg
           class="euiIcon euiIcon--medium euiContextMenu__icon"
+          focusable="false"
           height="16"
           viewBox="0 0 16 16"
           width="16"

diff --git a/src/components/context_menu/__snapshots__/context_menu_item.test.js.snap b/src/components/context_menu/__snapshots__/context_menu_item.test.js.snap
@@ -48,6 +48,7 @@ exports[`EuiContextMenuItem props hasPanel is rendered 1`] = `
     />
     <svg
       class="euiIcon euiIcon--medium euiContextMenu__arrow"
+      focusable="false"
       height="16"
       viewBox="0 0 16 16"
       width="16"

diff --git a/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap b/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap
@@ -28,6 +28,7 @@ exports[`EuiContextMenuPanel props onClose renders a button as a title 1`] = `
     >
       <svg
         class="euiIcon euiIcon--medium euiContextMenu__icon"
+        focusable="false"
         height="16"
         viewBox="0 0 16 16"
         width="16"

diff --git a/src/components/empty_prompt/__snapshots__/empty_prompt.test.js.snap b/src/components/empty_prompt/__snapshots__/empty_prompt.test.js.snap
@@ -8,6 +8,7 @@ exports[`EuiEmptyPrompt is rendered 1`] = `
 >
   <svg
     class="euiIcon euiIcon--xxLarge euiIcon--subdued"
+    focusable="false"
     height="16"
     viewBox="0 0 16 16"
     width="16"
@@ -120,6 +121,7 @@ exports[`EuiEmptyPrompt props iconType renders alone 1`] = `
 >
   <svg
     class="euiIcon euiIcon--xxLarge euiIcon--subdued"
+    focusable="false"
     height="16"
     viewBox="0 0 16 16"
     width="16"

diff --git a/src/components/filter_group/__snapshots__/filter_select_item.test.js.snap b/src/components/filter_group/__snapshots__/filter_select_item.test.js.snap
@@ -15,6 +15,7 @@ exports[`EuiFilterSelectItem is rendered 1`] = `
     >
       <svg
         class="euiIcon euiIcon--medium"
+        focusable="false"
         height="16"
         viewBox="0 0 16 16"
         width="16"

diff --git a/src/components/form/file_picker/__snapshots__/file_picker.test.js.snap b/src/components/form/file_picker/__snapshots__/file_picker.test.js.snap
@@ -19,6 +19,7 @@ exports[`EuiFilePicker is rendered 1`] = `
       <svg
         aria-hidden="true"
         class="euiIcon euiIcon--large euiFilePicker__icon"
+        focusable="false"
         height="16"
         viewBox="0 0 16 16"
         width="16"

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
@@ -24,6 +24,7 @@ exports[`EuiFormControlLayout props clear onClick is rendered 1`] = `
     >
       <svg
         class="euiIcon euiIcon--medium euiFormControlLayout__clearIcon"
+        focusable="false"
         height="16"
         viewBox="0 0 16 16"
         width="16"
@@ -62,6 +63,7 @@ exports[`EuiFormControlLayout props icon is rendered as a string 1`] = `
     <svg
       aria-hidden="true"
       class="euiIcon euiIcon--medium euiFormControlLayout__icon"
+      focusable="false"
       height="16"
       viewBox="0 0 16 16"
       width="16"
@@ -93,6 +95,7 @@ exports[`EuiFormControlLayout props icon is rendered as an object 1`] = `
       aria-hidden="true"
       class="euiIcon euiIcon--medium euiFormControlLayout__icon customClass"
       data-test-subj="myIcon"
+      focusable="false"
       height="16"
       viewBox="0 0 16 16"
       width="16"
@@ -123,6 +126,7 @@ exports[`EuiFormControlLayout props icon side left is rendered 1`] = `
     <svg
       aria-hidden="true"
       class="euiIcon euiIcon--medium euiFormControlLayout__icon"
+      focusable="false"
       height="16"
       viewBox="0 0 16 16"
       width="16"
@@ -153,6 +157,7 @@ exports[`EuiFormControlLayout props icon side right is rendered 1`] = `
     <svg
       aria-hidden="true"
       class="euiIcon euiIcon--medium euiFormControlLayout__icon"
+      focusable="false"
       height="16"
       viewBox="0 0 16 16"
       width="16"

diff --git a/src/components/form/switch/__snapshots__/switch.test.js.snap b/src/components/form/switch/__snapshots__/switch.test.js.snap
@@ -21,6 +21,7 @@ exports[`EuiSwitch is rendered 1`] = `
     >
       <svg
         class="euiIcon euiIcon--medium euiSwitch__icon"
+        focusable="false"
         height="16"
         viewBox="0 0 16 16"
         width="16"
@@ -40,6 +41,7 @@ exports[`EuiSwitch is rendered 1`] = `
       </svg>
       <svg
         class="euiIcon euiIcon--medium euiSwitch__icon euiSwitch__icon--checked"
+        focusable="false"
         height="16"
         viewBox="0 0 16 16"
         width="16"

diff --git a/src/components/header/__snapshots__/header_logo.test.js.snap b/src/components/header/__snapshots__/header_logo.test.js.snap
@@ -8,6 +8,7 @@ exports[`EuiHeaderLogo is rendered 1`] = `
 >
   <svg
     class="euiIcon euiIcon--xLarge euiHeaderLogo__icon"
+    focusable="false"
     height="32"
     viewBox="0 0 32 32"
     width="32"
@@ -53,6 +54,7 @@ exports[`EuiHeaderLogo renders href 1`] = `
 >
   <svg
     class="euiIcon euiIcon--xLarge euiHeaderLogo__icon"
+    focusable="false"
     height="32"
     viewBox="0 0 32 32"
     width="32"
@@ -98,6 +100,7 @@ exports[`EuiHeaderLogo renders optional props 1`] = `
 >
   <svg
     class="euiIcon euiIcon--xLarge euiHeaderLogo__icon"
+    focusable="false"
     height="16"
     title="Moby Dick"
     viewBox="0 0 16 16"

diff --git a/src/components/header/header_alert/__snapshots__/header_alert.test.js.snap b/src/components/header/header_alert/__snapshots__/header_alert.test.js.snap
@@ -14,6 +14,7 @@ exports[`EuiHeaderAlert is rendered 1`] = `
     <svg
       aria-hidden="true"
       class="euiIcon euiIcon--medium euiButtonIcon__icon"
+      focusable="false"
       height="16"
       viewBox="0 0 16 16"
       width="16"
@@ -77,6 +78,7 @@ exports[`EuiHeaderAlert renders action 1`] = `
     <svg
       aria-hidden="true"
       class="euiIcon euiIcon--medium euiButtonIcon__icon"
+      focusable="false"
       height="16"
       viewBox="0 0 16 16"
       width="16"
@@ -144,6 +146,7 @@ exports[`EuiHeaderAlert renders date as an element 1`] = `
     <svg
       aria-hidden="true"
       class="euiIcon euiIcon--medium euiButtonIcon__icon"
+      focusable="false"
       height="16"
       viewBox="0 0 16 16"
       width="16"
@@ -209,6 +212,7 @@ exports[`EuiHeaderAlert renders title as an element 1`] = `
     <svg
       aria-hidden="true"
       class="euiIcon euiIcon--medium euiButtonIcon__icon"
+      focusable="false"
       height="16"
       viewBox="0 0 16 16"
       width="16"

diff --git a/src/components/header/header_links/__snapshots__/header_links.test.js.snap b/src/components/header/header_links/__snapshots__/header_links.test.js.snap
@@ -24,6 +24,7 @@ exports[`EuiHeaderLinks is rendered 1`] = `
       >
         <svg
           class="euiIcon euiIcon--medium"
+          focusable="false"
           height="16"
           viewBox="0 0 16 16"
           width="16"