fix(overflow-menu): return focus to trigger on esc (#20994)

* fix(overflow-menu): return focus to trigger on esc

* test(overflow-menu): write test cases

* test(overflow-menu): remove comments

* fix(overflow-menu): revert change

* test(overflow-menu): update tests

* test(overflow-menu): update tests

---------

Co-authored-by: Nikhil Tomar <63502271+2nikhiltom@users.noreply.github.com>

Author: divya-281

packages/web-components/src/components/menu/__tests__/menu-test.js

@@ -6,6 +6,7 @@
  */
 
 import '@carbon/web-components/es/components/menu/index.js';
+
 import { expect, fixture, html } from '@open-wc/testing';
 
 describe('cds-menu', () => {
@@ -106,8 +107,8 @@ describe('cds-menu', () => {
 
       expect(el.position[0]).to.be.a('number');
       expect(el.position[1]).to.be.a('number');
-      expect(el.position[0]).to.be.lessThan(nearMaxX);
-      expect(el.position[1]).to.be.lessThan(nearMaxY);
+      expect(el.position[0]).to.be.at.most(nearMaxX);
+      expect(el.position[1]).to.be.at.most(nearMaxY);
     });
   });
 });

packages/web-components/src/components/overflow-menu/__tests__/overflow-menu-test.js

@@ -6,9 +6,21 @@
  */
 
 import '@carbon/web-components/es/components/overflow-menu/index.js';
+
 import { expect, fixture, html } from '@open-wc/testing';
 
 describe('cds-overflow-menu', () => {
+  let originalBodyPosition;
+
+  beforeEach(() => {
+    originalBodyPosition = document.body.style.position;
+    document.body.style.position = 'relative';
+  });
+
+  afterEach(() => {
+    document.body.style.position = originalBodyPosition;
+  });
+
   const basicOverflowMenu = html`<cds-overflow-menu>
     <span slot="tooltip-content">Options</span>
     <cds-overflow-menu-body>
@@ -45,4 +57,44 @@ describe('cds-overflow-menu', () => {
       });
     });
   });
+
+  it('should handle Escape key to close menu', async () => {
+    const el = await fixture(basicOverflowMenu);
+    const menuBody = el.querySelector('cds-overflow-menu-body');
+
+    menuBody.open = true;
+
+    const event = new KeyboardEvent('keydown', {
+      key: 'Escape',
+      bubbles: true,
+      cancelable: true,
+    });
+
+    menuBody.dispatchEvent(event);
+
+    expect(menuBody.open).to.be.false;
+  });
+
+  it('should close menu when a menu item is clicked', async () => {
+    const el = await fixture(basicOverflowMenu);
+    const menuBody = el.querySelector('cds-overflow-menu-body');
+
+    el.open = true;
+    await el.updateComplete;
+    await menuBody.updateComplete;
+
+    expect(el.open).to.be.true;
+    expect(menuBody.open).to.be.true;
+
+    const items = menuBody.querySelectorAll('cds-overflow-menu-item');
+
+    items[0].click();
+
+    await new Promise((r) => setTimeout(r, 0));
+    await el.updateComplete;
+    await menuBody.updateComplete;
+
+    expect(el.open).to.be.false;
+    expect(menuBody.open).to.be.false;
+  });
 });

packages/web-components/src/components/overflow-menu/overflow-menu-body.ts

@@ -5,17 +5,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit';
-import { property } from 'lit/decorators.js';
-import { prefix } from '../../globals/settings';
 import CDSFloatingMenu, {
   FLOATING_MENU_DIRECTION,
 } from '../floating-menu/floating-menu';
 import { NAVIGATION_DIRECTION, OVERFLOW_MENU_SIZE } from './defs';
+
 import CDSOverflowMenuItem from './overflow-menu-item';
 import HostListener from '../../globals/decorators/host-listener';
-import { indexOf } from '../../globals/internal/collection-helpers';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
+import { html } from 'lit';
+import { indexOf } from '../../globals/internal/collection-helpers';
+import { prefix } from '../../globals/settings';
+import { property } from 'lit/decorators.js';
 import styles from './overflow-menu.scss?lit';
 
 /**
@@ -118,7 +119,26 @@ class CDSOverflowMenuBody extends CDSFloatingMenu {
       }
 
       if (key === 'Escape') {
+        event.preventDefault();
+
+        const menuTrigger = this.parent as HTMLElement | null;
         this.open = false;
+
+        if (menuTrigger && 'open' in menuTrigger) {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          (menuTrigger as any).open = false;
+        }
+
+        requestAnimationFrame(() => {
+          const triggerButton =
+            menuTrigger?.shadowRoot?.querySelector(
+              `button.${prefix}--overflow-menu`
+            ) || menuTrigger?.querySelector(`button.${prefix}--overflow-menu`);
+
+          if (triggerButton) {
+            (triggerButton as HTMLElement).focus();
+          }
+        });
         return;
       }
 
@@ -131,21 +151,23 @@ class CDSOverflowMenuBody extends CDSFloatingMenu {
 
       if (isInsideMenu) {
         event.preventDefault();
+
+        const menuTrigger = this.parent as HTMLElement | null;
         this.open = false;
 
+        if (menuTrigger && 'open' in menuTrigger) {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          (menuTrigger as any).open = false;
+        }
+
         requestAnimationFrame(() => {
-          const menuTrigger = this.parent as HTMLElement | null;
           const triggerButton =
             menuTrigger?.shadowRoot?.querySelector(
               `button.${prefix}--overflow-menu`
             ) || menuTrigger?.querySelector(`button.${prefix}--overflow-menu`);
 
           if (triggerButton) {
             (triggerButton as HTMLElement).focus();
-          } else {
-            // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20452
-            console.warn('Could not find trigger button.');
-            (document.body as HTMLElement).focus();
           }
         });
       }