From 0a50c013fcd6418326d48835f357bdd54f8fd089 Mon Sep 17 00:00:00 2001
From: leagrdv <lea.gardavaud@post.ch>
Date: Fri, 20 Dec 2024 11:37:45 +0100
Subject: [PATCH] fix focus ring on ff + choose lang on enter + gap in mobile

---
 .../post-language-option.scss                    | 16 +++++++---------
 .../post-language-option.tsx                     | 10 ++++++++++
 .../post-language-switch.scss                    |  6 ++++++
 3 files changed, 23 insertions(+), 9 deletions(-)

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();
+              }
+            }}
           >
             <slot />
           </a>
@@ -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();
+              }
+            }}
           >
             <slot />
           </button>
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 {