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 the `post-megadropdown` by focusing on the first element when it is opened with the Enter key and returning the focus to the trigger when it is 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

@@ -26,6 +26,12 @@ export class PostMegadropdownTrigger {
    */
   private slottedButton: HTMLButtonElement | null = null;
 
+  /**
+   * Tracks whether this trigger's dropdown was expanded before a state change.
+   * Used to determine if this trigger should handle focus when its dropdown closes.
+   */
+  private wasExpanded: boolean = false;
+
   /**
    * Watch for changes to the `for` property to validate its type and ensure it is a string.
    * @param forValue - The new value of the `for` property.
@@ -50,13 +56,29 @@ 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();
 
     // Check if the mega dropdown attached to the trigger is expanded or not
     document.addEventListener('postToggleMegadropdown', (event: CustomEvent) => {
       if ((event.target as HTMLPostMegadropdownElement).id === this.for) {
         this.ariaExpanded = event.detail;
+
+        if (this.wasExpanded && !this.ariaExpanded) {
+          setTimeout(() => this.slottedButton?.focus(), 100);
+        }
+        this.wasExpanded = this.ariaExpanded;
+
         if (this.slottedButton) {
           this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
         }
@@ -69,6 +91,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

@@ -83,11 +83,16 @@ export class PostMegadropdown {
    */
   @Method()
   async hide() {
+    this.postToggleMegadropdown.emit(false);
     this.animationClass = 'slide-out';
-    PostMegadropdown.activeDropdown = null;
     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) {
@@ -112,7 +117,7 @@ export class PostMegadropdown {
     if (this.animationClass === 'slide-out') {
       this.isVisible = false;
       this.animationClass = null;
-      this.postToggleMegadropdown.emit(this.isVisible);
+      PostMegadropdown.activeDropdown = null;
       this.removeOutsideClickListener();
     }
   }

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.