Issue #3223271 by mherchel, bnjmnm, pjudge, lauriii, javi-er,...

Issue #3223271 by mherchel, bnjmnm, pjudge, lauriii, javi-er, andrewmacpherson: Olivero: Select dropdown icons need more contrast in Windows High Contrast mode

core/themes/olivero/css/components/form-select.css

@@ -62,7 +62,7 @@ select:focus {
 
 select {
 
-  /* Disables border of select specifically for ms browser */
+  /* Hides default chevron within Internet Explorer. */
 }
 
 select::-ms-expand {
@@ -99,17 +99,58 @@ select.form-element--small {
 
 select {
 
-  /* Necessary for IE11 to show chevron. */
+  /* Necessary to show chevron in forced colors mode in modern browsers. */
 }
 
-@media screen and (-ms-high-contrast: active) {
+@media (forced-colors: active) {
+
+[dir="ltr"] select {
+    padding-right: 1.125rem
+  }
+
+[dir="rtl"] select {
+    padding-left: 1.125rem
+  }
 
 select {
-    background-image: url("data:image/svg+xml,%3csvg width='18' height='11' viewBox='0 0 18 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M18 1.49699C18 1.35271 17.9279 1.19038 17.8196 1.08216L16.9178 0.18036C16.8096 0.0721439 16.6473 0 16.503 0C16.3587 0 16.1964 0.0721439 16.0882 0.18036L9 7.26854L1.91182 0.18036C1.80361 0.0721439 1.64128 0 1.49699 0C1.33467 0 1.19038 0.0721439 1.08216 0.18036L0.180361 1.08216C0.0721442 1.19038 0 1.35271 0 1.49699C0 1.64128 0.0721442 1.80361 0.180361 1.91182L8.58517 10.3166C8.69339 10.4248 8.85571 10.497 9 10.497C9.14429 10.497 9.30661 10.4248 9.41483 10.3166L17.8196 1.91182C17.9279 1.80361 18 1.64128 18 1.49699Z' fill='%235D7585'/%3e%3c/svg%3e")
+    background-image: none;
+    -webkit-appearance: listbox;
+    -moz-appearance: listbox;
+    appearance: listbox /* Default <select> appearance value for modern browsers. */
+
+    /* Lets browser set <select> appearance to whatever the browser's default is. */
 }
+    @supports ((-webkit-appearance: revert) or (-moz-appearance: revert) or (appearance: revert)) {
 
-    select[multiple] {
-      background-image: none;
+select {
+      -webkit-appearance: revert;
+      -moz-appearance: revert;
+      appearance: revert
+}
+    }
+  }
+
+select {
+
+  /* Necessary for Internet Explorer to show chevron. */
+}
+
+@media screen and (-ms-high-contrast: active) {
+
+[dir="ltr"] select {
+    padding-right: 0
+  }
+
+[dir="rtl"] select {
+    padding-left: 0
+  }
+
+select {
+
+    /* Re-enable default chevron for Internet Explorer. */
+}
+    select::-ms-expand {
+      display: block;
     }
   }
 

core/themes/olivero/css/components/form-select.pcss.css

@@ -38,7 +38,7 @@ select {
     }
   }
 
-  /* Disables border of select specifically for ms browser */
+  /* Hides default chevron within Internet Explorer. */
   &::-ms-expand {
     display: none;
   }
@@ -71,12 +71,25 @@ select {
     height: var(--sp2-5);
   }
 
-  /* Necessary for IE11 to show chevron. */
+  /* Necessary to show chevron in forced colors mode in modern browsers. */
+  @media (forced-colors: active) {
+    padding-inline-end: var(--sp);
+    background-image: none;
+    appearance: listbox; /* Default <select> appearance value for modern browsers. */
+
+    /* Lets browser set <select> appearance to whatever the browser's default is. */
+    @supports (appearance: revert) {
+      appearance: revert;
+    }
+  }
+
+  /* Necessary for Internet Explorer to show chevron. */
   @media screen and (-ms-high-contrast: active) {
-    background-image: var(--form-element-select-icon);
+    padding-inline-end: 0;
 
-    &[multiple] {
-      background-image: none;
+    /* Re-enable default chevron for Internet Explorer. */
+    &::-ms-expand {
+      display: block;
     }
   }
 }