fix(components): fix the language switch keyboard navigation

swisspost · Dec 18, 2024 · b899725 · b899725
1 parent 8cf0440
commit b899725
Show file tree

Hide file tree

Showing 10 changed files with 92 additions and 90 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-swith`and `post-language-option` components.
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/readme.md b/packages/components/src/components/post-menu/readme.md
@@ -7,10 +7,9 @@
 
 ## Properties
 
-| 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'` |
+| 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'` |
 
 
 ## Events

diff --git a/packages/documentation/src/stories/components/language-switch/language-switch.stories.ts b/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"