Fix invalid aria-describedby values set by EuiToolTip (#1533)

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)
 

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"

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>

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();
+  });
 });

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>
     );