alphagov / tech-docs-gem

Gem to distribute the tech docs project
https://tdt-documentation.london.cloudapps.digital/
MIT License
15 stars 38 forks source link

Fix mark styles in Windows High Contrast Mode #265

Closed lfdebrux closed 3 years ago

lfdebrux commented 3 years ago

In some browsers (IE11, Chromium-based browsers) the marked text in search results are unreadable with forced colour modes when the background is black because the text colour for <mark> elements is set to black. This is especially present in Windows High Contrast Mode (HCM).

This commit fixes this by re-asserting that the marked text should be the same colour as the surrounding text.

We also have to set background-color: Canvas, because in Firefox background-color: transparent is also ignored (unlike in IE11, Chromiums).

Screenshots

Before After
Edge mark--before--edge mark--after--edge
Edge, HCM mark--before--edge-hcm mark--after--edge-hcm
IE11, HCM mark--before--ie11-hcm mark--after--ie11-hcm
Firefox, HCM mark--before--firefox-hcm mark--after--firefox-hcm