fix focus ring on ff + choose lang on enter + gap in mobile

swisspost · Dec 20, 2024 · 0a50c01 · 0a50c01
1 parent a538ccc
commit 0a50c01
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 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
@@ -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
@@ -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
@@ -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 {