Merge branch 'NXSTAGE-1000-upper-navigation' of...

Merge branch 'NXSTAGE-1000-upper-navigation' of version.helsinki.fi:julkiset-sivut/design-system-lib into NXSTAGE-1000-upper-navigation

merging

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>