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 323d9b3720fcd7fdac52cfe9bdac0d9c8706071c..9c3e017bef6c1a49dfb6d5c04680c19ec8960b2f 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 @@ -48,9 +48,11 @@ 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'); }); } @@ -69,14 +71,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() { @@ -93,13 +99,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"> <a aria-current={label} href={url} class="" menu-link-id={id}> <span class="heading-icon-first"> @@ -152,7 +159,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"> CLOSE