fix(accessibility): fixed visibility of the arrow-icon in high contra…

…st mode
swisspost · Dec 18, 2024 · eb1b9b1 · eb1b9b1
1 parent 7e2fd1a
commit eb1b9b1
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/packages/styles/src/components/form-select.scss b/packages/styles/src/components/form-select.scss
@@ -52,6 +52,10 @@ tokens.$default-map: components.$post-select;
       @include utilities.high-contrast-mode {
         border-color: FieldText;
       }
+
+      @include utilities.high-contrast-mode-dark() {
+        @include forms.select-bg-image('selected-hcm', $mode: dark);
+      }
     }
 
     &:hover {
@@ -79,6 +83,15 @@ tokens.$default-map: components.$post-select;
     }
   }
 
+
+  @include utilities.high-contrast-mode-light() {
+    @include forms.select-bg-image('enabled-hcm', $mode: light);
+  }
+
+  @include utilities.high-contrast-mode-dark() {
+    @include forms.select-bg-image('enabled-hcm', $mode: dark);
+  }
+
   &.is-valid,
   &.is-invalid {
     &:not(:disabled) {

diff --git a/packages/styles/src/mixins/_forms.scss b/packages/styles/src/mixins/_forms.scss
@@ -41,6 +41,9 @@
     'selected-dark': #fff,
     'disabled-light': #696864,
     'disabled-dark': #fff,
+    'enabled-hcm-light': #050400,
+    'enabled-hcm-dark': #fff,
+    'selected-hcm-dark': #fff,
   );
 
   @if ($validation == 'valid') {