Improve Desktop and Mobile Behavior for OliveMenu Component

Updated the OliveMenu component to differentiate behavior between desktop and mobile/tablet environments. On desktop, the component no longer acts as a dialog, allowing focus to move freely across the screen and ensuring it closes when losing focus, while still closing with the Escape key. For mobile and tablet, the popover now adheres to modal behavior as outlined by W3C ARIA practices.

Author: Kubit

src/components/oliveMenu/__test__/oliveMenu.test.tsx

@@ -3,8 +3,10 @@ import * as React from 'react';
 
 import { axe } from 'jest-axe';
 
+import * as mediaHooks from '@/hooks/useMediaDevice/useMediaDevice';
 import { renderProvider } from '@/tests/renderProvider/renderProvider.utility';
 import { windowMatchMedia } from '@/tests/windowMatchMedia';
+import { DeviceBreakpointsType } from '@/types';
 
 import { OliveMenu } from '../oliveMenu';
 import { IOliveMenu, OliveMenuListOptions } from '../types';
@@ -74,8 +76,15 @@ const mockProps: IOliveMenu = {
 window.matchMedia = windowMatchMedia();
 
 describe('OliveMenu component', () => {
+  afterEach(() => {
+    window.matchMedia = windowMatchMedia();
+    jest.clearAllMocks();
+    jest.resetAllMocks();
+    jest.restoreAllMocks();
+  });
+
   it('Should render OliveMenu', async () => {
-    const { container } = renderProvider(<OliveMenu {...mockProps} />);
+    const { container } = renderProvider(<OliveMenu {...mockProps} ref={jest.fn()} />);
 
     const oliveMenu = screen.getByText(
       (_content, element) => element?.tagName.toLowerCase() === 'button'
@@ -94,10 +103,55 @@ describe('OliveMenu component', () => {
     const openButton = screen.getAllByText('Options');
     fireEvent.click(openButton[0]);
 
-    const menu = screen.getByText(
-      (content, element) => element?.tagName.toLowerCase() === 'dialog'
-    );
-    expect(menu).toBeInTheDocument();
+    // Element in the popover
+    const popoverElement = screen.getByText('list 1');
+    expect(popoverElement).toBeInTheDocument();
+
+    const results = await axe(container);
+    expect(container).toHTMLValidate({
+      rules: {
+        'no-inline-style': 'off',
+      },
+    });
+    expect(results).toHaveNoViolations();
+  });
+
+  it('When desktop popover will be a div', async () => {
+    window.matchMedia = windowMatchMedia('onlyDesktop');
+    jest
+      .spyOn(mediaHooks, 'useMediaDevice')
+      .mockImplementation(() => DeviceBreakpointsType.DESKTOP);
+
+    const { container } = renderProvider(<OliveMenu {...mockProps} />);
+
+    const openButton = screen.getAllByText('Options');
+    fireEvent.click(openButton[0]);
+
+    // Element in the popover
+    const popover = container.querySelector('[data-popover]');
+    expect(popover?.tagName).toBe('DIV');
+
+    const results = await axe(container);
+    expect(container).toHTMLValidate({
+      rules: {
+        'no-inline-style': 'off',
+      },
+    });
+    expect(results).toHaveNoViolations();
+  });
+
+  it('When mobile or tablet, popover will be a dialog', async () => {
+    window.matchMedia = windowMatchMedia('onlyMobile');
+    jest.spyOn(mediaHooks, 'useMediaDevice').mockImplementation(() => DeviceBreakpointsType.MOBILE);
+
+    const { container } = renderProvider(<OliveMenu {...mockProps} />);
+
+    const openButton = screen.getAllByText('Options');
+    fireEvent.click(openButton[0]);
+
+    // Element in the popover
+    const popover = container.querySelector('[data-popover]');
+    expect(popover?.tagName).toBe('DIALOG');
 
     const results = await axe(container);
     expect(container).toHTMLValidate({
@@ -127,38 +181,102 @@ describe('OliveMenu component', () => {
     const openButton = screen.getAllByText('Options');
     fireEvent.click(openButton[0]);
 
-    const menu = screen.getByText(
-      (_content, element) => element?.tagName.toLowerCase() === 'dialog'
-    );
+    // Element in the popover
+    const popoverElement = screen.getByText('list 1');
 
     const closeButton = screen.getByLabelText(
       mockProps.actionBottomSheetStructure?.closeIcon?.altText as string
     );
     fireEvent.click(closeButton);
 
-    expect(menu).not.toBeInTheDocument();
+    expect(popoverElement).not.toBeInTheDocument();
   });
 
-  it('Should close the menu when the popover is closed automatically', async () => {
+  it('Should close the menu when lose the focus outside', async () => {
+    const handleOpenClose = jest.fn();
     renderProvider(
-      <div>
-        <button>external</button>
-        <OliveMenu {...mockProps} />
-      </div>
+      <OliveMenu {...mockProps} dataTestId="OliveMenu" onOpenClose={handleOpenClose} />
     );
 
+    const container = screen.getByTestId('OliveMenuContainer');
+
+    // Lossing the focus when the popover is closed
+    act(() => {
+      fireEvent.blur(container);
+    });
+    expect(handleOpenClose).not.toHaveBeenCalled();
+
+    // Open the popover
     const openButton = screen.getAllByText('Options');
-    fireEvent.click(openButton[0]);
+    act(() => {
+      fireEvent.click(openButton[0]);
+    });
 
-    const menu = screen.getByText(
-      (_content, element) => element?.tagName.toLowerCase() === 'dialog'
-    );
+    // Element in the popover
+    const popoverElement = screen.getByText('list 1');
+    expect(popoverElement).toBeInTheDocument();
+
+    // Move focus to an element inside the popover
+    // Do not close the popover
+    const option = screen.getAllByText('option 1')[0];
+    act(() => {
+      fireEvent.blur(container, { relatedTarget: option });
+    });
+    expect(popoverElement).toBeInTheDocument();
+
+    // Close the popover lossing the focus
+    act(() => {
+      fireEvent.blur(container);
+    });
 
-    const external = screen.getByText('external');
+    expect(handleOpenClose).toHaveBeenCalledWith(false, expect.anything());
+
+    expect(popoverElement).not.toBeInTheDocument();
+  });
+
+  it('Should close the menu when pressing Escape', async () => {
+    const handleOpenClose = jest.fn();
+    renderProvider(<OliveMenu {...mockProps} onOpenClose={handleOpenClose} />);
+
+    // Open the popover
+    const openButton = screen.getAllByText('Options');
+
+    // Simulate a inner element has the focus
+    openButton[0].focus();
+
+    // Press escape when is already close
     await act(async () => {
-      fireEvent.mouseUp(external);
+      fireEvent.keyDown(window, {
+        key: 'Escape',
+        code: 'Escape',
+        keyCode: 27,
+        charCode: 27,
+      });
     });
+    expect(handleOpenClose).not.toHaveBeenCalled();
+
+    act(() => {
+      fireEvent.click(openButton[0]);
+    });
+
+    // Element in the popover
+    const popoverElement = screen.getByText('list 1');
+
+    // Simulate a inner element has the focus
+    openButton[0].focus();
+
+    // Press escape
+    await act(async () => {
+      fireEvent.keyDown(window, {
+        key: 'Escape',
+        code: 'Escape',
+        keyCode: 27,
+        charCode: 27,
+      });
+    });
+
+    expect(handleOpenClose).toHaveBeenCalledWith(false);
 
-    expect(menu).not.toBeInTheDocument();
+    expect(popoverElement).not.toBeInTheDocument();
   });
 });

src/components/oliveMenu/oliveMenu.styled.tsx

@@ -10,6 +10,9 @@ type OliveMenuStylesProps = {
 
 export const OliveMenuStyled = styled.div<OliveMenuStylesProps>`
   ${({ styles }) => getStyles(styles.container)};
+  *[data-popover] {
+    ${({ styles }) => getStyles(styles.popover)};
+  }
 `;
 
 export const ButtonContainer = styled.div<OliveMenuStylesProps>`

src/components/oliveMenu/oliveMenu.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { useEscPressed, useMediaDevice } from '@/hooks';
 import { useStyles } from '@/hooks/useStyles/useStyles';
 import { ErrorBoundary, FallbackComponent } from '@/provider/errorBoundary';
 
@@ -10,50 +11,61 @@ const OLIVE_MENU_STYLES = 'OLIVE_MENU_STYLES';
 
 const OliveMenuComponent = React.forwardRef(
   <V extends string | unknown>(
-    {
-      variant,
-      ctv,
-      trigger,
-      popover,
-      actionBottomSheetStructure,
-      onOpenClose,
-      ...props
-    }: IOliveMenu<V>,
+    { variant, ctv, trigger, actionBottomSheetStructure, onOpenClose, ...props }: IOliveMenu<V>,
     ref: React.ForwardedRef<HTMLDivElement> | undefined | null
   ): JSX.Element => {
     const [open, setOpen] = React.useState<boolean>(false);
     const styles = useStyles<OliveMenuGlobalStylesType, V>(OLIVE_MENU_STYLES, variant, ctv);
+    const device = useMediaDevice();
+
+    const innerRef = React.useRef<HTMLDivElement>(null);
+    React.useImperativeHandle(ref, () => innerRef.current as HTMLDivElement, []);
+
+    const handlePressScape = React.useCallback(() => {
+      // Do nothing if already closed
+      if (!open) {
+        return;
+      }
+      setOpen(false);
+      onOpenClose?.(false);
+    }, [open]);
+
+    useEscPressed({ execute: handlePressScape, element: innerRef });
 
     const handleTriggerClick = e => {
       setOpen(!open);
       onOpenClose?.(!open, e);
       trigger?.onClick?.(e);
     };
 
-    const handlePopoverCloseInternally = () => {
+    const handleCloseIconClick = e => {
       setOpen(false);
-      onOpenClose?.(false);
-      popover?.onCloseInternally?.();
+      onOpenClose?.(false, e);
+      actionBottomSheetStructure?.closeIcon?.onClick?.(e);
     };
 
-    const handleCloseIconClick = e => {
+    const handleBlur: React.FocusEventHandler<HTMLDivElement> = e => {
+      // Do nothing if the new focus is inside the component or already closed
+      if (e.currentTarget.contains(e.relatedTarget) || !open) {
+        return;
+      }
       setOpen(false);
       onOpenClose?.(false, e);
-      actionBottomSheetStructure?.closeIcon?.onClick?.(e);
     };
 
     return (
       <OliveMenuStandAlone
         {...props}
-        ref={ref}
+        ref={innerRef}
         actionBottomSheetStructure={{
           ...actionBottomSheetStructure,
           closeIcon: { ...actionBottomSheetStructure?.closeIcon, onClick: handleCloseIconClick },
         }}
+        device={device}
         open={open}
-        popover={{ ...popover, onCloseInternally: handlePopoverCloseInternally }}
         styles={styles}
         trigger={trigger && { ...trigger, onClick: handleTriggerClick }}
+        onBlur={handleBlur}
       />
     );
   }