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

.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-switch` and `post-language-option` components.

.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/cypress/e2e/language-option.cy.ts

@@ -4,15 +4,15 @@ describe('language-option', () => {
   describe('button', () => {
     beforeEach(() => {
       cy.getComponent('language-option', LANGUAGE_OPTION_ID);
-      cy.get('@language-option').shadow().find('button').as('button');
+      cy.get('@language-option').find('button').as('button');
     });
 
     it('should render', () => {
       cy.get('@language-option').should('exist');
     });
 
     it('should not render an anchor', () => {
-      cy.get('@language-option').shadow().find('a').should('not.exist');
+      cy.get('@language-option').find('a').should('not.exist');
     });
 
     it('should render a button with correct properties', () => {
@@ -35,15 +35,15 @@ describe('language-option', () => {
   describe('anchor', () => {
     beforeEach(() => {
       cy.getComponent('language-option', LANGUAGE_OPTION_ID, 'anchor');
-      cy.get('@language-option').shadow().find('a').as('anchor');
+      cy.get('@language-option').find('a').as('anchor');
     });
 
     it('should render', () => {
       cy.get('@language-option').should('exist');
     });
 
     it('should not render a button', () => {
-      cy.get('@language-option').shadow().find('button').should('not.exist');
+      cy.get('@language-option').find('button').should('not.exist');
     });
 
     it('should render an anchor', () => {

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,64 +1,83 @@
 @use '@swisspost/design-system-styles/core' as post;
+@use '@swisspost/design-system-styles/mixins/utilities' as utilities-mx;
 
-:host {
+post-language-option {
   display: inline-block;
-  width: fit-content;
-}
 
-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);
+    border-radius: 2px;
+    @include utilities-mx.focus-style;
+  }
 }
 
-.post-language-option-list {
-  @include post.focus-style;
-  border-radius: 2px;
-  width: 40px;
-  height: 40px;
+post-language-option:where([variant='list']) {
+  :is(a, button) {
+    width: 40px;
+    height: 40px;
 
-  &[aria-current='true'],
-  &[aria-current='page'] {
-    background-color: #050400;
-    color: #fff;
+    &:hover {
+      color: #504f4b;
+    }
+
+    &[aria-current='true'],
+    &[aria-current='page'] {
+      background-color: #050400;
+      color: #fff;
+
+      &: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%;
+
+  :is(a, button) {
+    padding-block: 13px;
+    padding-inline: 24px;
+    box-sizing: border-box;
+    position: relative;
+    left: -1px;
+    width: calc(100% + 2px);
+
+    &[aria-current='true'],
+    &[aria-current='page'] {
+      &::after {
+        content: '';
+        left: 0;
+        height: 3px;
+        background-color: #050400;
+        width: 100%;
+        display: block;
+        position: absolute;
+        bottom: 3px;
+      }
 
-  &[aria-current='true'],
-  &[aria-current='page'] {
-    &::after {
-      content: '';
-      left: -2px;
-      height: 3px;
-      background-color: #504f4b;
-      width: calc(100% + 4px);
-      display: block;
-      position: absolute;
-      bottom: 3px;
+      &:hover::after {
+        background-color: #504f4b;
+      }
     }
 
-    &:focus::after {
-      width: calc(100% - 5px);
-      left: 2px;
+    &: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;
@@ -124,27 +123,33 @@ export class PostLanguageOption {
   render() {
     const lang = this.code.toLowerCase();
 
+    const emitOnKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        this.emitChange();
+      }
+    };
+
     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}
             hrefLang={lang}
             lang={lang}
             onClick={() => this.emitChange()}
+            onKeyDown={emitOnKeyDown}
           >
             <slot />
           </a>
         ) : (
           <button
-            class={this.variant ? `post-language-option-${this.variant}` : ''}
             aria-current={this.active ? 'true' : undefined}
             aria-label={this.name}
             lang={lang}
             onClick={() => this.emitChange()}
+            onKeyDown={emitOnKeyDown}
           >
             <slot />
           </button>

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.scss

@@ -3,16 +3,26 @@
 @use '@swisspost/design-system-styles/mixins/button' as button-mx;
 @use '@swisspost/design-system-styles/mixins/utilities' as utilities-mx;
 @use '@swisspost/design-system-styles/components/header/mixins' as header-mx;
+@use '@swisspost/design-system-styles/mixins/media';
 
 tokens.$default-map: components.$post-button;
 
 :host {
   display: block;
+
+  @include media.max(lg) {
+    display: flex !important;
+    gap: 0.5rem;
+  }
 }
 
 .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

@@ -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 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/documentation/src/stories/components/language-switch/language-switch.stories.ts

@@ -65,7 +65,7 @@ function renderLanguageSwitchAsLinks(args: Partial<HTMLPostLanguageSwitchElement
   return html`<post-language-switch
     caption=${args.caption}
     description=${args.description}
-    variant="dropdown"
+    variant="menu"
   >
     <post-language-option url="/de" active="true" code="de" name="Deutsch">DE</post-language-option>
     <post-language-option url="/en" active="false" code="en" name="English"

packages/documentation/src/stories/raw-components/language-option/language-option.snapshot.stories.ts

@@ -18,12 +18,6 @@ export const LanguageOption: Story = {
     _args: HTMLPostLanguageOptionElement,
     context: StoryContext<HTMLPostLanguageOptionElement>,
   ) => {
-    return schemes(
-      () => html`
-        <div class="d-flex flex-column gap-16" role="list">
-          ${meta.render?.({ ...context.args }, context)}
-        </div>
-      `,
-    );
+    return schemes(() => html` ${meta.render?.({ ...context.args }, context)} `);
   },
 };