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
This commit is contained in:
Tom Byers
2022-02-08 11:07:57 +00:00
parent 3fa2650ffa
commit d76648b67b
3 changed files with 28 additions and 10 deletions

View File

@@ -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');
}
});