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 fa226114de97b2ea62346197891e64a29f7afd5a..c31477cc30a3ffea39f883ca20cbf597d7774f3d 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 @@ -93,6 +93,8 @@ export class HyDesktopMenuLinks { class={className} link-id={item.menuLinkId} onMouseOver={() => this.handleMenuDesktopHover(item.menuLinkId)} + onFocus={() => this.handleMenuDesktopHover(item.menuLinkId)} + tabIndex={0} > {item.label} <span class="desktop-menu-link__heading__icon"> @@ -107,63 +109,69 @@ export class HyDesktopMenuLinks { render() { return ( - <div class="hy-site-header__menu-desktop"> - {this.firstLevelLinksList} - <div class="hy-desktop-menu-panel" onMouseLeave={() => this.closeDesktopMenuPanel()}> - <div class="hy-desktop-menu-panel__desktop-menu"> - <nav role={'navigation'}> - {this._dataDesktopLinks && - this._dataDesktopLinks.map((link) => { - return ( - <ul class={'desktop-menu first'} menu-link-id={link.menuLinkId}> - <li class={'first'}> - <a aria-current={link.label} href={link.url} class="" menu-link-id={link.menuLinkId}> - <span class="heading-icon-first"> - <hy-icon icon={'hy-icon-arrow-right'} size={40} /> - </span> - <span class="hy-menu-item__label">{link.label}</span> - </a> - {link.items && ( - <ul class="second" menu-link-id={link.menuLinkId}> - {link.items.map((subitem) => { - return ( - <li class={'second'}> - <a - aria-current={subitem.label} - href={subitem.url} - class="" - menu-link-id={subitem.menuLinkId} - > - <span class="heading-icon-second"> - <hy-icon icon={'hy-icon-caret-right'} size={12} /> - </span> - <span class="hy-menu-item__label">{subitem.label}</span> - </a> - </li> - ); - })} + <nav role={'navigation'} class="hy-site-header__menu-desktop"> + <ul> + {this.firstLevelLinksList.map((firstLevelLink) => { + return ( + <li> + {firstLevelLink} + <div class="hy-desktop-menu-panel" onMouseLeave={() => this.closeDesktopMenuPanel()}> + <div class="hy-desktop-menu-panel__desktop-menu"> + {this._dataDesktopLinks && + this._dataDesktopLinks.map((link) => { + return ( + <ul class={'desktop-menu first'} menu-link-id={link.menuLinkId}> + <li class={'first'}> + <a aria-current={link.label} href={link.url} class="" menu-link-id={link.menuLinkId}> + <span class="heading-icon-first"> + <hy-icon icon={'hy-icon-arrow-right'} size={40} /> + </span> + <span class="hy-menu-item__label">{link.label}</span> + </a> + {link.items && ( + <ul class="second" menu-link-id={link.menuLinkId}> + {link.items.map((subitem) => { + return ( + <li class={'second'}> + <a + aria-current={subitem.label} + href={subitem.url} + class="" + menu-link-id={subitem.menuLinkId} + > + <span class="heading-icon-second"> + <hy-icon icon={'hy-icon-caret-right'} size={12} /> + </span> + <span class="hy-menu-item__label">{subitem.label}</span> + </a> + </li> + ); + })} + </ul> + )} + </li> </ul> - )} - </li> - </ul> - ); - })} - </nav> - </div> - <button - onClick={() => this.closeDesktopMenuPanel()} - class={{ - 'hy-desktop-menu-panel__panel-toggle': true, - }} - aria-label="close" - > - <span class="hy-desktop-menu-panel__panel-toggle__label"> - CLOSE - <hy-icon icon={'hy-icon-remove'} size={20} fill={ColorVariant.black} /> - </span> - </button> - </div> - </div> + ); + })} + </div> + <button + onClick={() => this.closeDesktopMenuPanel()} + class={{ + 'hy-desktop-menu-panel__panel-toggle': true, + }} + aria-label="close" + > + <span class="hy-desktop-menu-panel__panel-toggle__label"> + CLOSE + <hy-icon icon={'hy-icon-remove'} size={20} fill={ColorVariant.black} /> + </span> + </button> + </div> + </li> + ); + })} + </ul> + </nav> ); } }