[PoC] Tooltip delay and focus

packages/eui/src/components/button/button_group/button_group.test.tsx

@@ -11,6 +11,7 @@ import { css } from '@emotion/react';
 import { fireEvent } from '@testing-library/react';
 import {
   render,
+  simulateFocusVisible,
   waitForEuiToolTipHidden,
   waitForEuiToolTipVisible,
 } from '../../../test/rtl';
@@ -245,6 +246,7 @@ describe('EuiButtonGroup', () => {
   });
 
   describe('tooltips', () => {
+    afterEach(() => jest.restoreAllMocks());
     it('shows a tooltip on hover and focus', async () => {
       const { getByTestSubject, getByRole } = render(
         <EuiButtonGroup
@@ -268,6 +270,7 @@ describe('EuiButtonGroup', () => {
       fireEvent.mouseOut(getByTestSubject('buttonWithTooltip'));
       await waitForEuiToolTipHidden();
 
+      simulateFocusVisible(getByTestSubject('buttonWithTooltip'));
       fireEvent.focus(getByTestSubject('buttonWithTooltip'));
       await waitForEuiToolTipVisible();
       fireEvent.blur(getByTestSubject('buttonWithTooltip'));
@@ -302,6 +305,7 @@ describe('EuiButtonGroup', () => {
       fireEvent.mouseOut(getByTestSubject('buttonWithTooltip').parentElement!);
       await waitForEuiToolTipHidden();
 
+      simulateFocusVisible(getByTestSubject('buttonWithTooltip'));
       fireEvent.focus(getByTestSubject('buttonWithTooltip'));
       await waitForEuiToolTipVisible();
       fireEvent.blur(getByTestSubject('buttonWithTooltip'));

packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_button.test.tsx.snap

@@ -34,7 +34,6 @@ exports[`EuiCollapsedNavButton renders a tooltip around the icon button 1`] = `
       class="euiToolTipPopover euiToolTip emotion-euiToolTip-left-euiCollapsedNavItemTooltip-left"
       data-position="left"
       id="generated-id"
-      position="left"
       role="tooltip"
       style="top: -10px; left: -16px;"
     >

packages/eui/src/components/color_picker/color_picker_swatch.test.tsx

@@ -12,13 +12,15 @@ import { requiredProps } from '../../test';
 import { shouldRenderCustomStyles } from '../../test/internal';
 import {
   render,
+  simulateFocusVisible,
   waitForEuiToolTipHidden,
   waitForEuiToolTipVisible,
 } from '../../test/rtl';
 
 import { EuiColorPickerSwatch } from './color_picker_swatch';
 
 describe('EuiColorPickerSwatch', () => {
+  afterEach(() => jest.restoreAllMocks());
   shouldRenderCustomStyles(<EuiColorPickerSwatch />);
 
   test('is rendered', () => {
@@ -61,6 +63,7 @@ describe('EuiColorPickerSwatch', () => {
 
       const swatchElement = getByTestSubject('color-picker-swatch');
 
+      simulateFocusVisible(swatchElement);
       fireEvent.focus(swatchElement);
 
       await waitForEuiToolTipVisible();

packages/eui/src/components/color_picker/hue.test.tsx

@@ -11,6 +11,7 @@ import { requiredProps } from '../../test/required_props';
 import { shouldRenderCustomStyles } from '../../test/internal';
 import {
   render,
+  simulateFocusVisible,
   waitForEuiToolTipHidden,
   waitForEuiToolTipVisible,
 } from '../../test/rtl';
@@ -23,6 +24,7 @@ const onChange = () => {
 };
 
 describe('EuiHue', () => {
+  afterEach(() => jest.restoreAllMocks());
   shouldRenderCustomStyles(<EuiHue onChange={onChange} />, {
     skip: { style: true },
   });
@@ -81,6 +83,7 @@ describe('EuiHue', () => {
 
     const thumbElement = document.querySelector('.euiHue__range')!;
 
+    simulateFocusVisible(thumbElement);
     fireEvent.focus(thumbElement);
 
     await waitForEuiToolTipVisible();

packages/eui/src/components/color_picker/saturation.test.tsx

@@ -11,6 +11,7 @@ import { requiredProps } from '../../test/required_props';
 import { shouldRenderCustomStyles } from '../../test/internal';
 import {
   render,
+  simulateFocusVisible,
   waitForEuiToolTipHidden,
   waitForEuiToolTipVisible,
 } from '../../test/rtl';
@@ -23,6 +24,7 @@ const onChange = () => {
 };
 
 describe('EuiSaturation', () => {
+  afterEach(() => jest.restoreAllMocks());
   shouldRenderCustomStyles(<EuiSaturation onChange={onChange} />);
 
   test('is rendered', () => {
@@ -70,6 +72,7 @@ describe('EuiSaturation', () => {
 
     const thumbElement = document.querySelector('.euiSaturation__indicator')!;
 
+    simulateFocusVisible(thumbElement);
     fireEvent.focus(thumbElement);
 
     await waitForEuiToolTipVisible();

packages/eui/src/components/context_menu/__snapshots__/context_menu_item.test.tsx.snap

@@ -117,7 +117,6 @@ exports[`EuiContextMenuItem tooltip behavior 1`] = `
       class="euiToolTipPopover euiToolTip emotion-euiToolTip-top"
       data-position="top"
       id="generated-id"
-      position="top"
       role="tooltip"
       style="top: -16px; left: -10px;"
     >

packages/eui/src/components/filter_group/filter_select_item.test.tsx

@@ -7,7 +7,11 @@
  */
 
 import React from 'react';
-import { render } from '../../test/rtl';
+import {
+  render,
+  waitForEuiToolTipVisible,
+  waitForEuiToolTipHidden,
+} from '../../test/rtl';
 import { requiredProps } from '../../test';
 import { shouldRenderCustomStyles } from '../../test/internal';
 
@@ -21,4 +25,57 @@ describe('EuiFilterSelectItem', () => {
 
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  describe('tooltip behavior', () => {
+    const tooltipProps = {
+      toolTipContent: 'Filter item tooltip',
+      toolTipProps: { 'data-test-subj': 'filterItemToolTip' },
+    };
+
+    // `toggleToolTip` is called in `componentDidUpdate`; on initial mount `tooltipRef.current`
+    // is null because `EuiToolTip` hasn't committed its ref yet, so a re-render is required
+    // to trigger `showToolTip`/`hideToolTip`.
+    it('shows tooltip when `isFocused` becomes true', async () => {
+      const { rerender, getByTestSubject } = render(
+        <EuiFilterSelectItem {...tooltipProps} isFocused={false}>
+          <span>Item</span>
+        </EuiFilterSelectItem>
+      );
+
+      rerender(
+        <EuiFilterSelectItem {...tooltipProps} isFocused={true}>
+          <span>Item</span>
+        </EuiFilterSelectItem>
+      );
+
+      await waitForEuiToolTipVisible();
+      expect(getByTestSubject('filterItemToolTip')).toBeInTheDocument();
+    });
+
+    it('hides tooltip when `isFocused` becomes false', async () => {
+      const { rerender, queryByRole } = render(
+        <EuiFilterSelectItem {...tooltipProps} isFocused={false}>
+          <span>Item</span>
+        </EuiFilterSelectItem>
+      );
+
+      rerender(
+        <EuiFilterSelectItem {...tooltipProps} isFocused={true}>
+          <span>Item</span>
+        </EuiFilterSelectItem>
+      );
+
+      await waitForEuiToolTipVisible();
+      expect(queryByRole('tooltip')).toBeInTheDocument();
+
+      rerender(
+        <EuiFilterSelectItem {...tooltipProps} isFocused={false}>
+          <span>Item</span>
+        </EuiFilterSelectItem>
+      );
+
+      await waitForEuiToolTipHidden();
+      expect(queryByRole('tooltip')).not.toBeInTheDocument();
+    });
+  });
 });

packages/eui/src/components/filter_group/filter_select_item.tsx

@@ -14,6 +14,7 @@ import { CommonProps } from '../common';
 
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
 import { EuiToolTip } from '../tool_tip';
+import type { EuiToolTipRef } from '../tool_tip';
 import { EuiIcon } from '../icon';
 import { EuiComboBoxOptionOption } from '../combo_box';
 
@@ -62,7 +63,7 @@ export class EuiFilterSelectItemClass extends Component<
   };
 
   buttonRef: HTMLButtonElement | null = null;
-  tooltipRef = createRef<EuiToolTip>();
+  tooltipRef = createRef<EuiToolTipRef>();
 
   state = {
     hasFocus: false,
@@ -97,6 +98,12 @@ export class EuiFilterSelectItemClass extends Component<
     if (this.props.isFocused && !prevProps.isFocused) {
       this.buttonRef?.scrollIntoView?.({ block: 'nearest' });
     }
+    if (
+      this.props.isFocused !== prevProps.isFocused &&
+      this.props.toolTipContent
+    ) {
+      this.toggleToolTip(this.props.isFocused ?? false);
+    }
   }
 
   render() {
@@ -142,8 +149,6 @@ export class EuiFilterSelectItemClass extends Component<
             style: anchorStyles,
           }
         : { style };
-
-      this.toggleToolTip(isFocused ?? false);
     }
 
     let iconNode;

packages/eui/src/components/selectable/selectable_list/__snapshots__/selectable_list_item.test.tsx.snap

@@ -547,7 +547,6 @@ exports[`EuiSelectableListItem props tooltip behavior on mouseover 1`] = `
       data-position="top"
       data-test-subj="listItemToolTip"
       id="generated-id"
-      position="top"
       role="tooltip"
       style="top: -16px; left: -10px;"
     >
@@ -628,7 +627,6 @@ exports[`EuiSelectableListItem props tooltip behavior when isFocused 1`] = `
       data-position="top"
       data-test-subj="listItemToolTip"
       id="generated-id"
-      position="top"
       role="tooltip"
       style="top: -16px; left: -10px;"
     >

packages/eui/src/components/selectable/selectable_list/selectable_list_item.tsx

@@ -23,6 +23,7 @@ import { EuiIcon, IconColor, IconType } from '../../icon';
 import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiBadge, EuiBadgeProps } from '../../badge';
 import { EuiToolTip } from '../../tool_tip';
+import type { EuiToolTipRef } from '../../tool_tip';
 
 import type {
   EuiSelectableOption,
@@ -358,7 +359,7 @@ export const EuiSelectableListItem: FunctionComponent<
   }, [role, checked]);
 
   const hasToolTip = !!toolTipContent && !disabled;
-  const [tooltipRef, setTooltipRef] = useState<EuiToolTip | null>(null); // Needs to be state and not a ref to trigger useEffect
+  const [tooltipRef, setTooltipRef] = useState<EuiToolTipRef | null>(null); // Needs to be state and not a ref to trigger useEffect
   const [ariaDescribedBy, setAriaDescribedBy] = useState(_ariaDescribedBy);
 
   // Manually trigger the tooltip on keyboard focus
@@ -375,7 +376,7 @@ export const EuiSelectableListItem: FunctionComponent<
   // Manually set the `aria-describedby` id on the <li> wrapper
   useEffect(() => {
     if (tooltipRef) {
-      const tooltipId = tooltipRef.state.id;
+      const tooltipId = tooltipRef.id;
       setAriaDescribedBy(classNames(tooltipId, _ariaDescribedBy));
     }
   }, [tooltipRef, _ariaDescribedBy]);

packages/eui/src/components/table/table_header_cell.test.tsx

@@ -8,7 +8,11 @@
 
 import React, { PropsWithChildren, ReactElement } from 'react';
 import { requiredProps } from '../../test/required_props';
-import { render, waitForEuiToolTipVisible } from '../../test/rtl';
+import {
+  render,
+  simulateFocusVisible,
+  waitForEuiToolTipVisible,
+} from '../../test/rtl';
 import { fireEvent } from '@testing-library/react';
 
 import { RIGHT_ALIGNMENT, CENTER_ALIGNMENT } from '../../services';
@@ -241,6 +245,7 @@ describe('EuiTableHeaderCell', () => {
   });
 
   describe('tooltip', () => {
+    afterEach(() => jest.restoreAllMocks());
     it('renders an icon with tooltip', async () => {
       const { getByTestSubject } = renderInTableHeader(
         <EuiTableHeaderCell
@@ -264,6 +269,7 @@ describe('EuiTableHeaderCell', () => {
         'info'
       );
 
+      simulateFocusVisible(getByTestSubject('icon'));
       fireEvent.focus(getByTestSubject('icon'));
       await waitForEuiToolTipVisible();
 
@@ -296,6 +302,7 @@ describe('EuiTableHeaderCell', () => {
         'info'
       );
 
+      simulateFocusVisible(getByTestSubject('tableHeaderSortButton'));
       fireEvent.focus(getByTestSubject('tableHeaderSortButton'));
       await waitForEuiToolTipVisible();
 

packages/eui/src/components/tool_tip/__snapshots__/icon_tip.test.tsx.snap

@@ -13,46 +13,3 @@ exports[`EuiIconTip is rendered 1`] = `
   </span>
 </span>
 `;
-
-exports[`EuiIconTip props color is rendered as the icon color 1`] = `
-<span
-  class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
-  id="id-wrapper"
->
-  <span
-    color="warning"
-    data-euiicon-type="question"
-    tabindex="0"
-  >
-    Info
-  </span>
-</span>
-`;
-
-exports[`EuiIconTip props size is rendered as the icon size 1`] = `
-<span
-  class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
-  id="id-wrapper"
->
-  <span
-    data-euiicon-type="question"
-    tabindex="0"
-  >
-    Info
-  </span>
-</span>
-`;
-
-exports[`EuiIconTip props type is rendered as the icon 1`] = `
-<span
-  class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
-  id="id-wrapper"
->
-  <span
-    data-euiicon-type="warning"
-    tabindex="0"
-  >
-    Info
-  </span>
-</span>
-`;