Make checkboxes visible in forced colors mode. Fix #8334 (#8718)

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

CHANGELOG.txt

@@ -80,6 +80,7 @@ Changelog
  * 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)
+ * Fix: Make checkboxes visible in forced colors mode (Anuja Verma)
 
 
 3.0.1 (16.06.2022)

client/scss/elements/_forms.scss

@@ -218,6 +218,10 @@ input[type='checkbox']:checked:before {
   height: 1rem;
   top: 2px;
   inset-inline-start: 2px;
+
+  @media (forced-colors: active) {
+    background: ButtonText;
+  }
 }
 
 input[type='checkbox'][disabled]:before {

docs/releases/4.0.md

@@ -92,6 +92,7 @@ When using a queryset to render a list of images, you can now use the `prefetch_
  * 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)
+ * Make checkboxes visible in forced colors mode (Anuja Verma)
 
 
 ## Upgrade considerations