chore(header): impoved focus behaviour of megadropdown

.changeset/blue-eyes-sip.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Improved keyboard navigation for `post-megadropdown` by auto-focusing first element when opened with Enter key and returning focus to trigger when closed.

packages/components/src/components.d.ts

@@ -294,6 +294,7 @@ export namespace Components {
     interface PostMainnavigation {
     }
     interface PostMegadropdown {
+        "focusFirst": () => Promise<void>;
         /**
           * Hides the dropdown with an animation.
          */

packages/components/src/components/post-megadropdown-trigger/post-megadropdown-trigger.tsx

@@ -50,6 +50,16 @@ export class PostMegadropdownTrigger {
     }
   }
 
+  private handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      this.handleToggle();
+      if (this.megadropdown && !this.ariaExpanded) {
+        setTimeout(() => this.megadropdown.focusFirst(), 100);
+      }
+    }
+  };
+
   componentDidLoad() {
     this.validateControlFor();
 
@@ -69,6 +79,7 @@ export class PostMegadropdownTrigger {
       this.slottedButton.addEventListener('click', () => {
         this.handleToggle();
       });
+      this.slottedButton.addEventListener('keydown', this.handleKeyDown);
     } else {
       console.warn('No button found within post-megadropdown-trigger');
     }

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

@@ -13,6 +13,8 @@ export class PostMegadropdown {
   private firstFocusableEl: HTMLElement | null;
   private lastFocusableEl: HTMLElement | null;
 
+  private triggerElement: HTMLPostMegadropdownTriggerElement | null = null;
+
   @State() device: DEVICE_SIZE;
 
   @Element() host: HTMLPostMegadropdownElement;
@@ -75,6 +77,9 @@ export class PostMegadropdown {
     PostMegadropdown.activeDropdown = this;
     this.postToggleMegadropdown.emit(this.isVisible);
     this.addOutsideClickListener();
+    this.triggerElement = document.querySelector(
+      `post-megadropdown-trigger[for="${this.host.id}"]`,
+    );
   }
 
   /**
@@ -86,6 +91,11 @@ export class PostMegadropdown {
     this.host.removeEventListener('keydown', e => this.keyboardHandler(e));
   }
 
+  @Method()
+  async focusFirst() {
+    this.firstFocusableEl?.focus();
+  }
+
   connectedCallback() {
     this.header = this.host.closest('post-header');
     if (this.header) {
@@ -166,6 +176,13 @@ export class PostMegadropdown {
     }
   }
 
+  private handleBackClick() {
+    this.hide();
+    if (this.triggerElement) {
+      setTimeout(() => this.triggerElement.querySelector('button')?.focus(), 100);
+    }
+  }
+
   render() {
     const containerStyle = this.isVisible ? {} : { display: 'none' };
 
@@ -177,7 +194,7 @@ export class PostMegadropdown {
           onAnimationEnd={() => this.handleAnimationEnd()}
         >
           <div class="megadropdown">
-            <div onClick={() => this.hide()} class="back-button">
+            <div onClick={() => this.handleBackClick()} class="back-button">
               <slot name="back-button"></slot>
             </div>
             <div onClick={() => this.hide()} class="close-button">

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

@@ -14,6 +14,16 @@
 
 ## Methods
 
+### `focusFirst() => Promise<void>`
+
+
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 ### `hide() => Promise<void>`
 
 Hides the dropdown with an animation.