From 6b3b498bf69b97133ec0c1c768a07c6d3ea7285f Mon Sep 17 00:00:00 2001
From: Michail Yasonik <michail.yasonik@elastic.co>
Date: Tue, 23 Jul 2019 15:40:15 +0300
Subject: [PATCH] Fix invalid aria-describedby values set by EuiToolTip (#1533)

---
 CHANGELOG.md                                  |  1 +
 .../__snapshots__/icon_tip.test.tsx.snap      |  4 ----
 .../__snapshots__/tool_tip.test.tsx.snap      | 11 ++++++++++
 src/components/tool_tip/tool_tip.test.tsx     | 21 ++++++++++++++++---
 src/components/tool_tip/tool_tip.tsx          |  2 +-
 5 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8ad64a6c5eb..a1550529361 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added `partial` glyph to `EuiIcon` ([#2152](https://github.com/elastic/eui/pull/2152))
+- Fixed invalid `aria-desribedby` values set by `EuiToolTip` ([#2156](https://github.com/elastic/eui/pull/2156))
 
 ## [`13.0.0`](https://github.com/elastic/eui/tree/v13.0.0)
 
diff --git a/src/components/tool_tip/__snapshots__/icon_tip.test.tsx.snap b/src/components/tool_tip/__snapshots__/icon_tip.test.tsx.snap
index ac19457f645..929b48760a2 100644
--- a/src/components/tool_tip/__snapshots__/icon_tip.test.tsx.snap
+++ b/src/components/tool_tip/__snapshots__/icon_tip.test.tsx.snap
@@ -5,7 +5,6 @@ exports[`EuiIconTip is rendered 1`] = `
   class="euiToolTipAnchor"
 >
   <svg
-    aria-describedby="id"
     aria-label="aria-label"
     class="euiIcon euiIcon--medium euiIcon-isLoading"
     focusable="true"
@@ -23,7 +22,6 @@ exports[`EuiIconTip props color is rendered as the icon color 1`] = `
   class="euiToolTipAnchor"
 >
   <svg
-    aria-describedby="id"
     aria-label="Info"
     class="euiIcon euiIcon--medium euiIcon--warning euiIcon-isLoading"
     focusable="true"
@@ -41,7 +39,6 @@ exports[`EuiIconTip props size is rendered as the icon size 1`] = `
   class="euiToolTipAnchor"
 >
   <svg
-    aria-describedby="id"
     aria-label="Info"
     class="euiIcon euiIcon--xLarge euiIcon-isLoading"
     focusable="true"
@@ -59,7 +56,6 @@ exports[`EuiIconTip props type is rendered as the icon 1`] = `
   class="euiToolTipAnchor"
 >
   <svg
-    aria-describedby="id"
     aria-label="Info"
     class="euiIcon euiIcon--medium euiIcon-isLoading"
     focusable="true"
diff --git a/src/components/tool_tip/__snapshots__/tool_tip.test.tsx.snap b/src/components/tool_tip/__snapshots__/tool_tip.test.tsx.snap
index c6a5cdf0d99..c32536ff05a 100644
--- a/src/components/tool_tip/__snapshots__/tool_tip.test.tsx.snap
+++ b/src/components/tool_tip/__snapshots__/tool_tip.test.tsx.snap
@@ -1,11 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiToolTip is rendered 1`] = `
+<span
+  class="euiToolTipAnchor"
+>
+  <button>
+    Trigger
+  </button>
+</span>
+`;
+
+exports[`EuiToolTip shows tooltip on focus 1`] = `
 <span
   class="euiToolTipAnchor"
 >
   <button
     aria-describedby="id"
+    data-test-subj="trigger"
   >
     Trigger
   </button>
diff --git a/src/components/tool_tip/tool_tip.test.tsx b/src/components/tool_tip/tool_tip.test.tsx
index 157d37b3bb4..64f1d7ea302 100644
--- a/src/components/tool_tip/tool_tip.test.tsx
+++ b/src/components/tool_tip/tool_tip.test.tsx
@@ -1,7 +1,10 @@
 import React from 'react';
-import { render } from 'enzyme';
-import { requiredProps } from '../../test';
-
+import { render, mount } from 'enzyme';
+import {
+  requiredProps,
+  findTestSubject,
+  takeMountedSnapshot,
+} from '../../test';
 import { EuiToolTip } from './tool_tip';
 
 describe('EuiToolTip', () => {
@@ -14,4 +17,16 @@ describe('EuiToolTip', () => {
 
     expect(component).toMatchSnapshot();
   });
+
+  test('shows tooltip on focus', () => {
+    const component = mount(
+      <EuiToolTip title="title" id="id" content="content" {...requiredProps}>
+        <button data-test-subj="trigger">Trigger</button>
+      </EuiToolTip>
+    );
+
+    const trigger = findTestSubject(component, 'trigger');
+    trigger.simulate('focus');
+    expect(takeMountedSnapshot(component)).toMatchSnapshot();
+  });
 });
diff --git a/src/components/tool_tip/tool_tip.tsx b/src/components/tool_tip/tool_tip.tsx
index e65f4775508..f543a5ff71e 100644
--- a/src/components/tool_tip/tool_tip.tsx
+++ b/src/components/tool_tip/tool_tip.tsx
@@ -312,7 +312,7 @@ export class EuiToolTip extends Component<Props, State> {
         {cloneElement(children, {
           onFocus: this.showToolTip,
           onBlur: this.hideToolTip,
-          'aria-describedby': this.state.id,
+          ...(visible && { 'aria-describedby': this.state.id }),
         })}
       </span>
     );