Merge pull request #3713 from alphagov/fix-fix-for-template-list-focus-styles

Fix how template list item focus extends

app/assets/stylesheets/components/message.scss

@@ -1,3 +1,6 @@
+$app-body-text-line-height-default: get-govuk-typography-style($size: 19, $breakpoint: null, $property: "line-height");
+$app-body-text-line-height-tablet: get-govuk-typography-style($size: 19, $breakpoint: tablet, $property: "line-height");
+
 @mixin separator {
   display: inline-block;
   vertical-align: top;
@@ -95,9 +98,14 @@ a {
           content: '';
           position: absolute;
           left: 0px;
-          bottom: -100%; /* extend link by 100% of vertical size so it covers the hint/meta */
+          bottom: -1 * $app-body-text-line-height-default; /* extend link by line height of hint/meta so it covers it */
           width: 100%;
-          height: 100%;
+          height: $app-body-text-line-height-default;
+
+          @include govuk-media-query($from: tablet) {
+            bottom: -1 * $app-body-text-line-height-tablet;
+            height: $app-body-text-line-height-tablet;
+          }
         }
 
         &:active,

app/assets/stylesheets/govuk-frontend/extensions.scss

@@ -1,3 +1,16 @@
+// Gives access to the Sass variables used in the GOVUK Frontend typographic styles
+// See: https://frontend.design-system.service.gov.uk/sass-api-reference/#govuk-typography-scale
+@function get-govuk-typography-style($size, $breakpoint, $property) {
+  $size-map: map-get($govuk-typography-scale, $size);
+  $breakpoint-map: map-get($size-map, $breakpoint);
+
+  @if not map-has-key($breakpoint-map, $property) {
+    @error "Unknown property #{$property} - expected a property from the typography scale for #{$size}.";
+  }
+
+  @return map-get($breakpoint-map, $property);
+}
+
 // Extends footer column styles to allow 4 columns
 @include mq ($from: desktop) {
   .govuk-footer__list--columns-4 {