Improve Tooltip component

The improvements are:
- TrapFocus
- Fix clickoutside and scroll functionalities

Author: Kubit

src/components/popover/popoverControlled.tsx

@@ -1,14 +1,17 @@
 import * as React from 'react';
 
 import { CssAnimationExecuteOption } from '@/components/cssAnimation';
-import { STYLES_NAME, TAB } from '@/constants';
-import { useClickOutside } from '@/hooks/useClickOutside';
-import { useEscPressed } from '@/hooks/useKeyPressed/useEscPressed';
-import { useMediaDevice } from '@/hooks/useMediaDevice/useMediaDevice';
-import { useScrollBlock } from '@/hooks/useScrollBlock/useScrollBlock';
-import { useStyles } from '@/hooks/useStyles/useStyles';
+import { STYLES_NAME } from '@/constants';
+import {
+  useClickOutside,
+  useEscPressedV2,
+  useMediaDevice,
+  useScrollBlock,
+  useStyles,
+} from '@/hooks';
+import { useTrapFocus } from '@/hooks/useTrapFocus/useTrapFocus';
 import { ErrorBoundary, FallbackComponent } from '@/provider/errorBoundary';
-import { focusFirstDescendant, trapFocus } from '@/utils';
+import { focusFirstDescendant, isKeyTabPressed } from '@/utils';
 import { convertDurationToNumber } from '@/utils/stringUtility/string.utility';
 
 import { PopoverStandAlone } from './popoverStandAlone';
@@ -39,7 +42,8 @@ const PopoverControlledComponent = React.forwardRef(
     const { blockScroll, allowScroll } = useScrollBlock();
     const currentFocus = React.useRef<HTMLElement | null>(null);
     const innerRef = React.useRef<HTMLDivElement | null>(null);
-    const setRef = React.useCallback(
+    const forwardedRef = React.useRef<HTMLDivElement | null>(null);
+    const setForwareddRef = React.useCallback(
       node => {
         if (node && focusFirstDescendantAutomatically) {
           focusFirstDescendant(node);
@@ -53,7 +57,7 @@ const PopoverControlledComponent = React.forwardRef(
         if (!node && blockBack) {
           allowScroll();
         }
-        innerRef.current = node;
+        forwardedRef.current = node;
       },
       [props.forwardedRef, focusFirstDescendantAutomatically]
     );
@@ -71,6 +75,11 @@ const PopoverControlledComponent = React.forwardRef(
     const [openAnimation, setOpenAnimation] = React.useState(props.open);
     const openAnimationRef = React.useRef(props.open);
 
+    // Expose the ref to the parent component
+    React.useImperativeHandle(ref, () => {
+      return innerRef.current as HTMLDivElement;
+    }, []);
+
     // To improve: this ref has been created to avoid update a state when the component does not longer exists.
     // Check waitForAnimation and setOpenAnimation in the onClose method
     const componentAlive = React.useRef(true);
@@ -110,8 +119,8 @@ const PopoverControlledComponent = React.forwardRef(
       }
     };
 
-    useClickOutside(innerRef, handleClickOutside, props.preventCloseOnClickElements);
-    useEscPressed({ execute: handlePressScape, element: innerRef });
+    useClickOutside(forwardedRef, handleClickOutside, props.preventCloseOnClickElements);
+    useEscPressedV2({ ref: innerRef, onEscPress: handlePressScape });
 
     const beforeModalFocus = () => {
       currentFocus.current = document.activeElement as HTMLElement;
@@ -128,12 +137,18 @@ const PopoverControlledComponent = React.forwardRef(
       }
     };
 
+    // to force rerender to update ref in useTrapFocus
+    const [tabPressed, setTabPressed] = React.useState(false);
+
     const handleKeyDown: React.KeyboardEventHandler<HTMLElement> = event => {
-      if (event.key === TAB.key && innerRef.current && props.trapFocusInsideModal) {
-        trapFocus(innerRef.current, event);
+      if (isKeyTabPressed(event.key) && forwardedRef.current) {
+        setTabPressed(true);
+        props.onKeyDown?.(event);
       }
     };
 
+    useTrapFocus({ element: forwardedRef, hasFocusTrap: props.trapFocusInsideModal, tabPressed });
+
     React.useEffect(() => {
       if (!props.open && openAnimationRef.current) {
         onClose();
@@ -182,14 +197,14 @@ const PopoverControlledComponent = React.forwardRef(
     return (
       <PopoverStandAlone
         {...props}
-        ref={ref}
+        ref={innerRef}
         animationConfig={animationConfig}
         animationExecution={
           showAnimationEnd ? CssAnimationExecuteOption.END : CssAnimationExecuteOption.START
         }
         component={component}
         device={device}
-        forwardedRef={setRef}
+        forwardedRef={setForwareddRef}
         open={openAnimation}
         styles={styles}
         onKeyDown={handleKeyDown}

src/components/tooltip/__tests__/tooltip.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, screen } from '@testing-library/react';
+import { act, fireEvent, screen } from '@testing-library/react';
 import * as React from 'react';
 
 import { axe } from 'jest-axe';
@@ -9,18 +9,18 @@ import * as mediaHooks from '@/hooks/useMediaDevice/useMediaDevice';
 import { renderProvider } from '@/tests/renderProvider/renderProvider.utility';
 import { windowMatchMedia } from '@/tests/windowMatchMedia';
 import { DeviceBreakpointsType, ROLES } from '@/types';
-import * as focusHandlers from '@/utils/focusHandlers/focusHandlers';
 
 import { TooltipUnControlled as Tooltip } from '../tooltipUnControlled';
 import { ITooltipUnControlled, TooltipAlignType } from '../types';
 
-window.matchMedia = windowMatchMedia();
-
 const mockProps: ITooltipUnControlled = {
   children: 'text',
   variant: 'DEFAULT',
   title: { content: 'title' },
   content: { content: 'content' },
+  triggerAsButton: {
+    'aria-label': 'Tooltip trigger',
+  },
   closeIcon: { icon: 'UNICORN', altText: 'close icon' },
 };
 
@@ -162,6 +162,23 @@ describe('Tooltip', () => {
     expect(closeIcon).toBeVisible();
   });
 
+  it('Tooltip - it does not show tooltip on focus label if its being clicked at the same time', () => {
+    renderProvider(<Tooltip {...mockProps} tooltipAsModal={false} />);
+    const label = screen.getByText(mockProps.children as string);
+
+    act(() => {
+      // Open and close the tooltip first in order the inline styles to be applied
+      fireEvent.mouseEnter(label);
+      fireEvent.mouseLeave(label);
+      fireEvent.mouseDown(label);
+      fireEvent.focus(label);
+      fireEvent.mouseUp(label);
+    });
+
+    const title = screen.getByText(mockProps.title?.content as string);
+    expect(title).not.toBeVisible();
+  });
+
   it('Tooltip - it hides tooltip on blur tooltip', () => {
     renderProvider(<Tooltip {...mockProps} tooltipAsModal={false} />);
     const label = screen.getByText(mockProps.children as string);
@@ -215,23 +232,7 @@ describe('Tooltip', () => {
     expect(closeIcon).not.toBeVisible();
   });
 
-  it('Tooltip - it traps the focus', () => {
-    const spyTrapFocus = jest.spyOn(focusHandlers, 'trapFocus');
-    renderProvider(<Tooltip {...mockProps} dataTestId={'testId'} tooltipAsModal={false} />);
-    const label = screen.getByText(mockProps.children as string);
-
-    fireEvent.mouseEnter(label);
-    const content = screen.getByTestId('testIdTooltipContent');
-    // press tab
-    fireEvent.keyDown(content, {
-      key: 'Tab',
-      code: 'Tab',
-    });
-
-    expect(spyTrapFocus).toHaveBeenCalled();
-  });
-
-  it('Tooltip - onClick will not produce any effect if desktop', () => {
+  it('Tooltip - onClick will not produce any effect if desktop and tooltip is not a modal', () => {
     renderProvider(<Tooltip {...mockProps} tooltipAsModal={false} />);
     const label = screen.getByText(mockProps.children as string);
     // Have to show and hide the tooltip first because it does not detect the tooltip as invisible when starting due to styled-component
@@ -248,6 +249,24 @@ describe('Tooltip', () => {
     expect(content).not.toBeVisible();
   });
 
+  it('Tooltip - onClick in the label will open / close the tooltip in desktop if configured as modal', () => {
+    renderProvider(<Tooltip {...mockProps} tooltipAsModal={true} />);
+    const label = screen.getByText(mockProps.children as string);
+
+    fireEvent.click(label);
+
+    const title = screen.getByText(mockProps.title?.content as string);
+    const content = screen.getByText(mockProps.content?.content as string);
+
+    expect(title).toBeVisible();
+    expect(content).toBeVisible();
+
+    fireEvent.click(label);
+
+    expect(title).not.toBeVisible();
+    expect(content).not.toBeVisible();
+  });
+
   it('Tooltip - it shows content as JSX.Element on mouse enter label', () => {
     renderProvider(
       <Tooltip {...mockProps} content={{ content: <h1>ELEMENT</h1> }} tooltipAsModal={false} />
@@ -433,7 +452,8 @@ describe('Tooltip', () => {
     const title = screen.getByText(mockProps.title?.content as string);
     expect(title).toBeInTheDocument();
 
-    fireEvent.keyDown(window, {
+    // Internal popover element fire the escape keydown
+    fireEvent.keyDown(title, {
       key: 'Escape',
       code: 'Escape',
     });

src/components/tooltip/__tests__/tooltip.utils.test.ts

@@ -1,7 +1,7 @@
 import { PopoverComponentType } from '@/components/popover';
 import { DeviceBreakpointsType } from '@/types';
 
-import { getAriaDescriptorsBy, getHtmlTagForTooltip, useTooltipAsModal } from '../utils';
+import { getAriaDescriptorsBy, getHtmlTagForTooltip } from '../utils';
 
 describe('getAriaDescriptorsBy utility', () => {
   it('should return both titleId and contentId when title and content are provided', () => {
@@ -82,36 +82,3 @@ describe('getHtmlTagForTooltip utility', () => {
     expect(result).toBeUndefined();
   });
 });
-
-describe('useTooltipAsModal utility', () => {
-  it('should return propTooltipAsModal when both propTooltipAsModal and styleTooltipAsModal are provided', () => {
-    const result = useTooltipAsModal({
-      propTooltipAsModal: true,
-      styleTooltipAsModal: false,
-    });
-
-    expect(result).toBe(true);
-  });
-
-  it('should return propTooltipAsModal when only propTooltipAsModal is provided', () => {
-    const result = useTooltipAsModal({
-      propTooltipAsModal: true,
-    });
-
-    expect(result).toBe(true);
-  });
-
-  it('should return styleTooltipAsModal when only styleTooltipAsModal is provided', () => {
-    const result = useTooltipAsModal({
-      styleTooltipAsModal: true,
-    });
-
-    expect(result).toBe(true);
-  });
-
-  it('should return false when neither propTooltipAsModal nor styleTooltipAsModal is provided', () => {
-    const result = useTooltipAsModal({});
-
-    expect(result).toBe(false);
-  });
-});

src/components/tooltip/__tests__/useTooltip.test.tsx

@@ -1,4 +1,4 @@
-import { act } from '@testing-library/react';
+import { act, fireEvent } from '@testing-library/react';
 
 import { renderHookProvider } from '@/tests/renderProvider/renderProvider.utility';
 import { windowMatchMedia } from '@/tests/windowMatchMedia';
@@ -180,20 +180,88 @@ describe('useTooltip', () => {
       .spyOn(useMediaDevice, 'useMediaDevice')
       .mockImplementation(() => DeviceBreakpointsType.DESKTOP);
 
+    tooltipRef.current && jest.spyOn(tooltipRef.current, 'contains').mockReturnValueOnce(false);
+    tooltipRef.current &&
+      jest.spyOn(tooltipRef.current, 'style', 'get').mockReturnValueOnce({} as CSSStyleDeclaration);
+
+    const { result } = renderHookProvider(() => useTooltip({ labelRef, tooltipRef, variant }));
+
+    act(() => {
+      result.current.showTooltip();
+    });
+    act(() => {
+      window.dispatchEvent(new Event('scroll'));
+    });
+
+    expect(tooltipRef.current?.style).not.toEqual({});
+  });
+
+  it('Use Tooltip - will be hided esc is pressed', () => {
+    window.matchMedia = windowMatchMedia('onlyDesktop');
+    jest
+      .spyOn(useMediaDevice, 'useMediaDevice')
+      .mockImplementation(() => DeviceBreakpointsType.DESKTOP);
+
+    tooltipRef.current && jest.spyOn(tooltipRef.current, 'contains').mockReturnValueOnce(false);
+    tooltipRef.current &&
+      jest.spyOn(tooltipRef.current, 'style', 'get').mockReturnValueOnce({} as CSSStyleDeclaration);
+
+    const { result } = renderHookProvider(() => useTooltip({ labelRef, tooltipRef, variant }));
+
+    act(() => {
+      result.current.showTooltip();
+    });
+    act(() => {
+      fireEvent.keyDown(labelRef.current, { key: 'Escape', code: 'Escape' });
+    });
+
+    expect(tooltipRef.current?.style).not.toEqual({});
+  });
+
+  it('Use Tooltip - if press esc, but already hidden, onOpenClose wont be called', () => {
+    window.matchMedia = windowMatchMedia('onlyDesktop');
+    jest
+      .spyOn(useMediaDevice, 'useMediaDevice')
+      .mockImplementation(() => DeviceBreakpointsType.DESKTOP);
+
     const onOpenClose = jest.fn();
+
     tooltipRef.current && jest.spyOn(tooltipRef.current, 'contains').mockReturnValueOnce(false);
+    tooltipRef.current &&
+      jest.spyOn(tooltipRef.current, 'style', 'get').mockReturnValueOnce({} as CSSStyleDeclaration);
 
     const { result } = renderHookProvider(() =>
       useTooltip({ labelRef, tooltipRef, variant, onOpenClose })
     );
+    act(() => {
+      fireEvent.keyDown(labelRef.current, { key: 'Escape', code: 'Escape' });
+    });
+
+    expect(onOpenClose).not.toHaveBeenCalled();
+  });
+
+  it('Use Tooltip - when tooltip is a modal, when hidding focus in the last focusable element before opening the modal', () => {
+    window.matchMedia = windowMatchMedia('onlyDesktop');
+    jest
+      .spyOn(useMediaDevice, 'useMediaDevice')
+      .mockImplementation(() => DeviceBreakpointsType.DESKTOP);
+
+    const { result } = renderHookProvider(() =>
+      useTooltip({ labelRef, tooltipRef, variant, tooltipAsModal: true })
+    );
+
+    const focusableElement1 = document.createElement('button');
+    document.body.appendChild(focusableElement1);
+    focusableElement1.focus();
+    const focusSpy = jest.spyOn(focusableElement1, 'focus');
 
     act(() => {
       result.current.showTooltip();
     });
     act(() => {
-      window.dispatchEvent(new Event('scroll'));
+      result.current.hideTooltip();
     });
 
-    expect(onOpenClose).toHaveBeenCalledWith(false);
+    expect(focusSpy).toHaveBeenCalled();
   });
 });