From c20c78de19c29ff40baac1a52ec6a935e2756929 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Thu, 15 Jul 2021 15:15:51 +0100 Subject: [PATCH 1/2] Fix invisible start button chevron in forced color mode MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit When forced color mode was introduced in Chrome 89, the default user agent styles for SVGs were set to `forced-color-adjust: none` in line with the CSS Color Adjustment specification at the time [1]. Unfortunately, this means that using currentColor for stroke and fill in SVGs no longer works as expected in forced color mode. As per the comment in Chromium bug #1164162 [2]: > This is the result of one of the recent spec changes. The spec was updated to force colors at used value time rather than computed value time, which means elements that have "forced-color-adjust: none" set (like svg elements) will inherit their non-forced color values, resulting in a different currentcolor used for stroke and fill in this case than you would get if forcing was done at computed value time. > > See spec issue resolution for more details: https://github.com/w3c/csswg-drafts/issues/4915 It looks like this has since been flagged as an issue with the CSS working group [3] and the spec has been updated to resolve it [4] but it’s going to take a while before that change is reflected in browsers. In the meantime, we can explicitly set `forced-color-adjust: auto` on the chevron SVG in order for it to correctly inherit the color from the parent [5]. This mimics the fix for the OGL logo in the footer made in 850c0b7. Once Chromium has been updated so that the default UA styles for SVGs use the new `forced-color-adjust: preserve-parent-color` keyword, and traffic to older versions has dropped off, we can then consider removing this. [1]: https://www.w3.org/TR/2021/WD-css-color-adjust-1-20210520/#forced-color-adjust-prop [2]: https://bugs.chromium.org/p/chromium/issues/detail?id=1164162#c4 [3]: https://github.com/w3c/csswg-drafts/issues/6310 [4]: https://www.w3.org/TR/2021/WD-css-color-adjust-1-20210616/#forced-color-adjust-prop [5]: https://github.com/w3c/csswg-drafts/issues/6310#issuecomment-852526453 --- src/govuk/components/button/_index.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/govuk/components/button/_index.scss b/src/govuk/components/button/_index.scss index 6144bcbb08..5a43af1a1e 100644 --- a/src/govuk/components/button/_index.scss +++ b/src/govuk/components/button/_index.scss @@ -250,6 +250,9 @@ vertical-align: middle; flex-shrink: 0; align-self: center; + // Work around SVGs not inheriting color from parent in forced color mode + // (https://github.com/w3c/csswg-drafts/issues/6310) + forced-color-adjust: auto; } @if $govuk-use-legacy-font { From a71781adfba6545ed00b2c901135efcbf6e69389 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Thu, 15 Jul 2021 15:19:42 +0100 Subject: [PATCH 2/2] Document in CHANGELOG --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 955f07c8cc..097977caeb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ We’ve made fixes to GOV.UK Frontend in the following pull requests: - [#2264: Improve focus state for radio and checkbox controls in forced color mode (for example Windows High Contrast Mode)](https://github.com/alphagov/govuk-frontend/pull/2264) – thanks to [@adamliptrot-oc](https://github.com/adamliptrot-oc) for reporting this issue. - [#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) ## 3.13.0 (Feature release)