Fixes govuk-elements focussed link colour overriding govuk-frontends

govuk-elements uses specific css selector`a:link:focus` whereas
govuk-frontend uses `.govuk-link:focus`. This fix makes govuk-frontend
selector more specific `.govuk-link:link:focus` but only when compatibility
mode is being used.

Co-authored-by: Nick Colley <nick.colley@digital.cabinet-office.gov.uk>

CHANGELOG.md

@@ -120,6 +120,15 @@
 
   ([PR #1287](https://github.com/alphagov/govuk-frontend/pull/1287))
 
+- Fixes govuk-template focussed link colour overriding govuk-frontends
+
+  govuk-template uses specific css selector`a:link:focus` whereas
+  govuk-frontend uses `.govuk-link:focus`. This fix makes govuk-frontend
+  selector more specific `.govuk-link:link:focus` but only when compatibility
+  mode is being used.
+
+  ([PR #1310](https://github.com/alphagov/govuk-frontend/pull/1310))
+
 [compatibility mode]: https://github.com/alphagov/govuk-frontend/blob/master/docs/installation/installing-with-npm.md#compatibility-mode
 
 ## 2.11.0 (Feature release)

src/helpers/_links.scss

@@ -50,6 +50,17 @@
   &:focus {
     color: $govuk-focus-text-colour;
   }
+
+  // alphagov/govuk_template includes a specific a:link:focus selector
+  // designed to make unvisited link  s a slightly darker blue when focussed, so
+  // we need to override the text colour for that combination of selectors so
+  // so that unvisited links styled as buttons do not end up with dark blue
+  // text when focussed.
+  @include govuk-compatibility(govuk_template) {
+    &:link:focus {
+      color: $govuk-focus-text-colour;
+    }
+  }
 }
 
 /// Muted style link mixin