From b899725c21332a535e2f7640689f0bdf3d98fa28 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aliz=C3=A9=20Debray?= Date: Wed, 18 Dec 2024 18:16:15 +0100 Subject: [PATCH] fix(components): fix the language switch keyboard navigation --- .changeset/few-ways-beam.md | 6 + .../components/post-header/post-header.tsx | 2 +- .../post-language-option.scss | 124 +++++++++--------- .../post-language-option.tsx | 5 +- .../components/post-language-option/readme.md | 14 +- .../post-language-switch.tsx | 10 +- .../components/post-language-switch/readme.md | 10 +- .../post-language-switch/switch-variants.ts | 2 +- .../src/components/post-menu/readme.md | 7 +- .../language-switch.stories.ts | 2 +- 10 files changed, 92 insertions(+), 90 deletions(-) create mode 100644 .changeset/few-ways-beam.md diff --git a/.changeset/few-ways-beam.md b/.changeset/few-ways-beam.md new file mode 100644 index 0000000000..02ddad3425 --- /dev/null +++ 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 index 9e04361563..9f888e3c1c 100644 --- 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 index 3ebe463d28..7496c54cfb 100644 --- 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 index 6e8bd502a1..d4dd6b9c26 100644 --- 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 ( - + {this.url ? ( ) : ( - -
- -
+ + ); diff --git a/packages/components/src/components/post-language-switch/readme.md b/packages/components/src/components/post-language-switch/readme.md index 8beb610dfa..483f8d0e4a 100644 --- 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 index 2473e44f8f..7220d28a4e 100644 --- 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 index 4ec09714b4..3361253421 100644 --- 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 index e3cb30133e..0b71cac4e9 100644 --- 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 DE