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