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 e61b7ea51f4fab028a6943d2ceaebd03200e0a5a..b4567b984727781851a5921a3495739d16739103 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,25 +44,23 @@ 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) => { item.classList.remove('desktop-menu-link--is-active'); + item.setAttribute('aria-expanded', 'false'); }); menuPanelItems.forEach((item) => { item.classList.remove('hy-desktop-menu-panel--is-active'); + item.setAttribute('aria-hidden', 'true'); }); } - @Listen('click') - handleMenuDesktopLinkClick(event) { - this.handleDesktopMenuClose(); - event.stopPropagation(); - } - handleDesktopMenuToggle(id) { - console.log(id); - const menuItems = this.el.shadowRoot.querySelectorAll(`.desktop-menu-link`); const menuPanelItems = this.el.shadowRoot.querySelectorAll('.hy-desktop-menu-panel'); // all panels const activeMenuItem = this.el.shadowRoot.querySelector(`.desktop-menu-link[link-id="${id}"]`); @@ -71,14 +69,18 @@ export class HyDesktopMenuLinks { // Reset elements by removing the active classes. menuItems.forEach((item) => { item.classList.remove('desktop-menu-link--is-active'); + item.setAttribute('aria-expanded', 'false'); }); menuPanelItems.forEach((item) => { item.classList.remove('hy-desktop-menu-panel--is-active'); + item.setAttribute('aria-hidden', 'true'); }); // Add active classes to the currently active item and its sibling element. activeMenuItem.classList.add('desktop-menu-link--is-active'); + activeMenuItem.setAttribute('aria-expanded', 'true'); activeMenuItemSibling.classList.add('hy-desktop-menu-panel--is-active'); + activeMenuItemSibling.setAttribute('aria-hidden', 'false'); } componentDidLoad() { @@ -99,13 +101,14 @@ export class HyDesktopMenuLinks { link-id={id} onMouseOver={() => this.handleDesktopMenuToggle(id)} onFocus={() => this.handleDesktopMenuToggle(id)} + aria-expanded="false" > {label} <span class="desktop-menu-link__heading__icon"> <hy-icon icon={'hy-icon-caret-down'} size={16} /> </span> </button> - <div class="hy-desktop-menu-panel" onMouseLeave={() => this.handleDesktopMenuClose()}> + <div class="hy-desktop-menu-panel" onMouseLeave={() => this.handleDesktopMenuClose()} aria-hidden="true"> <div class="hy-desktop-menu-panel__desktop-menu"> <div class="hy-desktop-menu-panel__desktop-menu__menu-items"> <a @@ -169,7 +172,7 @@ export class HyDesktopMenuLinks { class={{ 'hy-desktop-menu-panel__panel-toggle': true, }} - aria-label="close" + aria-label="Close menu" > <span class="hy-desktop-menu-panel__panel-toggle__label"> <span class="hy-desktop-menu-panel__panel-toggle__label__title">CLOSE</span>