From d188e40668635d381e50dff9075f1f1319b505cf Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Fri, 9 Dec 2022 10:35:49 +0000 Subject: [PATCH 1/2] Fix link focus styles in Chromium 108+ Chromium 108 includes a change in behaviour for box decoration when a box is split over multiple lines, pages etc [1]. This change in theory brings Chromium in line with the CSS Fragmentation Module Level 3 spec [2] but means that the box-shadow (which we rely on for colour contrast for the focus state) no longer appears on links that break over multiple lines. This affects browsers based on Chromium 108 including Chrome 108, Edge 108 and Opera 94. Add `box-decoration-break: clone` so that `box-shadow` is applied to each fragment independently, maintaining the existing behaviour in Chromium browsers. [1]: https://bugs.chromium.org/p/chromium/issues/detail?id=682173 [2]: https://www.w3.org/TR/css-break-3/#propdef-box-decoration-break Co-authored-by: Colin Rotherham --- src/govuk/helpers/_focused.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/govuk/helpers/_focused.scss b/src/govuk/helpers/_focused.scss index 979acbe9e4..0587853513 100644 --- a/src/govuk/helpers/_focused.scss +++ b/src/govuk/helpers/_focused.scss @@ -25,4 +25,8 @@ // When link is focussed, hide the default underline since the // box shadow adds the "underline" text-decoration: none; + + // When a focused box is broken by e.g. a line break, ensure that the + // box-shadow is applied to each fragment independently. + box-decoration-break: clone; } From dc6f98e7a704e63b44ceac4096f616810237545b Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Fri, 9 Dec 2022 11:46:31 +0000 Subject: [PATCH 2/2] Document in CHANGELOG --- CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6f71651360..6fecce7859 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,12 @@ ## Unreleased +### Fixes + +We've made fixes to GOV.UK Frontend in the following pull requests: + +- [#3107: Fix focus styles for links split over multiple lines in Chromium 108+ (Chrome 108+, Edge 108+, Opera 94+)](https://github.com/alphagov/govuk-frontend/pull/3107) + ## 4.4.0 (Feature release) ### New features