Add focus to button when desktop panel is closed

src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx

@@ -16,7 +16,7 @@ export interface DesktopLinks {
 }
 
 import {ColorVariant} from '../../../utils/utils';
-import {Component, h, Element, Listen, Prop, State, Watch} from '@stencil/core';
+import {Component, h, Element, Prop, State, Watch} from '@stencil/core';
 
 @Component({
   tag: 'hy-desktop-menu-links',
@@ -44,6 +44,10 @@ export class HyDesktopMenuLinks {
   handleDesktopMenuClose() {
     const menuItems = this.el.shadowRoot.querySelectorAll(`.desktop-menu-link`);
     const menuPanelItems = this.el.shadowRoot.querySelectorAll('.hy-desktop-menu-panel');
+    const activeMenuItem = this.el.shadowRoot.querySelector(`.desktop-menu-link[aria-expanded="true"]`);
+
+    // Return focus to the button of the last desktop panel that was active.
+    if (activeMenuItem !== null) (activeMenuItem as HTMLElement).focus();
 
     // Reset elements by removing the active classes.
     menuItems.forEach((item) => {
@@ -56,12 +60,6 @@ export class HyDesktopMenuLinks {
     });
   }
 
-  @Listen('click')
-  handleMenuDesktopLinkClick(event) {
-    this.handleDesktopMenuClose();
-    event.stopPropagation();
-  }
-
   handleDesktopMenuToggle(id) {
     const menuItems = this.el.shadowRoot.querySelectorAll(`.desktop-menu-link`);
     const menuPanelItems = this.el.shadowRoot.querySelectorAll('.hy-desktop-menu-panel');