diff --git a/src/govuk/components/button/button.mjs b/src/govuk/components/button/button.mjs index d60001e8d7..4e0e2a0497 100644 --- a/src/govuk/components/button/button.mjs +++ b/src/govuk/components/button/button.mjs @@ -54,11 +54,11 @@ Button.prototype.init = function () { * @param {KeyboardEvent} event - Keydown event */ Button.prototype.handleKeyDown = function (event) { - var target = event.target + var $target = event.target - if (target.getAttribute('role') === 'button' && event.keyCode === KEY_SPACE) { + if ($target.getAttribute('role') === 'button' && event.keyCode === KEY_SPACE) { event.preventDefault() // prevent the page from scrolling - target.click() + $target.click() } } diff --git a/src/govuk/components/checkboxes/checkboxes.mjs b/src/govuk/components/checkboxes/checkboxes.mjs index da2e57af6f..286008e009 100644 --- a/src/govuk/components/checkboxes/checkboxes.mjs +++ b/src/govuk/components/checkboxes/checkboxes.mjs @@ -33,17 +33,17 @@ Checkboxes.prototype.init = function () { var $inputs = this.$inputs nodeListForEach($inputs, function ($input) { - var target = $input.getAttribute('data-aria-controls') + var targetId = $input.getAttribute('data-aria-controls') // Skip checkboxes without data-aria-controls attributes, or where the // target element does not exist. - if (!target || !document.getElementById(target)) { + if (!targetId || !document.getElementById(targetId)) { return } // Promote the data-aria-controls attribute to a aria-controls attribute // so that the relationship is exposed in the AOM - $input.setAttribute('aria-controls', target) + $input.setAttribute('aria-controls', targetId) $input.removeAttribute('data-aria-controls') }) @@ -144,30 +144,30 @@ Checkboxes.prototype.unCheckExclusiveInputs = function ($input) { * @param {MouseEvent} event - Click event */ Checkboxes.prototype.handleClick = function (event) { - var $target = event.target + var $clickedInput = event.target // Ignore clicks on things that aren't checkbox inputs - if ($target.type !== 'checkbox') { + if ($clickedInput.type !== 'checkbox') { return } // If the checkbox conditionally-reveals some content, sync the state - var hasAriaControls = $target.getAttribute('aria-controls') + var hasAriaControls = $clickedInput.getAttribute('aria-controls') if (hasAriaControls) { - this.syncConditionalRevealWithInputState($target) + this.syncConditionalRevealWithInputState($clickedInput) } // No further behaviour needed for unchecking - if (!$target.checked) { + if (!$clickedInput.checked) { return } // Handle 'exclusive' checkbox behaviour (ie "None of these") - var hasBehaviourExclusive = ($target.getAttribute('data-behaviour') === 'exclusive') + var hasBehaviourExclusive = ($clickedInput.getAttribute('data-behaviour') === 'exclusive') if (hasBehaviourExclusive) { - this.unCheckAllInputsExcept($target) + this.unCheckAllInputsExcept($clickedInput) } else { - this.unCheckExclusiveInputs($target) + this.unCheckExclusiveInputs($clickedInput) } } diff --git a/src/govuk/components/details/details.mjs b/src/govuk/components/details/details.mjs index 28d6ddf189..20170f82b9 100644 --- a/src/govuk/components/details/details.mjs +++ b/src/govuk/components/details/details.mjs @@ -85,7 +85,7 @@ Details.prototype.polyfillDetails = function () { } // Bind an event to handle summary elements - this.polyfillHandleInputs($summary, this.polyfillSetAttributes.bind(this)) + this.polyfillHandleInputs(this.polyfillSetAttributes.bind(this)) } /** @@ -110,21 +110,20 @@ Details.prototype.polyfillSetAttributes = function () { /** * Handle cross-modal click events * - * @param {object} node - element * @param {polyfillHandleInputsCallback} callback - function */ -Details.prototype.polyfillHandleInputs = function (node, callback) { - node.addEventListener('keypress', function (event) { - var target = event.target +Details.prototype.polyfillHandleInputs = function (callback) { + this.$summary.addEventListener('keypress', function (event) { + var $target = event.target // When the key gets pressed - check if it is enter or space if (event.keyCode === KEY_ENTER || event.keyCode === KEY_SPACE) { - if (target.nodeName.toLowerCase() === 'summary') { + if ($target.nodeName.toLowerCase() === 'summary') { // Prevent space from scrolling the page // and enter from submitting a form event.preventDefault() // Click to let the click event do all the necessary action - if (target.click) { - target.click() + if ($target.click) { + $target.click() } else { // except Safari 5.1 and under don't support .click() here callback(event) @@ -134,16 +133,16 @@ Details.prototype.polyfillHandleInputs = function (node, callback) { }) // Prevent keyup to prevent clicking twice in Firefox when using space key - node.addEventListener('keyup', function (event) { - var target = event.target + this.$summary.addEventListener('keyup', function (event) { + var $target = event.target if (event.keyCode === KEY_SPACE) { - if (target.nodeName.toLowerCase() === 'summary') { + if ($target.nodeName.toLowerCase() === 'summary') { event.preventDefault() } } }) - node.addEventListener('click', callback) + this.$summary.addEventListener('click', callback) } export default Details diff --git a/src/govuk/components/error-summary/error-summary.mjs b/src/govuk/components/error-summary/error-summary.mjs index bc154b13d0..01c2bf5362 100644 --- a/src/govuk/components/error-summary/error-summary.mjs +++ b/src/govuk/components/error-summary/error-summary.mjs @@ -79,8 +79,8 @@ ErrorSummary.prototype.setFocus = function () { * @param {MouseEvent} event - Click event */ ErrorSummary.prototype.handleClick = function (event) { - var target = event.target - if (this.focusTarget(target)) { + var $target = event.target + if (this.focusTarget($target)) { event.preventDefault() } } @@ -165,10 +165,10 @@ ErrorSummary.prototype.getAssociatedLegendOrLabel = function ($input) { var $fieldset = $input.closest('fieldset') if ($fieldset) { - var legends = $fieldset.getElementsByTagName('legend') + var $legends = $fieldset.getElementsByTagName('legend') - if (legends.length) { - var $candidateLegend = legends[0] + if ($legends.length) { + var $candidateLegend = $legends[0] // If the input type is radio or checkbox, always use the legend if there // is one. diff --git a/src/govuk/components/radios/radios.mjs b/src/govuk/components/radios/radios.mjs index c110fb8f9e..bed8cd3f80 100644 --- a/src/govuk/components/radios/radios.mjs +++ b/src/govuk/components/radios/radios.mjs @@ -33,17 +33,17 @@ Radios.prototype.init = function () { var $inputs = this.$inputs nodeListForEach($inputs, function ($input) { - var target = $input.getAttribute('data-aria-controls') + var targetId = $input.getAttribute('data-aria-controls') // Skip radios without data-aria-controls attributes, or where the // target element does not exist. - if (!target || !document.getElementById(target)) { + if (!targetId || !document.getElementById(targetId)) { return } // Promote the data-aria-controls attribute to a aria-controls attribute // so that the relationship is exposed in the AOM - $input.setAttribute('aria-controls', target) + $input.setAttribute('aria-controls', targetId) $input.removeAttribute('data-aria-controls') }) diff --git a/src/govuk/components/tabs/tabs.mjs b/src/govuk/components/tabs/tabs.mjs index 7de5429b0e..d8343ff91e 100644 --- a/src/govuk/components/tabs/tabs.mjs +++ b/src/govuk/components/tabs/tabs.mjs @@ -256,11 +256,11 @@ Tabs.prototype.createHistoryEntry = function ($tab) { // Save and restore the id // so the page doesn't jump when a user clicks a tab (which changes the hash) - var id = $panel.id + var panelId = $panel.id $panel.id = '' this.changingHash = true window.location.hash = this.getHref($tab).slice(1) - $panel.id = id + $panel.id = panelId } /** @@ -290,16 +290,22 @@ Tabs.prototype.onTabKeydown = function (event) { * Activate next tab */ Tabs.prototype.activateNextTab = function () { - var currentTab = this.getCurrentTab() - var nextTabListItem = currentTab.parentNode.nextElementSibling - if (nextTabListItem) { - var nextTab = nextTabListItem.querySelector('.govuk-tabs__tab') + var $currentTab = this.getCurrentTab() + if (!$currentTab) { + return + } + + var $nextTabListItem = $currentTab.parentElement.nextElementSibling + if (!$nextTabListItem) { + return } - if (nextTab) { - this.hideTab(currentTab) - this.showTab(nextTab) - nextTab.focus() - this.createHistoryEntry(nextTab) + + var $nextTab = $nextTabListItem.querySelector('.govuk-tabs__tab') + if ($nextTab) { + this.hideTab($currentTab) + this.showTab($nextTab) + $nextTab.focus() + this.createHistoryEntry($nextTab) } } @@ -307,16 +313,22 @@ Tabs.prototype.activateNextTab = function () { * Activate previous tab */ Tabs.prototype.activatePreviousTab = function () { - var currentTab = this.getCurrentTab() - var previousTabListItem = currentTab.parentNode.previousElementSibling - if (previousTabListItem) { - var previousTab = previousTabListItem.querySelector('.govuk-tabs__tab') + var $currentTab = this.getCurrentTab() + if (!$currentTab) { + return + } + + var $previousTabListItem = $currentTab.parentElement.previousElementSibling + if (!$previousTabListItem) { + return } - if (previousTab) { - this.hideTab(currentTab) - this.showTab(previousTab) - previousTab.focus() - this.createHistoryEntry(previousTab) + + var $previousTab = $previousTabListItem.querySelector('.govuk-tabs__tab') + if ($previousTab) { + this.hideTab($currentTab) + this.showTab($previousTab) + $previousTab.focus() + this.createHistoryEntry($previousTab) } }