Merge pull request #2251 from alphagov/link-underline-adjustment

Disable ink skipping for underlines in hover state

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)
 

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
   }
 }
 

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', () => {