Merge pull request #265 from alphagov/ldeb-fix-hcm-search

Fix mark styles in Windows High Contrast Mode
alphagov · Sep 29, 2021 · 58dc2fc · 58dc2fc
2 parents ac8f722 + c79b716
commit 58dc2fc
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+- [#265: Fix mark styles in Windows High Contrast Mode](https://github.com/alphagov/tech-docs-gem/pull/265)
+
 ## 2.4.3
 
 - [#236: Fix search 'autocomplete' behaviour](https://github.com/alphagov/tech-docs-gem/pull/236)

diff --git a/lib/assets/stylesheets/modules/_search.scss b/lib/assets/stylesheets/modules/_search.scss
@@ -162,4 +162,20 @@ html.has-search-results-open {
   background-color: transparent;
   color: inherit;
   font-weight: bold;
+
+  // In forced color mode some browsers will keep the background transparent
+  // but set the text colour black, making the highlighted text unreadable.
+  // The following blocks fix this by setting the text colour to be the same as
+  // other text in a way that forced color mode will respect.
+
+  @media screen and (-ms-high-contrast: active) {
+    // IE does not support `CanvasText`,
+    // and `currentColor` does not work with Blink
+    color: currentColor;
+  }
+
+  @media screen and (forced-colors: active) {
+    background-color: Canvas;  // needed for Firefox
+    color: CanvasText;
+  }
 }