From 44402e09490247204f091a368c965933cee19730 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Fri, 6 Nov 2020 12:15:20 +0000
Subject: [PATCH] Fix how template list item focus extends

We use a hack to extend the focus style of single
links in template list items (those not part of a
path of links).

This extended the 'focus box' downwards so it
covered the hint text below the link by the height
of the link (which is block-level).

Problems happen if the link wraps to multiple
lines. The hint is always on one line so the focus
looks over-extended.

These changes guard against those problems by
using the line-height instead of the block-height.
They include adding a Sass function to reference
the line-heights in GOVUK Frontend's Sass API:

https://frontend.design-system.service.gov.uk/sass-api-reference/#govuk-typography-scale
---
 app/assets/stylesheets/components/message.scss      | 12 ++++++++++--
 .../stylesheets/govuk-frontend/extensions.scss      | 13 +++++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/components/message.scss b/app/assets/stylesheets/components/message.scss
index 2aa72a492..e8dab86e3 100644
--- a/app/assets/stylesheets/components/message.scss
+++ b/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,
diff --git a/app/assets/stylesheets/govuk-frontend/extensions.scss b/app/assets/stylesheets/govuk-frontend/extensions.scss
index 9b37b3789..02a4717f0 100644
--- a/app/assets/stylesheets/govuk-frontend/extensions.scss
+++ b/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 {