From 53ca3eb7421b73e832de6bed488619491f44384b Mon Sep 17 00:00:00 2001 From: Laurence de Bruxelles Date: Fri, 30 Jul 2021 09:23:18 +0100 Subject: [PATCH] Add IE11 support forced color mode tweaks Adds IE11 support to the previous Windows High Contrast Mode fixes in PR Internet Explorer 11 doesn't support the `forced-colors` media feature or the `forced-color-adjust` property, but it has equivalents in `-ms-high-contrast` and `-ms-high-contrast-adjust`. We can use those CSS features to extend fixes to high contrast mode that previously only worked on more modern browsers. Adds a tweak to changes in commit 7dcba7d, so that the highlight works in Internet Explorer 11 as well. --- CHANGELOG.md | 1 + src/govuk/components/checkboxes/_index.scss | 2 +- src/govuk/components/radios/_index.scss | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 097977caeb..f21ffa5c36 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ We’ve made fixes to GOV.UK Frontend in the following pull requests: - [#2265: Don’t remove focus outline from disabled link buttons in forced color mode](https://github.com/alphagov/govuk-frontend/pull/2265) - [#2273: Fix invisible footer OGL logo in forced color mode](https://github.com/alphagov/govuk-frontend/pull/2273) – thanks to [@oscarduignan](https://github.com/oscarduignan) for reporting this issue. - [#2277: Fix invisible start button chevron in forced color mode](https://github.com/alphagov/govuk-frontend/pull/2277) +- [#2290: Improve support for IE11 with Windows High Contrast Mode](https://github.com/alphagov/govuk-frontend/pull/2290) ## 3.13.0 (Feature release) diff --git a/src/govuk/components/checkboxes/_index.scss b/src/govuk/components/checkboxes/_index.scss index 204ff14a6d..cc103b6151 100644 --- a/src/govuk/components/checkboxes/_index.scss +++ b/src/govuk/components/checkboxes/_index.scss @@ -132,7 +132,7 @@ // When in an explicit forced-color mode, we can use the Highlight system // color for the outline to better match focus states of native controls - @media screen and (forced-colors: active) { + @media screen and (forced-colors: active), (-ms-high-contrast: active) { outline-color: Highlight; } diff --git a/src/govuk/components/radios/_index.scss b/src/govuk/components/radios/_index.scss index 1b3801ea67..5078c9a059 100644 --- a/src/govuk/components/radios/_index.scss +++ b/src/govuk/components/radios/_index.scss @@ -130,7 +130,7 @@ // When in an explicit forced-color mode, we can use the Highlight system // color for the outline to better match focus states of native controls - @media screen and (forced-colors: active) { + @media screen and (forced-colors: active), (-ms-high-contrast: active) { outline-color: Highlight; }