Added a forced-color media query to disabled buttons in high contrast (#8909)

* added a forced-color media query to allow distinct visibiity of disabled buttons

* Also set disabled button border color to GrayText in forced-colors mode

The `button` element was not correctly picking up the same border color as the text, for some reason. This commit fixes that.

CHANGELOG.txt

@@ -124,6 +124,7 @@ Changelog
  * Fix: Resolve accessibility and styling issues with the expanding status panel (Sage Abdullah)
  * Fix: Avoid 503 `AttributeError` when an empty search param `q=` is combined with other filters in the Images index view (Paritosh Kabra)
  * Fix: Fix error with string representation of FormSubmission not returning a string (LB (Ben) Johnston)
+ * Fix: Ensure disabled buttons are distinguishable from active buttons in forced colors mode (Anuja Verma)
 
 
 3.0.1 (16.06.2022)

client/scss/components/_button.scss

@@ -279,6 +279,11 @@
     border-color: $color-grey-3;
     color: $color-grey-2;
     cursor: default;
+    @media (forced-colors: active) {
+      color: GrayText;
+      border-color: GrayText;
+      border-style: dashed;
+    }
   }
 
   &.button-secondary:disabled,

docs/releases/4.0.md

@@ -55,6 +55,7 @@ In Wagtail 2.16, we introduced support for Windows High Contrast mode (WHCM). Th
 * Make checkboxes visible in forced colors mode
 * Display the correct color for icons in forced colors mode
 * Add a border around modal dialogs so they can be identified in forced colors mode
+* Ensure disabled buttons are distinguishable from active buttons in forced colors mode
 
 ### Other features