fix(components): update mobile menu behaviour

.changeset/poor-laws-impress.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-components': patch
+'@swisspost/design-system-styles': patch
+---
+
+Fixed display of `post-megadropdown` in header.

packages/components/src/components.d.ts

@@ -7,10 +7,12 @@
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { HeadingLevel } from "./types/index";
 import { BannerType } from "./components/post-banner/banner-types";
+import { DEVICE_SIZE } from "./components/post-header/post-header";
 import { SwitchVariant } from "./components/post-language-switch/switch-variants";
 import { Placement } from "@floating-ui/dom";
 export { HeadingLevel } from "./types/index";
 export { BannerType } from "./components/post-banner/banner-types";
+export { DEVICE_SIZE } from "./components/post-header/post-header";
 export { SwitchVariant } from "./components/post-language-switch/switch-variants";
 export { Placement } from "@floating-ui/dom";
 export namespace Components {
@@ -375,6 +377,10 @@ export namespace Components {
           * Programmatically hide this tooltip
          */
         "hide": () => Promise<void>;
+        /**
+          * Whether or not the popover should close when user clicks outside of it
+         */
+        "manualClose": boolean;
         /**
           * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries.
          */
@@ -494,6 +500,10 @@ export interface PostCollapsibleCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPostCollapsibleElement;
 }
+export interface PostHeaderCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLPostHeaderElement;
+}
 export interface PostLanguageOptionCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPostLanguageOptionElement;
@@ -632,7 +642,18 @@ declare global {
         prototype: HTMLPostFooterElement;
         new (): HTMLPostFooterElement;
     };
+    interface HTMLPostHeaderElementEventMap {
+        "postUpdateDevice": DEVICE_SIZE;
+    }
     interface HTMLPostHeaderElement extends Components.PostHeader, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLPostHeaderElementEventMap>(type: K, listener: (this: HTMLPostHeaderElement, ev: PostHeaderCustomEvent<HTMLPostHeaderElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLPostHeaderElementEventMap>(type: K, listener: (this: HTMLPostHeaderElement, ev: PostHeaderCustomEvent<HTMLPostHeaderElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLPostHeaderElement: {
         prototype: HTMLPostHeaderElement;
@@ -1040,6 +1061,10 @@ declare namespace LocalJSX {
         "label": string;
     }
     interface PostHeader {
+        /**
+          * An event emitted when the device has changed
+         */
+        "onPostUpdateDevice"?: (event: PostHeaderCustomEvent<DEVICE_SIZE>) => void;
     }
     /**
      * @class PostIcon - representing a stencil component
@@ -1191,6 +1216,10 @@ declare namespace LocalJSX {
           * Gap between the edge of the page and the popover
          */
         "edgeGap"?: number;
+        /**
+          * Whether or not the popover should close when user clicks outside of it
+         */
+        "manualClose"?: boolean;
         /**
           * Fires whenever the popover gets shown or hidden, passing the new state in event.details as a boolean
          */

packages/components/src/components/post-header/post-header.scss

@@ -173,6 +173,16 @@ slot[name='post-logo'] {
     }
   }
 
+  .navigation.extended {
+    height: calc(100vh - var(--header-height));
+    display: flex;
+    flex-direction: column;
+
+    ::slotted(post-mainnavigation) {
+      flex-grow: 1;
+    }
+  }
+
   ::slotted(post-mainnavigation) {
     background-color: var(--post-core-color-sandgrey-002);
     gap: var(--post-core-dimension-32);

packages/components/src/components/post-header/post-header.tsx

@@ -1,17 +1,30 @@
-import { Component, h, Host, State, Element, Method, Watch } from '@stencil/core';
+import {
+  Component,
+  h,
+  Host,
+  State,
+  Element,
+  Method,
+  Watch,
+  Event,
+  EventEmitter,
+} from '@stencil/core';
 import { throttle } from 'throttle-debounce';
 import { version } from '@root/package.json';
 import { SwitchVariant } from '@/components';
 import { slideDown, slideUp } from '@/animations/slide';
+import { getFocusableChildren } from '@/utils/get-focusable-children';
 
-type DEVICE_SIZE = 'mobile' | 'tablet' | 'desktop' | null;
+export type DEVICE_SIZE = 'mobile' | 'tablet' | 'desktop' | null;
 
 @Component({
   tag: 'post-header',
   shadow: true,
   styleUrl: './post-header.scss',
 })
 export class PostHeader {
+  private firstFocusableEl: HTMLElement | null;
+  private lastFocusableEl: HTMLElement | null;
   private scrollParent = null;
   private mobileMenu: HTMLElement;
   private mobileMenuAnimation: Animation;
@@ -24,6 +37,7 @@ export class PostHeader {
     window.addEventListener('resize', this.throttledResize, { passive: true });
     this.handleResize();
     this.handleScrollEvent();
+    this.getFocusableElements();
   }
 
   @Element() host: HTMLPostHeaderElement;
@@ -34,8 +48,23 @@ export class PostHeader {
   @Watch('mobileMenuExtended')
   frozeBody(isMobileMenuExtended: boolean) {
     document.body.style.overflow = isMobileMenuExtended ? 'hidden' : '';
+
+    if (isMobileMenuExtended) {
+      this.host.addEventListener('keydown', e => {
+        this.keyboardHandler(e);
+      });
+    } else {
+      this.host.removeEventListener('keydown', e => {
+        this.keyboardHandler(e);
+      });
+    }
   }
 
+  /**
+   * An event emitted when the device has changed
+   */
+  @Event() postUpdateDevice: EventEmitter<DEVICE_SIZE>;
+
   /**
    * Toggles the mobile navigation.
    */
@@ -57,6 +86,47 @@ export class PostHeader {
     if (!this.mobileMenuExtended) await this.mobileMenuAnimation.finished;
   }
 
+  // Get all the focusable elements in the post-header mobile menu
+  private getFocusableElements() {
+    // Get elements in the correct order (different as the DOM order)
+    const focusableEls = [
+      ...Array.from(this.host.querySelectorAll('.list-inline:not([slot="meta-navigation"]) > li')),
+      ...Array.from(
+        this.host.querySelectorAll(
+          'nav > post-list > div > post-list-item, post-mainnavigation > .back-button, post-megadropdown-trigger',
+        ),
+      ),
+      ...Array.from(
+        this.host.querySelectorAll(
+          '.list-inline[slot="meta-navigation"] > li, post-language-option',
+        ),
+      ),
+    ];
+
+    // Add the main toggle menu button to the list of focusable children
+    const focusableChildren = [
+      this.host.querySelector('post-togglebutton'),
+      ...focusableEls.flatMap(el => Array.from(getFocusableChildren(el))),
+    ];
+
+    this.firstFocusableEl = focusableChildren[0];
+    this.lastFocusableEl = focusableChildren[focusableChildren.length - 1];
+  }
+
+  private keyboardHandler(e: KeyboardEvent) {
+    if (e.key === 'Tab') {
+      if (e.shiftKey && document.activeElement === this.firstFocusableEl) {
+        // If back tab (Tab + Shift) and first element is focused, focus goes to the last element of the megadropdown
+        e.preventDefault();
+        this.lastFocusableEl.focus();
+      } else if (!e.shiftKey && document.activeElement === this.lastFocusableEl) {
+        // If Tab and last element is focused, focus goes back to the first element of the megadropdown
+        e.preventDefault();
+        this.firstFocusableEl.focus();
+      }
+    }
+  }
+
   private handleScrollEvent() {
     // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
     const st = Math.max(
@@ -116,6 +186,8 @@ export class PostHeader {
     // Apply only on change for doing work only when necessary
     if (newDevice !== previousDevice) {
       this.device = newDevice;
+
+      this.postUpdateDevice.emit(this.device);
       window.requestAnimationFrame(() => {
         this.switchLanguageSwitchMode();
       });

packages/components/src/components/post-header/readme.md

@@ -5,6 +5,13 @@
 <!-- Auto Generated Below -->
 
 
+## Events
+
+| Event              | Description                                  | Type                                             |
+| ------------------ | -------------------------------------------- | ------------------------------------------------ |
+| `postUpdateDevice` | An event emitted when the device has changed | `CustomEvent<"desktop" \| "mobile" \| "tablet">` |
+
+
 ## Methods
 
 ### `toggleMobileMenu() => Promise<void>`

packages/components/src/components/post-mainnavigation/post-mainnavigation.scss

@@ -41,6 +41,16 @@ post-mainnavigation {
     }
   }
 
+  .back-button {
+    post-icon {
+      transform: rotate(180deg);
+    }
+
+    @include media.max(lg) {
+      font-size: 1rem;
+    }
+  }
+
   // desktop styles
   @include media.min(lg) {
     nav {
@@ -103,6 +113,13 @@ post-mainnavigation {
       }
     }
 
+    post-megadropdown {
+      button:not(.btn-icon-close),
+      a {
+        @include header-mx.mobile-header-interactive;
+      }
+    }
+
     [slot='back-button'] {
       display: none;
     }

packages/components/src/components/post-megadropdown/post-megadropdown.scss

@@ -1,5 +1,6 @@
 @use '@swisspost/design-system-styles/mixins/media';
 @use '@swisspost/design-system-styles/variables/color';
+@use '@swisspost/design-system-styles/components/header/mixins' as header-mx;
 
 @keyframes slide-in {
   0% {
@@ -39,13 +40,16 @@ post-popovercontainer {
 
   @include media.max(lg) {
     --post-global-header-height: 64px;
-    position: absolute;
+    --post-main-header-height: 48px;
+    position: fixed;
     top: var(--post-header-height) !important;
     bottom: 0;
     left: 0;
     width: 100%;
     height: auto;
+    max-height: calc(100vh - var(--header-height));
     border-top: unset;
+    overflow: auto;
 
     &.slide-in {
       animation: slide-in;
@@ -103,15 +107,6 @@ post-popovercontainer {
     }
   }
 
-  // Unset styles added by parent main navigation
-  a:hover {
-    border-block-width: 0;
-
-    &::after {
-      content: unset;
-    }
-  }
-
   post-list {
     display: grid;
     grid-row: span 2;
@@ -134,44 +129,63 @@ post-popovercontainer {
 
       h3 {
         font-size: 20px;
-        border-bottom: 1px solid #050400;
-        padding: 15px 12px 14px 0;
         display: block;
         font-weight: 900;
 
+        &:not(:has(a)) {
+          padding: 15px 12px 14px 8px;
+          border-bottom: 1px solid #050400;
+        }
+
         a {
+          padding-block: 15px 14px;
+          padding-inline-start: 8px;
+          border-radius: 0;
           text-decoration: none;
-          width: 100%;
           font-size: inherit;
-          display: inline-block;
-          font-weight: inherit;
-          height: unset;
-          padding: 0;
-          border: 0;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          min-height: 53px;
+
+          @include header-mx.mobile-header-interactive() {
+            height: unset;
+            font-weight: 900;
+          }
         }
 
         @include media.max(lg) {
-          font-size: 16px;
-          padding: 12px 12px 11px 0;
+          font-size: 1rem;
+
+          &:not(:has(a)) {
+            padding: 15px 12px 14px 8px;
+            border-bottom: 1px solid #050400;
+          }
         }
       }
     }
   }
 
   post-list-item {
-    border-bottom: 1px solid #050400;
-
     > a {
-      padding: 13px 12px 12px 0;
-      display: block;
+      padding-block: 13px 12px;
+      padding-inline-start: 8px;
+      display: flex;
       text-decoration: none;
       width: 100%;
-      border-bottom: 0;
       height: auto;
-      border-top: 0;
+      min-height: 48px;
+
+      &:hover {
+        border-block-width: 0;
+      }
+
+      @include media.min(lg) {
+        font-size: 1.25rem;
+      }
 
       @include media.max(lg) {
-        padding: 12px 12px 11px 0;
+        padding-block: 12px 11px;
       }
     }
   }
@@ -184,10 +198,6 @@ post-popovercontainer {
       width: auto;
     }
 
-    post-icon {
-      transform: rotate(180deg);
-    }
-
     @include media.max(lg) {
       display: block;
     }