From 4b4dbbf58066cb065e2f99e46d0fbade3dcc23d9 Mon Sep 17 00:00:00 2001
From: Keegan George <kgeorge13@gmail.com>
Date: Mon, 17 Oct 2022 07:07:46 -0700
Subject: [PATCH] A11Y: Improve accessibility in WHCM themes (#18606)

---
 app/assets/stylesheets/common.scss            |  1 +
 .../stylesheets/common/base/search.scss       |  1 +
 .../common/components/buttons.scss            | 11 ++++++++++
 app/assets/stylesheets/common/whcm.scss       | 21 +++++++++++++++++++
 4 files changed, 34 insertions(+)
 create mode 100644 app/assets/stylesheets/common/whcm.scss

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index df03d36c6b4..f7ea5d544ef 100644
--- a/app/assets/stylesheets/common.scss
+++ b/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";
diff --git a/app/assets/stylesheets/common/base/search.scss b/app/assets/stylesheets/common/base/search.scss
index ac8b7a9688e..4e8657c3f90 100644
--- a/app/assets/stylesheets/common/base/search.scss
+++ b/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);
         }
       }
diff --git a/app/assets/stylesheets/common/components/buttons.scss b/app/assets/stylesheets/common/components/buttons.scss
index 3dfb2f2d7f2..aa341987d75 100644
--- a/app/assets/stylesheets/common/components/buttons.scss
+++ b/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] {
diff --git a/app/assets/stylesheets/common/whcm.scss b/app/assets/stylesheets/common/whcm.scss
new file mode 100644
index 00000000000..19ef0644cb7
--- /dev/null
+++ b/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;
+      }
+    }
+  }
+}