fix(components): fix the language switch keyboard navigation

.changeset/few-ways-beam.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': major
+'@swisspost/design-system-components': major
+---
+
+Renamed the "dropdown" variant to "menu" for the `post-language-swith`and `post-language-option` components.

packages/components/src/components.d.ts

@@ -311,10 +311,6 @@ 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.
          */
@@ -1155,10 +1151,6 @@ 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-header/post-header.tsx

@@ -123,7 +123,7 @@ export class PostHeader {
   }
 
   private switchLanguageSwitchMode() {
-    const variant: SwitchVariant = this.device === 'desktop' ? 'dropdown' : 'list';
+    const variant: SwitchVariant = this.device === 'desktop' ? 'menu' : 'list';
     this.host.querySelector('post-language-switch')?.setAttribute('variant', variant);
   }
 

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

@@ -1,83 +1,85 @@
 @use '@swisspost/design-system-styles/core' as post;
 
-:host {
+post-language-option {
   display: inline-block;
-}
-
-:host([variant='dropdown']) {
-  width: 100%;
-}
 
-button {
-  @include post.reset-button;
-}
+  button {
+    @include post.reset-button;
+  }
 
-a {
-  color: inherit;
-  text-decoration: none;
-}
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
 
-:is(a, button) {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  width: 100%;
-  padding: var(--post-language-option-padding);
+  :is(a, button) {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    padding: var(--post-language-option-padding);
+  }
 }
 
-.post-language-option-list {
-  @include post.focus-style;
-  border-radius: 2px;
-  width: 40px;
-  height: 40px;
+post-language-option:where([variant='list']) {
+  :is(a, button) {
+    @include post.focus-style;
+    border-radius: 2px;
+    width: 40px;
+    height: 40px;
 
-  &:hover {
-    color: #504f4b;
-  }
+    &:hover {
+      color: #504f4b;
+    }
 
-  &[aria-current='true'],
-  &[aria-current='page'] {
-    background-color: #050400;
-    color: #fff;
+    &[aria-current='true'],
+    &[aria-current='page'] {
+      background-color: #050400;
+      color: #fff;
 
-    &:hover {
-      background-color: #504f4b;
+      &:hover {
+        background-color: #504f4b;
+      }
     }
   }
 }
 
-.post-language-option-dropdown {
-  padding-block: 13px;
-  padding-inline: 24px;
-  box-sizing: border-box;
-  position: relative;
+post-language-option:where([variant='menu']) {
+  width: 100%;
 
-  &[aria-current='true'],
-  &[aria-current='page'] {
-    &::after {
-      content: '';
-      left: -2px;
-      height: 3px;
-      background-color: #050400;
-      width: calc(100% + 4px);
-      display: block;
-      position: absolute;
-      bottom: 3px;
-    }
+  :is(a, button) {
+    padding-block: 13px;
+    padding-inline: 24px;
+    box-sizing: border-box;
+    position: relative;
 
-    &:focus::after {
-      width: calc(100% - 5px);
-      left: 2px;
-    }
+    &[aria-current='true'],
+    &[aria-current='page'] {
+      &::after {
+        content: '';
+        left: -2px;
+        height: 3px;
+        background-color: #050400;
+        width: calc(100% + 4px);
+        display: block;
+        position: absolute;
+        bottom: 3px;
+      }
+
+      &:focus::after {
+        width: calc(100% - 5px);
+        left: 2px;
+      }
 
-    &:hover::after {
-      background-color: #504f4b;
+      &:hover::after {
+        background-color: #504f4b;
+      }
     }
-  }
 
-  &:hover {
-    color: #504f4b;
+    &:hover {
+      color: #504f4b;
+    }
   }
 }

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

@@ -19,7 +19,6 @@ import { SwitchVariant } from '../post-language-switch/switch-variants';
 @Component({
   tag: 'post-language-option',
   styleUrl: 'post-language-option.scss',
-  shadow: true,
 })
 export class PostLanguageOption {
   @Element() host: HTMLPostLanguageOptionElement;
@@ -125,10 +124,9 @@ export class PostLanguageOption {
     const lang = this.code.toLowerCase();
 
     return (
-      <Host data-version={version} role="listitem">
+      <Host data-version={version} role={this.variant ? `${this.variant}item` : null}>
         {this.url ? (
           <a
-            class={this.variant ? `post-language-option-${this.variant}` : ''}
             aria-current={this.active ? 'page' : undefined}
             aria-label={this.name}
             href={this.url}
@@ -140,7 +138,6 @@ export class PostLanguageOption {
           </a>
         ) : (
           <button
-            class={this.variant ? `post-language-option-${this.variant}` : ''}
             aria-current={this.active ? 'true' : undefined}
             aria-label={this.name}
             lang={lang}

packages/components/src/components/post-language-option/readme.md

@@ -7,13 +7,13 @@
 
 ## Properties
 
-| Property            | Attribute | Description                                                                                                                                                 | Type                   | Default     |
-| ------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ----------- |
-| `active`            | `active`  | If set to `true`, the language option is considered the current language for the page.                                                                      | `boolean`              | `undefined` |
-| `code` _(required)_ | `code`    | The ISO 639 language code, formatted according to [RFC 5646 (also known as BCP 47)](https://datatracker.ietf.org/doc/html/rfc5646). For example, "de".      | `string`               | `undefined` |
-| `name`              | `name`    | The full name of the language. For example, "Deutsch".                                                                                                      | `string`               | `undefined` |
-| `url`               | `url`     | The URL used for the href attribute of the internal anchor. This field is optional; if not provided, a button will be used internally instead of an anchor. | `string`               | `undefined` |
-| `variant`           | `variant` | The variant of the post-language-switch parent (dynamically set by the parent)                                                                              | `"dropdown" \| "list"` | `undefined` |
+| Property            | Attribute | Description                                                                                                                                                 | Type               | Default     |
+| ------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ----------- |
+| `active`            | `active`  | If set to `true`, the language option is considered the current language for the page.                                                                      | `boolean`          | `undefined` |
+| `code` _(required)_ | `code`    | The ISO 639 language code, formatted according to [RFC 5646 (also known as BCP 47)](https://datatracker.ietf.org/doc/html/rfc5646). For example, "de".      | `string`           | `undefined` |
+| `name`              | `name`    | The full name of the language. For example, "Deutsch".                                                                                                      | `string`           | `undefined` |
+| `url`               | `url`     | The URL used for the href attribute of the internal anchor. This field is optional; if not provided, a button will be used internally instead of an anchor. | `string`           | `undefined` |
+| `variant`           | `variant` | The variant of the post-language-switch parent (dynamically set by the parent)                                                                              | `"list" \| "menu"` | `undefined` |
 
 
 ## Events

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

@@ -77,7 +77,7 @@ export class PostLanguageSwitch {
     });
   }
 
-  componentShouldUpdate() {
+  componentWillUpdate() {
     this.updateChildrenVariant();
   }
 
@@ -100,7 +100,7 @@ export class PostLanguageSwitch {
       });
 
       // Hides the dropdown when an option has been clicked
-      if (this.variant === 'dropdown') {
+      if (this.variant === 'menu') {
         const menu = this.host.shadowRoot.querySelector('post-menu') as HTMLPostMenuElement;
         menu.toggle(menu);
       }
@@ -133,10 +133,8 @@ export class PostLanguageSwitch {
             <post-icon aria-hidden="true" name="chevrondown"></post-icon>
           </button>
         </post-menu-trigger>
-        <post-menu isLanguageSwitch={true} id={this.menuId}>
-          <div class="post-language-switch-dropdown-container">
-            <slot></slot>
-          </div>
+        <post-menu id={this.menuId} class="post-language-switch-dropdown-container">
+          <slot></slot>
         </post-menu>
       </Host>
     );

packages/components/src/components/post-language-switch/readme.md

@@ -5,11 +5,11 @@
 
 ## Properties
 
-| Property      | Attribute     | Description                                                                                                                                                | Type                   | Default     |
-| ------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ----------- |
-| `caption`     | `caption`     | A title for the list of language options                                                                                                                   | `string`               | `undefined` |
-| `description` | `description` | A descriptive text for the list of language options                                                                                                        | `string`               | `undefined` |
-| `variant`     | `variant`     | Variant that determines the rendering of the language switch either as a list (used on mobile in the header) or a dropdown (used on desktop in the header) | `"dropdown" \| "list"` | `'list'`    |
+| Property      | Attribute     | Description                                                                                                                                                | Type               | Default     |
+| ------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ----------- |
+| `caption`     | `caption`     | A title for the list of language options                                                                                                                   | `string`           | `undefined` |
+| `description` | `description` | A descriptive text for the list of language options                                                                                                        | `string`           | `undefined` |
+| `variant`     | `variant`     | Variant that determines the rendering of the language switch either as a list (used on mobile in the header) or a dropdown (used on desktop in the header) | `"list" \| "menu"` | `'list'`    |
 
 
 ## Dependencies

packages/components/src/components/post-language-switch/switch-variants.ts

@@ -1,3 +1,3 @@
-export const SWITCH_VARIANTS = ['list', 'dropdown'] as const;
+export const SWITCH_VARIANTS = ['list', 'menu'] as const;
 
 export type SwitchVariant = (typeof SWITCH_VARIANTS)[number];

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

@@ -1,14 +1,10 @@
-import { Component, h, Element, Host } from '@stencil/core';
+import { Component, h, Host } from '@stencil/core';
 import { version } from '@root/package.json';
 
 @Component({
   tag: 'post-menu-item',
-  shadow: true,
-  styleUrl: 'post-menu-item.scss',
 })
 export class PostMenuItem {
-  @Element() host: HTMLPostMenuItemElement;
-
   render() {
     return (
       <Host role="menuitem" data-version={version}>

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

@@ -8,4 +8,9 @@ post-popovercontainer {
   padding: var(--post-menu-padding);
   background-color: var(--post-menu-bg, #ffffff);
   border-color: var(--post-menu-bg, #ffffff);
-}
+}
+
+.popover-container {
+  display: flex;
+  flex-direction: column;
+}

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

@@ -11,7 +11,7 @@ import {
 } from '@stencil/core';
 import { Placement } from '@floating-ui/dom';
 import { version } from '@root/package.json';
-import { isFocusable } from '@/utils/is-focusable';
+import { getFocusableChildren } from '@/utils/get-focusable-children';
 import { getRoot } from '@/utils';
 
 @Component({
@@ -43,11 +43,6 @@ 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`),
@@ -151,11 +146,10 @@ export class PostMenu {
       return;
     }
 
-    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);
+    let currentIndex = menuItems.findIndex(el => {
+      // Check if the item is currently focused within its rendered scope (document or shadow root)
+      return el === getRoot(el).activeElement;
+    });
 
     switch (e.key) {
       case this.KEYCODES.UP:
@@ -191,24 +185,16 @@ export class PostMenu {
   private getSlottedItems(): Element[] {
     const slot = this.host.shadowRoot.querySelector('slot');
     const slottedElements = slot ? slot.assignedElements() : [];
-    let menuItems;
 
-    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;
+    return (
+      slottedElements
+        // If the element is a slot, get the assigned elements
+        .flatMap(el => (el instanceof HTMLSlotElement ? el.assignedElements() : el))
+        // Filter out elements that have a 'menuitem' role
+        .filter(el => el.getAttribute('role') === 'menuitem')
+        // For each menu item, get any focusable children (e.g., buttons, links)
+        .flatMap(el => Array.from(getFocusableChildren(el)))
+    );
   }
 
   render() {