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 7496c54cfb..a1e9dd1695 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,4 +1,5 @@
@use '@swisspost/design-system-styles/core' as post;
+@use '@swisspost/design-system-styles/mixins/utilities' as utilities-mx;
post-language-option {
display: inline-block;
@@ -20,13 +21,13 @@ post-language-option {
height: 100%;
width: 100%;
padding: var(--post-language-option-padding);
+ border-radius: 2px;
+ @include utilities-mx.focus-style;
}
}
post-language-option:where([variant='list']) {
:is(a, button) {
- @include post.focus-style;
- border-radius: 2px;
width: 40px;
height: 40px;
@@ -54,25 +55,22 @@ post-language-option:where([variant='menu']) {
padding-inline: 24px;
box-sizing: border-box;
position: relative;
+ left: -1px;
+ width: calc(100% + 2px);
&[aria-current='true'],
&[aria-current='page'] {
&::after {
content: '';
- left: -2px;
+ left: 0;
height: 3px;
background-color: #050400;
- width: calc(100% + 4px);
+ width: 100%;
display: block;
position: absolute;
bottom: 3px;
}
- &:focus::after {
- width: calc(100% - 5px);
- left: 2px;
- }
-
&:hover::after {
background-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 d4dd6b9c26..0022850217 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
@@ -133,6 +133,11 @@ export class PostLanguageOption {
hrefLang={lang}
lang={lang}
onClick={() => this.emitChange()}
+ onKeyDown={e => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ this.emitChange();
+ }
+ }}
>
@@ -142,6 +147,11 @@ export class PostLanguageOption {
aria-label={this.name}
lang={lang}
onClick={() => this.emitChange()}
+ onKeyDown={e => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ this.emitChange();
+ }
+ }}
>
diff --git a/packages/components/src/components/post-language-switch/post-language-switch.scss b/packages/components/src/components/post-language-switch/post-language-switch.scss
index 62e6a7730b..769dfde594 100644
--- a/packages/components/src/components/post-language-switch/post-language-switch.scss
+++ b/packages/components/src/components/post-language-switch/post-language-switch.scss
@@ -3,11 +3,17 @@
@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 {