From e873ed553991676b73666f6338a5a0f16eca9ffc Mon Sep 17 00:00:00 2001 From: Chris Thomas Date: Fri, 4 Jun 2021 16:53:16 +0100 Subject: [PATCH 1/2] Disable ink skipping for underlines in hover state MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The thick underlines we use in the new hover states are rendered differently by different browsers. In Safari and Firefox, links can look messy if the link text contains words with lots of descenders. Disable ink skipping on hover, which means that links look closer to the way they do in Safari currently. Use both `text-decoration-skip-ink: none;` and `text-decoration-skip: none;` – Safari supports `text-decoration-skip` whilst other browsers support `text-decoration-skip-ink`. Fun! --- src/govuk/helpers/_links.scss | 4 ++++ src/govuk/helpers/links.test.js | 4 ++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/govuk/helpers/_links.scss b/src/govuk/helpers/_links.scss index fbec01c92e..3d2f9afc8e 100644 --- a/src/govuk/helpers/_links.scss +++ b/src/govuk/helpers/_links.scss @@ -52,6 +52,10 @@ @mixin govuk-link-hover-decoration { @if ($govuk-new-link-styles and $govuk-link-hover-underline-thickness) { text-decoration-thickness: $govuk-link-hover-underline-thickness; + // Disable ink skipping on underlines on hover. Browsers haven't + // standardised on this part of the spec yet, so set both properties + text-decoration-skip-ink: none; // Chromium, Firefox + text-decoration-skip: none; // Safari } } diff --git a/src/govuk/helpers/links.test.js b/src/govuk/helpers/links.test.js index dbe54847a9..8e568ea339 100644 --- a/src/govuk/helpers/links.test.js +++ b/src/govuk/helpers/links.test.js @@ -121,7 +121,7 @@ describe('@mixin govuk-link-hover-decoration', () => { }) describe('when $govuk-new-link-styles are enabled', () => { - it('sets text-decoration-thickness on hover', async () => { + it('sets a hover state', async () => { const sass = ` $govuk-new-link-styles: true; $govuk-link-hover-underline-thickness: 10px; @@ -133,7 +133,7 @@ describe('@mixin govuk-link-hover-decoration', () => { const results = await renderSass({ data: sass, ...sassConfig }) - expect(results.css.toString()).toContain('.foo:hover { text-decoration-thickness: 10px; }') + expect(results.css.toString()).toContain('.foo:hover') }) describe('when $govuk-link-hover-underline-thickness is falsey', () => { From 208711ceec4aae0dae825004b47b747ef4be55fd Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Mon, 14 Jun 2021 16:20:46 +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 2e742f7e2c..ba61951657 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ - [#2229: Change approach to fallback PNG in the header to fix blank data URI from triggering Content Security Policy errors](https://github.com/alphagov/govuk-frontend/pull/2229) - [#2229: Fix alignment of fallback PNG in the header](https://github.com/alphagov/govuk-frontend/pull/2229) - [#2237: Fix GOV.UK logo disappearing on light background in Windows High Contrast Mode](https://github.com/alphagov/govuk-frontend/pull/2237) +- [#2251: Disable ink skipping for underlines in hover state](https://github.com/alphagov/govuk-frontend/pull/2251) ## 3.12.0 (Feature release)