Ensure visual consistency between buttons and links as buttons in WHCM

- Fix secondary-button disabled state
- Fix legacy dropdown in WHCM
- Fixes #9078

CHANGELOG.txt

@@ -8,6 +8,7 @@ Changelog
  * Remove unsquashed `testapp` migrations (Matt Westcott)
  * Fix: Make sure workflow timeline icons are visible in high-contrast mode (Loveth Omokaro)
  * Fix: Ensure authentication forms (login, password reset) have a visible border in Windows high-contrast mode (Loveth Omokaro)
+ * Fix: Ensure visual consistency between buttons and links as buttons in Windows high-contrast mode (Albina Starykova)
 
 
 4.1 LTS (xx.xx.xxxx) - IN DEVELOPMENT

client/scss/components/_button.scss

@@ -253,7 +253,7 @@
       cursor: default;
     }
 
-    @media (forced-colors: active) {
+    @media (forced-colors: $media-forced-colours) {
       color: GrayText;
       border-color: GrayText;
       border-style: dashed;
@@ -355,4 +355,17 @@
       }
     }
   }
+
+  // Ensure visual consistency between button and a elements in WHCM
+
+  @media (forced-colors: $media-forced-colours) {
+    &:not(:disabled):not(.disabled):not([disabled]) {
+      color: ButtonText;
+      border-color: ButtonText;
+
+      &:hover {
+        border-color: Highlight;
+      }
+    }
+  }
 }

client/scss/components/_dropdown.legacy.scss

@@ -62,8 +62,6 @@
 
       li a,
       li button {
-        forced-color-adjust: none;
-        background-color: $color-black;
         border-color: $color-white;
         color: $color-white;
       }

docs/releases/4.2.md

@@ -20,6 +20,7 @@ depth: 1
 
  * Make sure workflow timeline icons are visible in high-contrast mode (Loveth Omokaro)
  * Ensure authentication forms (login, password reset) have a visible border in Windows high-contrast mode (Loveth Omokaro)
+ * Ensure visual consistency between buttons and links as buttons in Windows high-contrast mode (Albina Starykova)
 
 ## Upgrade considerations