Add comments about deleting this code in future

If the :has pseudo-class becomes available in the
browsers we support in future, the code this
branch/pull request adds will be redundant as its
behaviour will be possible only using CSS.

This adds comments to note this to the parts of
the code you'd need to remove.
This commit is contained in:
Tom Byers
2022-02-15 11:26:17 +00:00
parent 467be3a339
commit 776f210e7b
2 changed files with 15 additions and 3 deletions

View File

@@ -25,6 +25,10 @@ $(() => $('.govuk-header__container').on('click', function() {
$(this).css('border-color', '#005ea5');
}));
// Applies our expanded focus style to the siblings of links when that link is wrapped in a heading.
//
// This will be possible in CSS in the future, using the :has pseudo-class. When :has is available
// in the browsers we support, this code can be replaced with a CSS-only solution.
$('.js-mark-focus-on-parent').on('focus blur', '*', e => {
$target = $(e.target);
if (e.type === 'focusin') {

View File

@@ -13,6 +13,10 @@
// Methods to ensure the DOM fragment is clean of classes added by JS before diffing
// and that they are replaced afterwards.
//
// Added to allow the use of JS, in main.js, to apply styles which in future could be
// achieved with the :has pseudo-class. If :has is available in our supported browsers,
// this can be removed in favour of a CSS-only solution.
var classesPersister = {
_classNames: [],
_$els: [],
@@ -100,11 +104,15 @@
var resource = $component.data('resource');
var form = $component.data('form');
// replace component with contents
// the renderer does this anyway when diffing against the first response
// Replace component with contents.
// The renderer does this anyway when diffing against the first response
$component.replaceWith($contents);
// store any classes that should persist through updates
// Store any classes that should persist through updates
//
// Added to allow the use of JS, in main.js, to apply styles which in future could be
// achieved with the :has pseudo-class. If :has is available in our supported browsers,
// this can be removed in favour of a CSS-only solution.
if ($contents.data('classesToPersist') !== undefined) {
$contents.data('classesToPersist')
.split(' ')