Improve the readability and hover state of links

[36degrees]

What

Ensure that all of the components in GOV.UK Frontend that include links are using the core link helpers.

Update the link styles with the latest design changes.

Provide mixins and modifier classes for common link styles (without underlines, inverse for use on dark backgrounds) to help service teams implement the new link styles correctly.

Why

We want to make links:

• easier to read
• have clearer a hover state

v3.12

Beta Give feedback

1. Improve the readability of links #2198
   +0
2. Link hover states are not clear #1417
   accessibility audit may 2019 design typography +4
   
3. Add inverse mixin and modifier for links #1916
   guidance typography +2
   
4. Add 'no-underline' mixin and modifier class for links #2189
   typography 🕔 hours +2
   
5. Document new and existing link modifiers in Design System govuk-design-system#1603
   design guidance typography +3
   

   
6. Implement the new link and hover styles in the Design System website govuk-design-system#1635
   typography +1
   

Once the Chrome bug with links in columns is fixed

Beta Give feedback

1. Enable link hover styles on links in the footer #2660
   footer typography +2
2. Close Known issue: hover state is mis-painted on links within CSS multiple-column layouts #2204

Once the Chrome bug with incorrect offset calculations is fixed

Beta Give feedback

1. Review the text decoration offset for links #2743
   design typography 🕔 hours +3
   

v5.0

Beta Give feedback

1. Enable new link styles by default #2350
   breaking change typography +2
   
2. Decide whether to remove the feature flag or to deprecate it for removal later, update this epic and create any additional issues

[36degrees]

I've updated the description to (retrospectively) cover the work we've done so far on this, so that we can track the remaining things (flipping the feature flag and removing it) in context.

There were a couple of browser bugs relating to mis-painting links in columns and Chrome measuring the underline offset from a different point to other browsers – which is one of the reasons why we introduced this feature behind a flag.

Now that those bugs have been fixed (and most users have updated to a newer version of Chrome) we're ready to enable the feature by default in v5.0.

We still need to decide whether we want to keep the feature flag around for a while (so users can opt out if there are any other issues) or if we're happy to remove the flag at the same time.

[36degrees]

We still need to decide whether we want to keep the feature flag around for a while (so users can opt out if there are any other issues) or if we're happy to remove the flag at the same time.

Having looked at this again, I'n inclined to remove the feature flag entirely because all of the underlying changes can be controlled by other settings.

The flag is used in two places in helpers/_links.scss. In both cases, all of the CSS within the block guarded by the flag is also guarded by the other settings:

govuk-frontend/packages/govuk-frontend/src/govuk/helpers/_links.scss

Lines 33 to 41 in 3da7e59

	@if $govuk-new-link-styles {
	@if $govuk-link-underline-thickness {
	text-decoration-thickness: $govuk-link-underline-thickness;
	}
	@if $govuk-link-underline-offset {
	text-underline-offset: $govuk-link-underline-offset;
	}
	}

govuk-frontend/packages/govuk-frontend/src/govuk/helpers/_links.scss

Lines 53 to 59 in 3da7e59

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

This means with the flag removed you could still disable all of the 'new' link styles by setting:

$govuk-link-underline-offset: false;
$govuk-link-underline-thickness: false;
$govuk-link-hover-underline-thickness: false;

[36degrees]

Based on the above, we decided to remove the feature flag in #3600.

I think we can call this epic done! 🎉