diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx index 9c3e017bef6c1a49dfb6d5c04680c19ec8960b2f..8f7a687683b1b1055124732d2a9dc447f71463e2 100644 --- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx +++ b/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');