Disable ink skipping for underlines in hover state

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

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