fix(masthead): Esc to close Cloud Masthead (#10555)

### Related Ticket(s) Closes #10174 ### Description The Cloud masthead (and other mastheads) simple menus were not closing upon hitting Esc if focus was inside the submenu. This PR fixes that. ### Changelog **Changed** - Adds ability to close Cloud Masthead non-megamenu (and all non-megamenus) with Esc key, just as megamenus already do.
carbon-design-system · Jun 15, 2023 · de67bf8 · de67bf8
1 parent 4276895
commit de67bf8
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 31 deletions.
diff --git a/packages/carbon-web-components/src/components/ui-shell/header-menu.ts b/packages/carbon-web-components/src/components/ui-shell/header-menu.ts
@@ -33,8 +33,8 @@ class BXHeaderMenu extends HostListenerMixin(FocusMixin(LitElement)) {
   /**
    * The trigger button.
    */
-  @query('a')
-  private _trigger!: HTMLElement;
+  @query('[part="trigger"]')
+  protected _topMenuItem!: HTMLElement;
 
   /**
    * Handles `click` event handler on this element.
@@ -46,6 +46,8 @@ class BXHeaderMenu extends HostListenerMixin(FocusMixin(LitElement)) {
   /**
    * Handler for the `keydown` event on the trigger button.
    */
+  @HostListener('keydown')
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
   private _handleKeydownTrigger({ key }: KeyboardEvent) {
     if (key === 'Esc' || key === 'Escape') {
       this._handleUserInitiatedToggle(false);
@@ -60,7 +62,7 @@ class BXHeaderMenu extends HostListenerMixin(FocusMixin(LitElement)) {
   private _handleUserInitiatedToggle(force: boolean = !this.expanded) {
     this.expanded = force;
     if (!force) {
-      this._trigger.focus();
+      this._topMenuItem.focus();
     }
   }
 
@@ -123,7 +125,6 @@ class BXHeaderMenu extends HostListenerMixin(FocusMixin(LitElement)) {
       triggerContent,
       menuLabel,
       _handleClick: handleClick,
-      _handleKeydownTrigger: handleKeydownTrigger,
     } = this;
     return html`
       <a
@@ -134,8 +135,7 @@ class BXHeaderMenu extends HostListenerMixin(FocusMixin(LitElement)) {
         href="javascript:void 0"
         aria-haspopup="menu"
         aria-expanded="${String(Boolean(expanded))}"
-        @click=${handleClick}
-        @keydown=${handleKeydownTrigger}>
+        @click=${handleClick}>
         ${triggerContent}${ChevronDownGlyph({
           part: 'trigger-icon',
           class: `${prefix}--header__menu-arrow`,

diff --git a/packages/web-components/src/components/masthead/megamenu-top-nav-menu.ts b/packages/web-components/src/components/masthead/megamenu-top-nav-menu.ts
@@ -40,12 +40,6 @@ class DDSMegaMenuTopNavMenu extends DDSTopNavMenu {
   @query(`.${prefix}--header__menu`)
   private _menuNode!: HTMLElement;
 
-  /**
-   * The trigger button.
-   */
-  @query('[part="trigger"]')
-  private _topMenuItem!: HTMLAnchorElement;
-
   /**
    * scrollbar width.
    */
@@ -54,16 +48,6 @@ class DDSMegaMenuTopNavMenu extends DDSTopNavMenu {
     this.ownerDocument!.defaultView!.innerWidth -
     this.ownerDocument!.body.offsetWidth;
 
-  /**
-   * Removes inherited _handleBlur method from BXHeaderMenu
-   */
-  private _handleKeydown = (event: KeyboardEvent) => {
-    if (event.key === 'Escape') {
-      this.expanded = false;
-      this._topMenuItem.focus();
-    }
-  };
-
   /**
    * The observer for the resize of the viewport.
    */
@@ -127,7 +111,6 @@ class DDSMegaMenuTopNavMenu extends DDSTopNavMenu {
   connectedCallback() {
     super.connectedCallback();
     this._cleanAndCreateObserverResize({ create: true });
-    this.addEventListener('keydown', this._handleKeydown);
   }
 
   disconnectedCallback() {

diff --git a/packages/web-components/src/components/masthead/top-nav-menu.ts b/packages/web-components/src/components/masthead/top-nav-menu.ts
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { property, query } from 'lit-element';
+import { property } from 'lit-element';
 import BXHeaderMenu from '../../internal/vendor/@carbon/web-components/components/ui-shell/header-menu.js';
 import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './masthead.scss';
@@ -22,12 +22,6 @@ const { stablePrefix: ddsPrefix } = ddsSettings;
  */
 @customElement(`${ddsPrefix}-top-nav-menu`)
 class DDSTopNavMenu extends BXHeaderMenu {
-  /**
-   * The trigger button.
-   */
-  @query('[part="trigger"]')
-  private _triggerNode?: HTMLAnchorElement;
-
   /**
    * `true` if this submenu should be in its active state.
    */
@@ -37,7 +31,7 @@ class DDSTopNavMenu extends BXHeaderMenu {
   updated(changedProperties) {
     super.updated(changedProperties);
     if (changedProperties.has('active')) {
-      const { active, _triggerNode: triggerNode } = this;
+      const { active, _topMenuItem: triggerNode } = this;
       if (triggerNode) {
         triggerNode.setAttribute('data-selected', String(Boolean(active)));
       }