Make progress bars’ progress visible in forced colors mode (#8719)

Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>

CHANGELOG.txt

@@ -79,6 +79,7 @@ Changelog
  * Fix: `ngettext` in Wagtail's internal JavaScript internationalisation utilities now works (LB (Ben) Johnston)
  * Fix: Ensure the linting/formatting npm scripts work on Windows (Anuja Verma)
  * Fix: Fix display of dates in exported xlsx files on macOS Preview and Numbers (Jaap Roes)
+ * Fix: Make progress bars’ progress visible in forced colors mode (Anuja Verma)
 
 
 3.0.1 (16.06.2022)

client/scss/components/_progressbar.scss

@@ -21,5 +21,9 @@
     background-color: $color-teal;
     height: 1.2em;
     padding-inline-end: 1em;
+
+    @media (forced-colors: active) {
+      background-color: ButtonText;
+    }
   }
 }

docs/releases/4.0.md

@@ -91,6 +91,7 @@ When using a queryset to render a list of images, you can now use the `prefetch_
  * `ngettext` in Wagtail's internal JavaScript internationalisation utilities now works (LB (Ben) Johnston)
  * Ensure the linting/formatting npm scripts work on Windows (Anuja Verma)
  * Fix display of dates in exported xlsx files on macOS Preview and Numbers (Jaap Roes)
+ * Make progress bars’ progress visible in forced colors mode (Anuja Verma)
 
 
 ## Upgrade considerations