A11Y: Improve accessibility in WHCM themes (#18606)

app/assets/stylesheets/common.scss

@@ -4,6 +4,7 @@
 @import "vendor/pikaday";
 @import "vendor/tippy";
 @import "vendor/svg-arrow";
+@import "common/whcm";
 @import "common/foundation/helpers";
 @import "common/foundation/base";
 @import "common/select-kit/_index";

app/assets/stylesheets/common/base/search.scss

@@ -163,6 +163,7 @@
         padding-top: 0.25em;
         padding-bottom: 0.25em;
         &:focus-visible {
+          outline: 2px solid transparent;
           background-color: var(--tertiary-very-low);
         }
       }

app/assets/stylesheets/common/components/buttons.scss

@@ -27,6 +27,10 @@
     color: $icon-color;
     margin-right: 0.45em;
     transition: color 0.25s;
+    // For Windows High Contrast (see whcm.scss for more)
+    @media (forced-colors: active) {
+      color: ButtonText;
+    }
   }
   .d-button-label + .d-icon {
     margin-left: 0.45em;
@@ -42,6 +46,10 @@
     color: $hover-text-color;
     .d-icon {
       color: $hover-icon-color;
+      // For Windows High Contrast (see whcm.scss for more)
+      @media (forced-colors: active) {
+        color: Highlight;
+      }
     }
   }
   &:focus {
@@ -50,6 +58,9 @@
     color: $hover-text-color;
     .d-icon {
       color: $hover-icon-color;
+      @media (forced-colors: active) {
+        color: Highlight;
+      }
     }
   }
   &[href] {

app/assets/stylesheets/common/whcm.scss

@@ -0,0 +1,21 @@
+// Overrides for Windows High Contrast Mode
+
+/*
+  Some @media (forced-colors: active) {} styles
+  have also been used inside mixins in:
+  - common/components/buttons.scss
+
+  See file above for overrides.
+*/
+
+// Select Kit
+.select-kit {
+  .select-kit-row {
+    &:hover,
+    &:focus {
+      @media (forced-colors: active) {
+        outline: 2px auto transparent;
+      }
+    }
+  }
+}