Contrast themes – Update help-block styles

- Ensure help blocks show more appropriately in Windows High Contrast Mode with less reliance on communication via colour alone
- fixes #8817
- added dashed-dotted borders styles and removed forced-colors-adjust:none properties to/from help boxes

CHANGELOG.txt

@@ -75,6 +75,7 @@ Changelog
  * Add `menu_item_name` to modify MenuItem's name for ModelAdmin (Alexander Rogovskyy, Vu Pham)
  * Add an extra confirmation prompt when deleting pages with a large number of child pages (Jaspreet Singh)
  * Adopt the slim header in page listing views, with buttons moved under the "Actions" dropdown (Paarth Agarwal)
+ * Improve help block styles in Windows High Contrast Mode with less reliance on communication via colour alone (Anuja Verma)
  * Fix: Typo in `ResumeWorkflowActionFormatter` message (Stefan Hammer)
  * Fix: Throw a meaningful error when saving an image to an unrecognised image format (Christian Franke)
  * Fix: Remove extra padding for headers with breadcrumbs on mobile viewport (Steven Steinwand)

client/scss/components/_help-block.scss

@@ -60,25 +60,16 @@
 }
 
 // Media for Windows High Contrast
-@media (forced-colors: $media-forced-colours) {
+@media (forced-colors: active) {
   .help-block {
-    forced-color-adjust: none;
+    border: 3px solid currentColor; // ensure visible separation in Windows High Contrast mode
-    border: 1px solid $system-color-link-text; // ensure visible separation in Windows High Contrast mode
-    background-color: transparent;
-    color: $color-white;
-
-    &:before {
-      color: currentColor;
-    }
   }
 
   .help-warning {
-    color: $color-text-warning-forced-color;
+    border-style: dotted;
-    border-color: $color-text-warning-forced-color;
   }
 
   .help-critical {
-    color: $color-text-error-forced-color;
+    border-style: dashed;
-    border-color: $color-text-error-forced-color;
   }
 }

docs/releases/4.0.md

@@ -95,6 +95,7 @@ Wagtail’s page preview is now available in a side panel within the page editor
  * Add `menu_item_name` to modify MenuItem's name for ModelAdmin (Alexander Rogovskyy, Vu Pham)
  * Add an extra confirmation prompt when deleting pages with a large number of child pages (Jaspreet Singh)
  * Adopt the slim header in page listing views, with buttons moved under the "Actions" dropdown (Paarth Agarwal)
+ * Improve help block styles in Windows High Contrast Mode with less reliance on communication via colour alone (Anuja Verma)
 
 ### Bug fixes