fix(components): fix the language switch keyboard navigation (#4340)

The changes to the post-menu are part of the PR #4337 that should be merge before this one. :information_source: **Only the commit b899725 needs to be reviewed in this PR.** --------- Co-authored-by: Lea <[email protected]>
swisspost · Dec 19, 2024 · f5054b1 · f5054b1
1 parent 790b811
commit f5054b1
Show file tree

Hide file tree

Showing 19 changed files with 121 additions and 149 deletions.
diff --git a/.changeset/few-ways-beam.md b/.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.
diff --git a/packages/components/cypress/e2e/language-option.cy.ts b/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', () => {

diff --git a/packages/components/src/components.d.ts b/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.
          */

diff --git a/packages/components/src/components/post-header/post-header.tsx b/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);
   }
 

diff --git a/packages/components/src/components/post-language-option/post-language-option.scss b/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;
+    }
   }
 }
diff --git a/packages/components/src/components/post-language-option/post-language-option.tsx b/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}

diff --git a/packages/components/src/components/post-language-option/readme.md b/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

diff --git a/packages/components/src/components/post-language-switch/post-language-switch.tsx b/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>
     );

diff --git a/packages/components/src/components/post-language-switch/readme.md b/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

diff --git a/packages/components/src/components/post-language-switch/switch-variants.ts b/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];
diff --git a/packages/components/src/components/post-menu-item/post-menu-item.scss b/packages/components/src/components/post-menu-item/post-menu-item.scss
diff --git a/packages/components/src/components/post-menu-item/post-menu-item.tsx b/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}>

diff --git a/packages/components/src/components/post-menu/post-menu.scss b/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;
+}