Mark focus of link on parent heading in file-list

Includes:
- JS to add a class to the heading when the link
  is focused
- CSS to apply the enlarged focus style via a
  selector which uses that class
- changes to the partial to hook in the JS to
  track focus on links and to tell the
  updateContent JS to persist the classes added
  between updates to the HTML

app/assets/javascripts/main.js

@@ -24,3 +24,12 @@ $(() => $('.banner-dangerous').eq(0).trigger('focus'));
 $(() => $('.govuk-header__container').on('click', function() {
   $(this).css('border-color', '#005ea5');
 }));
+
+$('.js-mark-focus-on-parent').on('focus blur', '*', e => {
+  $target = $(e.target);
+  if (e.type === 'focusin') {
+    $target.parent().addClass('js-child-has-focus');
+  } else {
+    $target.parent().removeClass('js-child-has-focus');
+  }
+});

app/assets/stylesheets/views/dashboard.scss

@@ -44,6 +44,13 @@
 
 .file-list {
 
+  &-hint,
+  &-hint-large,
+  &-status {
+    pointer-events: none; // delegate clicks to the overlapping link
+    position: relative; // make non-static to sit above the overlapping focus style
+  }
+
   &-filename {
     @include bold-19;
     display: block;
@@ -84,7 +91,6 @@
     @include core-16;
     display: block;
     color: $secondary-text-colour;
-    pointer-events: none;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -95,7 +101,6 @@
     @include core-19;
     display: block;
     color: $secondary-text-colour;
-    pointer-events: none;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -110,13 +115,6 @@
 
 /* The focus state for sibling links overlaps the hint so the hint's text colour needs to adapt */
 .govuk-link:focus {
-  &.file-list-filename,
-  &.file-list-filename-large,
-  & + .file-list-hint,
-  & + .file-list-hint-large {
-    /* link needs non-static position to overlap the cell border, hint so it isn't overlapped itself */
-    position: relative;
-  }
 
   &.file-list-filename,
   &.file-list-filename-large {
@@ -131,6 +129,17 @@
 
 }
 
+// Note: this selector should use the :has() pseudo-class in the future when it is supported
+//       which will remove the need for JS
+.file-list .js-child-has-focus + .govuk-grid-row {
+
+  & .file-list-hint-large,
+  & .file-list-status > .govuk-hint {
+    color: $govuk-focus-text-colour;
+  }
+
+}
+
 .failure-highlight {
   @include bold-19;
   color: $error-colour;

app/templates/views/broadcast/partials/dashboard-table.html

@@ -1,6 +1,6 @@
 {% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading %}
 
-<div class='ajax-block-container'>
+<div class="ajax-block-container js-mark-focus-on-parent" data-classes-to-persist="js-child-has-focus">
 {% for item in broadcasts|sort|reverse|list %}
   <div class="keyline-block">
     <div class="file-list govuk-!-margin-bottom-2">