fix(components): update style of language switch and fix keyboard nav

.changeset/moody-coats-kneel.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Updated style and keyboard navigation of `post-language-switch`.

packages/components/src/components.d.ts

@@ -311,6 +311,10 @@ export namespace Components {
           * Hides the popover menu and restores focus to the previously focused element.
          */
         "hide": () => Promise<void>;
+        /**
+          * Whether or not the post-menu is used within a post-language-switch component as the children structure is not the same.
+         */
+        "isLanguageSwitch": 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.
          */
@@ -1151,6 +1155,10 @@ declare namespace LocalJSX {
         "for": string;
     }
     interface PostMenu {
+        /**
+          * Whether or not the post-menu is used within a post-language-switch component as the children structure is not the same.
+         */
+        "isLanguageSwitch"?: boolean;
         /**
           * Emits when the menu is shown or hidden. The event payload is a boolean: `true` when the menu was opened, `false` when it was closed.
          */

packages/components/src/components/post-language-option/post-language-option.scss

@@ -2,7 +2,10 @@
 
 :host {
   display: inline-block;
-  width: fit-content;
+}
+
+:host([variant='dropdown']) {
+  width: 100%;
 }
 
 button {
@@ -30,10 +33,18 @@ a {
   width: 40px;
   height: 40px;
 
+  &:hover {
+    color: #504f4b;
+  }
+
   &[aria-current='true'],
   &[aria-current='page'] {
     background-color: #050400;
     color: #fff;
+
+    &:hover {
+      background-color: #504f4b;
+    }
   }
 }
 
@@ -49,7 +60,7 @@ a {
       content: '';
       left: -2px;
       height: 3px;
-      background-color: #504f4b;
+      background-color: #050400;
       width: calc(100% + 4px);
       display: block;
       position: absolute;
@@ -60,5 +71,13 @@ a {
       width: calc(100% - 5px);
       left: 2px;
     }
+
+    &:hover::after {
+      background-color: #504f4b;
+    }
+  }
+
+  &:hover {
+    color: #504f4b;
   }
 }

packages/components/src/components/post-language-switch/post-language-switch.scss

@@ -13,6 +13,10 @@ tokens.$default-map: components.$post-button;
 .post-language-switch-dropdown-container {
   display: flex;
   flex-direction: column;
+
+  > * {
+    width: 100%;
+  }
 }
 
 .post-language-switch-trigger {

packages/components/src/components/post-language-switch/post-language-switch.tsx

@@ -133,7 +133,7 @@ export class PostLanguageSwitch {
             <post-icon aria-hidden="true" name="chevrondown"></post-icon>
           </button>
         </post-menu-trigger>
-        <post-menu id={this.menuId}>
+        <post-menu isLanguageSwitch={true} id={this.menuId}>
           <div class="post-language-switch-dropdown-container">
             <slot></slot>
           </div>

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

@@ -1,4 +1,14 @@
-import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Method,
+  Prop,
+  State,
+} from '@stencil/core';
 import { Placement } from '@floating-ui/dom';
 import { version } from '@root/package.json';
 import { isFocusable } from '@/utils/is-focusable';
@@ -33,6 +43,11 @@ export class PostMenu {
    */
   @Prop() readonly placement?: Placement = 'bottom';
 
+  /**
+   * Whether or not the post-menu is used within a post-language-switch component as the children structure is not the same.
+   */
+  @Prop() isLanguageSwitch: boolean = false;
+
   /**
    * Holds the current visibility state of the menu.
    * This state is internally managed to track whether the menu is open (`true`) or closed (`false`),
@@ -76,7 +91,7 @@ export class PostMenu {
 
   /**
    * Displays the popover menu, focusing the first menu item.
-   * 
+   *
    * @param target - The HTML element relative to which the popover menu should be displayed.
    */
   @Method()
@@ -131,11 +146,15 @@ export class PostMenu {
 
   private controlKeyDownHandler(e: KeyboardEvent) {
     const menuItems = this.getSlottedItems();
+
     if (!menuItems.length) {
       return;
     }
 
-    const currentFocusedElement = this.root.activeElement as HTMLElement; // Use root's activeElement
+    const currentFocusedElement = this.isLanguageSwitch
+      ? (document.activeElement.shadowRoot.querySelector('button') as HTMLElement)
+      : (this.root.activeElement as HTMLElement); // Use root's active element
+
     let currentIndex = menuItems.findIndex(el => el === currentFocusedElement);
 
     switch (e.key) {
@@ -169,18 +188,25 @@ export class PostMenu {
     }
   }
 
-  private getSlottedItems() {
+  private getSlottedItems(): Element[] {
     const slot = this.host.shadowRoot.querySelector('slot');
     const slottedElements = slot ? slot.assignedElements() : [];
+    let menuItems;
 
-    const menuItems = slottedElements
-      .filter(el => el.tagName === 'POST-MENU-ITEM')
-      .map(el => {
-        const slot = el.shadowRoot.querySelector('slot');
-        const assignedElements = slot ? slot.assignedElements() : [];
-        return assignedElements.filter(isFocusable);
-      })
-      .flat();
+    if (this.isLanguageSwitch) {
+      menuItems = Array.from(document.querySelectorAll('post-language-option[variant="dropdown"]'))
+        .map(el => el.shadowRoot.querySelector('button'))
+        .flat();
+    } else {
+      menuItems = slottedElements
+        .filter(el => el.tagName === 'POST-MENU-ITEM')
+        .map(el => {
+          const slot = el.shadowRoot.querySelector('slot');
+          const assignedElements = slot ? slot.assignedElements() : [];
+          return assignedElements.filter(isFocusable);
+        })
+        .flat();
+    }
 
     return menuItems;
   }

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

@@ -7,9 +7,10 @@
 
 ## Properties
 
-| Property    | Attribute   | Description                                                                                                                                                                                                                                                                                                               | Type                                                                                                                                                                 | Default    |
-| ----------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
-| `placement` | `placement` | 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. | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'bottom'` |
+| Property           | Attribute            | Description                                                                                                                                                                                                                                                                                                               | Type                                                                                                                                                                 | Default    |
+| ------------------ | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
+| `isLanguageSwitch` | `is-language-switch` | Whether or not the post-menu is used within a post-language-switch component as the children structure is not the same.                                                                                                                                                                                                   | `boolean`                                                                                                                                                            | `false`    |
+| `placement`        | `placement`          | 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. | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'bottom'` |
 
 
 ## Events