diff --git a/CHANGELOG.md b/CHANGELOG.md index 8ad64a6c5eba..c7f08f719832 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` ## [`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 ac19457f645d..929b48760a26 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" > + + +`; + +exports[`EuiToolTip shows tooltip on focus 1`] = ` diff --git a/src/components/tool_tip/tool_tip.test.tsx b/src/components/tool_tip/tool_tip.test.tsx index 157d37b3bb4a..64f1d7ea3026 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( + + + + ); + + 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 e65f4775508e..f543a5ff71ec 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 { {cloneElement(children, { onFocus: this.showToolTip, onBlur: this.hideToolTip, - 'aria-describedby': this.state.id, + ...(visible && { 'aria-describedby': this.state.id }), })} );