`<mark>` elements in search results can be invisible in Windows High Contrast Mode

[lfdebrux]

Description of issue

If you use https://www.gov.uk/search with Windows High Contrast Mode (HCM) enabled, your search results will have invisible words.

Affected systems

This happens in Edge, Chrome, and IE11 on Windows, when using Windows HCM with a dark theme.

This doesn't happen in Firefox.

Cause of issue

The finder frontend styles uses <mark> elements to wrap the search query in search results, but styles them to have a transparent background colour:

finder-frontend/app/assets/stylesheets/finder_frontend.scss

Line 30 in 009fa63

mark {

In forced colour modes such as HCM, the browser will will ignore the CSS colour properties, and use the default colours, except for the alpha value of the background colour ¹. This means that the mark will be forced to have a yellow background and black text, except the background will be transparent. With a black background this becomes black text on a black background.

Suggested fix

The tech-docs-gem had a similar issue and fixed it in alphagov/tech-docs-gem#265 by using the CanvasText colour, which is respected in forced colour modes.

Footnotes

1. https://bugs.chromium.org/p/chromium/issues/detail?id=1253295 ↩