From 6a23a5ddc8b384b368bfb76e11bc66224f02b33d Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Thu, 8 Jun 2023 10:03:58 +0100
Subject: [PATCH 1/9] Update ESLint config to target ES2015 (ES6)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We may take this higher once we confirm the browser support guarded by our “cut the mustard” checks
---
 packages/govuk-frontend/.eslintrc.js                     | 9 +++------
 .../src/govuk/components/error-summary/error-summary.mjs | 2 +-
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/govuk-frontend/.eslintrc.js b/packages/govuk-frontend/.eslintrc.js
index e2d7273f7a..26d53131b4 100644
--- a/packages/govuk-frontend/.eslintrc.js
+++ b/packages/govuk-frontend/.eslintrc.js
@@ -12,7 +12,7 @@ module.exports = {
       excludedFiles: ['**/*.test.mjs'],
       parser: '@typescript-eslint/parser',
       parserOptions: {
-        // Note: Allow ES6 for import/export syntax
+        // Note: Allow ES2015 for import/export syntax
         ecmaVersion: '2015',
         project: [resolve(__dirname, 'tsconfig.json')]
       },
@@ -23,21 +23,18 @@ module.exports = {
       extends: [
         'plugin:@typescript-eslint/recommended',
         'plugin:@typescript-eslint/recommended-requiring-type-checking',
-        'plugin:es-x/restrict-to-es5'
+        'plugin:es-x/restrict-to-es2015'
       ],
       env: {
         browser: true
       },
       rules: {
-        // Allow unknown `.prototype` members until ES6 classes
+        // Allow unknown `.prototype` members until ES2015 classes
         '@typescript-eslint/no-unsafe-member-access': 'off',
 
         // Allow `this` alias until arrow functions supported
         '@typescript-eslint/no-this-alias': 'off',
 
-        // Rollup transpiles modules into other formats
-        'es-x/no-modules': 'off',
-
         // Allow `var` until let/const supported
         'no-var': 'off',
 
diff --git a/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs b/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs
index e771e07a6e..2adf263ded 100644
--- a/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs
+++ b/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs
@@ -20,7 +20,7 @@ function ErrorSummary ($module, config) {
   // working the same now we read the elements data attributes
   if (!($module instanceof HTMLElement)) {
     // Little safety in case code gets ported as-is
-    // into and ES6 class constructor, where the return value matters
+    // into and ES2015 class constructor, where the return value matters
     return this
   }
 

From 5e990739600d3d344654a3d7098e3edd17ba32f1 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Thu, 8 Jun 2023 13:51:00 +0100
Subject: [PATCH 2/9] Remove ESLint rule `'no-var'` for let/const support

---
 .eslintrc.js                         | 5 +----
 packages/govuk-frontend/.eslintrc.js | 3 ---
 2 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index d5ab59e3de..0dc96f8f86 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -127,10 +127,7 @@ module.exports = {
 
         // Ignore paths to example modules
         'import/no-unresolved': 'off',
-        'n/no-missing-import': 'off',
-
-        // Allow `var` in example code
-        'no-var': 'off'
+        'n/no-missing-import': 'off'
       }
     }
   ],
diff --git a/packages/govuk-frontend/.eslintrc.js b/packages/govuk-frontend/.eslintrc.js
index 26d53131b4..850f276b9b 100644
--- a/packages/govuk-frontend/.eslintrc.js
+++ b/packages/govuk-frontend/.eslintrc.js
@@ -35,9 +35,6 @@ module.exports = {
         // Allow `this` alias until arrow functions supported
         '@typescript-eslint/no-this-alias': 'off',
 
-        // Allow `var` until let/const supported
-        'no-var': 'off',
-
         // JSDoc blocks are mandatory
         'jsdoc/require-jsdoc': [
           'error', {

From 876e88647807cfb48cdffdba5bb4e52d8c989971 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Thu, 8 Jun 2023 14:34:25 +0100
Subject: [PATCH 3/9] Run `eslint --fix`

---
 docs/contributing/coding-standards/js.md      |   6 +-
 .../examples/scoped-initialisation/index.njk  |   2 +-
 .../cookie-banner-client-side/index.njk       |  12 +-
 .../cookie-banner-essential-cookies/index.njk |   4 +-
 .../cookie-banner-server-side/index.njk       |   6 +-
 packages/govuk-frontend/src/govuk/all.mjs     |  24 ++--
 .../govuk/common/closest-attribute-value.mjs  |   2 +-
 .../govuk/common/govuk-frontend-version.mjs   |   2 +-
 .../govuk-frontend/src/govuk/common/index.mjs |  32 ++---
 .../src/govuk/common/normalise-dataset.mjs    |   6 +-
 .../govuk/components/accordion/accordion.mjs  | 110 +++++++++---------
 .../src/govuk/components/button/button.mjs    |   8 +-
 .../character-count/character-count.mjs       |  44 +++----
 .../components/checkboxes/checkboxes.mjs      |  32 ++---
 .../src/govuk/components/details/details.mjs  |  16 +--
 .../error-summary/error-summary.mjs           |  26 ++---
 .../notification-banner.mjs                   |   4 +-
 .../src/govuk/components/radios/radios.mjs    |  28 ++---
 .../govuk/components/skip-link/skip-link.mjs  |   6 +-
 .../src/govuk/components/tabs/tabs.mjs        |  64 +++++-----
 packages/govuk-frontend/src/govuk/i18n.mjs    |  24 ++--
 .../tasks/build/package.test.mjs              |   2 +-
 22 files changed, 230 insertions(+), 230 deletions(-)

diff --git a/docs/contributing/coding-standards/js.md b/docs/contributing/coding-standards/js.md
index 9f70f8b0e5..e62c4dd024 100644
--- a/docs/contributing/coding-standards/js.md
+++ b/docs/contributing/coding-standards/js.md
@@ -39,7 +39,7 @@ Example.prototype.init = function () {
   }
 
   // Code goes here
-  var $module = this.$module
+  const $module = this.$module
 }
 
 export default Example
@@ -117,10 +117,10 @@ When initialising an object, use the `new` keyword.
 
 ```mjs
 // Bad
-var myExample1 = Example()
+const myExample1 = Example()
 
 // Good
-var myExample2 = new Example()
+const myExample2 = new Example()
 ```
 
 ## Modules
diff --git a/packages/govuk-frontend-review/src/views/examples/scoped-initialisation/index.njk b/packages/govuk-frontend-review/src/views/examples/scoped-initialisation/index.njk
index b5d0cd4140..f372059eea 100644
--- a/packages/govuk-frontend-review/src/views/examples/scoped-initialisation/index.njk
+++ b/packages/govuk-frontend-review/src/views/examples/scoped-initialisation/index.njk
@@ -47,7 +47,7 @@
 {% block bodyEnd %}
   <script type="module" src="/javascripts/all.min.js"></script>
   <script type="module">
-    var $scope = document.getElementById('scoped')
+    const $scope = document.getElementById('scoped')
     window.GOVUKFrontend.initAll({
       scope: $scope
     })
diff --git a/packages/govuk-frontend-review/src/views/full-page-examples/cookie-banner-client-side/index.njk b/packages/govuk-frontend-review/src/views/full-page-examples/cookie-banner-client-side/index.njk
index bc0f773da0..4e21f9d01c 100644
--- a/packages/govuk-frontend-review/src/views/full-page-examples/cookie-banner-client-side/index.njk
+++ b/packages/govuk-frontend-review/src/views/full-page-examples/cookie-banner-client-side/index.njk
@@ -195,13 +195,13 @@ notes: >-
   </div>
 
   <script type="module">
-    var acceptButton = document.querySelector('.js-cookies-button-accept')
-    var rejectButton = document.querySelector('.js-cookies-button-reject')
+    const acceptButton = document.querySelector('.js-cookies-button-accept')
+    const rejectButton = document.querySelector('.js-cookies-button-reject')
 
-    var acceptedBanner = document.querySelector('.js-cookies-accepted')
-    var rejectedBanner = document.querySelector('.js-cookies-rejected')
-    var questionBanner = document.querySelector('.js-question-banner')
-    var cookieBanner = document.querySelector('.js-cookies-banner')
+    const acceptedBanner = document.querySelector('.js-cookies-accepted')
+    const rejectedBanner = document.querySelector('.js-cookies-rejected')
+    const questionBanner = document.querySelector('.js-question-banner')
+    const cookieBanner = document.querySelector('.js-cookies-banner')
 
     function showBanner(banner) {
         questionBanner.setAttribute('hidden', 'hidden')
diff --git a/packages/govuk-frontend-review/src/views/full-page-examples/cookie-banner-essential-cookies/index.njk b/packages/govuk-frontend-review/src/views/full-page-examples/cookie-banner-essential-cookies/index.njk
index 603ce35945..bdd3f6b279 100644
--- a/packages/govuk-frontend-review/src/views/full-page-examples/cookie-banner-essential-cookies/index.njk
+++ b/packages/govuk-frontend-review/src/views/full-page-examples/cookie-banner-essential-cookies/index.njk
@@ -157,8 +157,8 @@ notes: >-
     have to take care of the 'Hide' button to make progressive enhancement in
     the example functional #}
   <script type="module">
-    var hideButton = document.querySelector('.js-hide')
-    var cookieBanner = document.querySelector(".govuk-cookie-banner")
+    const hideButton = document.querySelector('.js-hide')
+    const cookieBanner = document.querySelector(".govuk-cookie-banner")
 
     if (hideButton) {
       hideButton.addEventListener('click', function(event) {
diff --git a/packages/govuk-frontend-review/src/views/full-page-examples/cookie-banner-server-side/index.njk b/packages/govuk-frontend-review/src/views/full-page-examples/cookie-banner-server-side/index.njk
index 490f6a9be0..5fc5d9a93e 100644
--- a/packages/govuk-frontend-review/src/views/full-page-examples/cookie-banner-server-side/index.njk
+++ b/packages/govuk-frontend-review/src/views/full-page-examples/cookie-banner-server-side/index.njk
@@ -189,9 +189,9 @@ notes: >-
     have to take care of the 'Hide' button to make progressive enhancement in
     the example functional #}
   <script type="module">
-    var hideButton = document.querySelector('.js-hide')
-    var cookieBanner = document.querySelector(".govuk-cookie-banner")
-    var confirmationBanner = document.querySelector('.js-confirmation-banner')
+    const hideButton = document.querySelector('.js-hide')
+    const cookieBanner = document.querySelector(".govuk-cookie-banner")
+    const confirmationBanner = document.querySelector('.js-confirmation-banner')
 
     if (confirmationBanner) {
       // Shift focus to the confirmation banner
diff --git a/packages/govuk-frontend/src/govuk/all.mjs b/packages/govuk-frontend/src/govuk/all.mjs
index 9590472ac6..ed40e0a314 100644
--- a/packages/govuk-frontend/src/govuk/all.mjs
+++ b/packages/govuk-frontend/src/govuk/all.mjs
@@ -24,62 +24,62 @@ function initAll (config) {
 
   // Allow the user to initialise GOV.UK Frontend in only certain sections of the page
   // Defaults to the entire document if nothing is set.
-  var $scope = config.scope instanceof HTMLElement ? config.scope : document
+  const $scope = config.scope instanceof HTMLElement ? config.scope : document
 
-  var $accordions = $scope.querySelectorAll('[data-module="govuk-accordion"]')
+  const $accordions = $scope.querySelectorAll('[data-module="govuk-accordion"]')
   $accordions.forEach(function ($accordion) {
     new Accordion($accordion, config.accordion).init()
   })
 
-  var $buttons = $scope.querySelectorAll('[data-module="govuk-button"]')
+  const $buttons = $scope.querySelectorAll('[data-module="govuk-button"]')
   $buttons.forEach(function ($button) {
     new Button($button, config.button).init()
   })
 
-  var $characterCounts = $scope.querySelectorAll('[data-module="govuk-character-count"]')
+  const $characterCounts = $scope.querySelectorAll('[data-module="govuk-character-count"]')
   $characterCounts.forEach(function ($characterCount) {
     new CharacterCount($characterCount, config.characterCount).init()
   })
 
-  var $checkboxes = $scope.querySelectorAll('[data-module="govuk-checkboxes"]')
+  const $checkboxes = $scope.querySelectorAll('[data-module="govuk-checkboxes"]')
   $checkboxes.forEach(function ($checkbox) {
     new Checkboxes($checkbox).init()
   })
 
-  var $details = $scope.querySelectorAll('[data-module="govuk-details"]')
+  const $details = $scope.querySelectorAll('[data-module="govuk-details"]')
   $details.forEach(function ($detail) {
     new Details($detail).init()
   })
 
   // Find first error summary module to enhance.
-  var $errorSummary = $scope.querySelector('[data-module="govuk-error-summary"]')
+  const $errorSummary = $scope.querySelector('[data-module="govuk-error-summary"]')
   if ($errorSummary) {
     new ErrorSummary($errorSummary, config.errorSummary).init()
   }
 
   // Find first header module to enhance.
-  var $header = $scope.querySelector('[data-module="govuk-header"]')
+  const $header = $scope.querySelector('[data-module="govuk-header"]')
   if ($header) {
     new Header($header).init()
   }
 
-  var $notificationBanners = $scope.querySelectorAll('[data-module="govuk-notification-banner"]')
+  const $notificationBanners = $scope.querySelectorAll('[data-module="govuk-notification-banner"]')
   $notificationBanners.forEach(function ($notificationBanner) {
     new NotificationBanner($notificationBanner, config.notificationBanner).init()
   })
 
-  var $radios = $scope.querySelectorAll('[data-module="govuk-radios"]')
+  const $radios = $scope.querySelectorAll('[data-module="govuk-radios"]')
   $radios.forEach(function ($radio) {
     new Radios($radio).init()
   })
 
   // Find first skip link module to enhance.
-  var $skipLink = $scope.querySelector('[data-module="govuk-skip-link"]')
+  const $skipLink = $scope.querySelector('[data-module="govuk-skip-link"]')
   if ($skipLink) {
     new SkipLink($skipLink).init()
   }
 
-  var $tabs = $scope.querySelectorAll('[data-module="govuk-tabs"]')
+  const $tabs = $scope.querySelectorAll('[data-module="govuk-tabs"]')
   $tabs.forEach(function ($tabs) {
     new Tabs($tabs).init()
   })
diff --git a/packages/govuk-frontend/src/govuk/common/closest-attribute-value.mjs b/packages/govuk-frontend/src/govuk/common/closest-attribute-value.mjs
index 4d55284293..fccd7b7873 100644
--- a/packages/govuk-frontend/src/govuk/common/closest-attribute-value.mjs
+++ b/packages/govuk-frontend/src/govuk/common/closest-attribute-value.mjs
@@ -7,7 +7,7 @@
  * @returns {string | null} Attribute value
  */
 export function closestAttributeValue ($element, attributeName) {
-  var $closestElementWithAttribute = $element.closest('[' + attributeName + ']')
+  const $closestElementWithAttribute = $element.closest('[' + attributeName + ']')
   return $closestElementWithAttribute
     ? $closestElementWithAttribute.getAttribute(attributeName)
     : null
diff --git a/packages/govuk-frontend/src/govuk/common/govuk-frontend-version.mjs b/packages/govuk-frontend/src/govuk/common/govuk-frontend-version.mjs
index ae63e9c8dd..16ee9f2f03 100644
--- a/packages/govuk-frontend/src/govuk/common/govuk-frontend-version.mjs
+++ b/packages/govuk-frontend/src/govuk/common/govuk-frontend-version.mjs
@@ -8,4 +8,4 @@
  *
  * {@link https://github.com/alphagov/govuk-frontend/releases}
  */
-export var version = 'development'
+export const version = 'development'
diff --git a/packages/govuk-frontend/src/govuk/common/index.mjs b/packages/govuk-frontend/src/govuk/common/index.mjs
index cea3bb194e..e2678d06b5 100644
--- a/packages/govuk-frontend/src/govuk/common/index.mjs
+++ b/packages/govuk-frontend/src/govuk/common/index.mjs
@@ -17,12 +17,12 @@
  * @returns {string} Unique ID
  */
 export function generateUniqueID () {
-  var d = new Date().getTime()
+  let d = new Date().getTime()
   if (typeof window.performance !== 'undefined' && typeof window.performance.now === 'function') {
     d += window.performance.now() // use high-precision timer if available
   }
   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-    var r = (d + Math.random() * 16) % 16 | 0
+    const r = (d + Math.random() * 16) % 16 | 0
     d = Math.floor(d / 16)
     return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16)
   })
@@ -48,10 +48,10 @@ export function mergeConfigs (/* configObject1, configObject2, ...configObjects
    * @param {{ [key: string]: unknown }} configObject - Deeply nested object
    * @returns {{ [key: string]: unknown }} Flattened object with dot-separated keys
    */
-  var flattenObject = function (configObject) {
+  const flattenObject = function (configObject) {
     // Prepare an empty return object
     /** @type {{ [key: string]: unknown }} */
-    var flattenedObject = {}
+    const flattenedObject = {}
 
     /**
      * Our flattening function, this is called recursively for each level of
@@ -61,16 +61,16 @@ export function mergeConfigs (/* configObject1, configObject2, ...configObjects
      * @param {Partial<{ [key: string]: unknown }>} obj - Object to flatten
      * @param {string} [prefix] - Optional dot-separated prefix
      */
-    var flattenLoop = function (obj, prefix) {
+    const flattenLoop = function (obj, prefix) {
       // Loop through keys...
-      for (var key in obj) {
+      for (const key in obj) {
         // Check to see if this is a prototypical key/value,
         // if it is, skip it.
         if (!Object.prototype.hasOwnProperty.call(obj, key)) {
           continue
         }
-        var value = obj[key]
-        var prefixedKey = prefix ? prefix + '.' + key : key
+        const value = obj[key]
+        const prefixedKey = prefix ? prefix + '.' + key : key
         if (typeof value === 'object') {
           // If the value is a nested object, recurse over that too
           flattenLoop(value, prefixedKey)
@@ -88,15 +88,15 @@ export function mergeConfigs (/* configObject1, configObject2, ...configObjects
 
   // Start with an empty object as our base
   /** @type {{ [key: string]: unknown }} */
-  var formattedConfigObject = {}
+  const formattedConfigObject = {}
 
   // Loop through each of the remaining passed objects and push their keys
   // one-by-one into configObject. Any duplicate keys will override the existing
   // key with the new value.
-  for (var i = 0; i < arguments.length; i++) {
+  for (let i = 0; i < arguments.length; i++) {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-argument -- Ignore mismatch between arguments types
-    var obj = flattenObject(arguments[i])
-    for (var key in obj) {
+    const obj = flattenObject(arguments[i])
+    for (const key in obj) {
       if (Object.prototype.hasOwnProperty.call(obj, key)) {
         formattedConfigObject[key] = obj[key]
       }
@@ -128,11 +128,11 @@ export function extractConfigByNamespace (configObject, namespace) {
   }
 
   /** @type {{ [key: string]: unknown }} */
-  var newObject = {}
+  const newObject = {}
 
-  for (var key in configObject) {
+  for (const key in configObject) {
     // Split the key into parts, using . as our namespace separator
-    var keyParts = key.split('.')
+    const keyParts = key.split('.')
     // Check if the first namespace matches the configured namespace
     if (Object.prototype.hasOwnProperty.call(configObject, key) && keyParts[0] === namespace) {
       // Remove the first item (the namespace) from the parts array,
@@ -141,7 +141,7 @@ export function extractConfigByNamespace (configObject, namespace) {
         keyParts.shift()
       }
       // Join the remaining parts back together
-      var newKey = keyParts.join('.')
+      const newKey = keyParts.join('.')
       // Add them to our new object
       newObject[newKey] = configObject[key]
     }
diff --git a/packages/govuk-frontend/src/govuk/common/normalise-dataset.mjs b/packages/govuk-frontend/src/govuk/common/normalise-dataset.mjs
index e172e62432..5137644d76 100644
--- a/packages/govuk-frontend/src/govuk/common/normalise-dataset.mjs
+++ b/packages/govuk-frontend/src/govuk/common/normalise-dataset.mjs
@@ -18,7 +18,7 @@ export function normaliseString (value) {
     return value
   }
 
-  var trimmedValue = value.trim()
+  const trimmedValue = value.trim()
 
   if (trimmedValue === 'true') {
     return true
@@ -48,9 +48,9 @@ export function normaliseString (value) {
  */
 export function normaliseDataset (dataset) {
   /** @type {{ [key: string]: unknown }} */
-  var out = {}
+  const out = {}
 
-  for (var key in dataset) {
+  for (const key in dataset) {
     out[key] = normaliseString(dataset[key])
   }
 
diff --git a/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs b/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs
index bcffd7d294..cb0d7085d0 100644
--- a/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs
+++ b/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs
@@ -10,7 +10,7 @@ import { I18n } from '../../i18n.mjs'
  * @default
  * @type {AccordionTranslations}
  */
-var ACCORDION_TRANSLATIONS = {
+const ACCORDION_TRANSLATIONS = {
   hideAllSections: 'Hide all sections',
   hideSection: 'Hide',
   hideSectionAriaLabel: 'Hide this section',
@@ -44,7 +44,7 @@ function Accordion ($module, config) {
   this.$module = $module
 
   /** @type {AccordionConfig} */
-  var defaultConfig = {
+  const defaultConfig = {
     i18n: ACCORDION_TRANSLATIONS,
     rememberExpanded: true
   }
@@ -119,7 +119,7 @@ function Accordion ($module, config) {
   /** @deprecated Will be made private in v5.0 */
   this.sectionContentClass = 'govuk-accordion__section-content'
 
-  var $sections = this.$module.querySelectorAll('.' + this.sectionClass)
+  const $sections = this.$module.querySelectorAll('.' + this.sectionClass)
   if (!$sections.length) {
     return this
   }
@@ -153,7 +153,7 @@ Accordion.prototype.init = function () {
   this.initSectionHeaders()
 
   // See if "Show all sections" button text should be updated
-  var areAllSectionsOpen = this.checkIfAllSectionsOpen()
+  const areAllSectionsOpen = this.checkIfAllSectionsOpen()
   this.updateShowAllButton(areAllSectionsOpen)
 }
 
@@ -175,7 +175,7 @@ Accordion.prototype.initControls = function () {
   this.$showAllButton.appendChild(this.$showAllIcon)
 
   // Create control wrapper and add controls to it
-  var $accordionControls = document.createElement('div')
+  const $accordionControls = document.createElement('div')
   $accordionControls.setAttribute('class', this.controlsClass)
   $accordionControls.appendChild(this.$showAllButton)
   this.$module.insertBefore($accordionControls, this.$module.firstChild)
@@ -200,12 +200,12 @@ Accordion.prototype.initControls = function () {
  * @deprecated Will be made private in v5.0
  */
 Accordion.prototype.initSectionHeaders = function () {
-  var $component = this
-  var $sections = this.$sections
+  const $component = this
+  const $sections = this.$sections
 
   // Loop through sections
   $sections.forEach(function ($section, i) {
-    var $header = $section.querySelector('.' + $component.sectionHeaderClass)
+    const $header = $section.querySelector('.' + $component.sectionHeaderClass)
     if (!$header) {
       return
     }
@@ -231,22 +231,22 @@ Accordion.prototype.initSectionHeaders = function () {
  * @param {number} index - Section index
  */
 Accordion.prototype.constructHeaderMarkup = function ($header, index) {
-  var $span = $header.querySelector('.' + this.sectionButtonClass)
-  var $heading = $header.querySelector('.' + this.sectionHeadingClass)
-  var $summary = $header.querySelector('.' + this.sectionSummaryClass)
+  const $span = $header.querySelector('.' + this.sectionButtonClass)
+  const $heading = $header.querySelector('.' + this.sectionHeadingClass)
+  const $summary = $header.querySelector('.' + this.sectionSummaryClass)
 
   if (!$span || !$heading) {
     return
   }
 
   // Create a button element that will replace the '.govuk-accordion__section-button' span
-  var $button = document.createElement('button')
+  const $button = document.createElement('button')
   $button.setAttribute('type', 'button')
   $button.setAttribute('aria-controls', this.$module.id + '-content-' + (index + 1).toString())
 
   // Copy all attributes (https://developer.mozilla.org/en-US/docs/Web/API/Element/attributes) from $span to $button
-  for (var i = 0; i < $span.attributes.length; i++) {
-    var attr = $span.attributes.item(i)
+  for (let i = 0; i < $span.attributes.length; i++) {
+    const attr = $span.attributes.item(i)
     // Add all attributes but not ID as this is being added to
     // the section heading ($headingText)
     if (attr.nodeName !== 'id') {
@@ -255,33 +255,33 @@ Accordion.prototype.constructHeaderMarkup = function ($header, index) {
   }
 
   // Create container for heading text so it can be styled
-  var $headingText = document.createElement('span')
+  const $headingText = document.createElement('span')
   $headingText.classList.add(this.sectionHeadingTextClass)
   // Copy the span ID to the heading text to allow it to be referenced by `aria-labelledby` on the
   // hidden content area without "Show this section"
   $headingText.id = $span.id
 
   // Create an inner heading text container to limit the width of the focus state
-  var $headingTextFocus = document.createElement('span')
+  const $headingTextFocus = document.createElement('span')
   $headingTextFocus.classList.add(this.sectionHeadingTextFocusClass)
   $headingText.appendChild($headingTextFocus)
   // span could contain HTML elements (see https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html#phrasing-content)
   $headingTextFocus.innerHTML = $span.innerHTML
 
   // Create container for show / hide icons and text.
-  var $showHideToggle = document.createElement('span')
+  const $showHideToggle = document.createElement('span')
   $showHideToggle.classList.add(this.sectionShowHideToggleClass)
   // Tell Google not to index the 'show' text as part of the heading
   // For the snippet to work with JavaScript, it must be added before adding the page element to the
   // page's DOM. See https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#data-nosnippet-attr
   $showHideToggle.setAttribute('data-nosnippet', '')
   // Create an inner container to limit the width of the focus state
-  var $showHideToggleFocus = document.createElement('span')
+  const $showHideToggleFocus = document.createElement('span')
   $showHideToggleFocus.classList.add(this.sectionShowHideToggleFocusClass)
   $showHideToggle.appendChild($showHideToggleFocus)
   // Create wrapper for the show / hide text. Append text after the show/hide icon
-  var $showHideText = document.createElement('span')
-  var $showHideIcon = document.createElement('span')
+  const $showHideText = document.createElement('span')
+  const $showHideIcon = document.createElement('span')
   $showHideIcon.classList.add(this.upChevronIconClass)
   $showHideToggleFocus.appendChild($showHideIcon)
   $showHideText.classList.add(this.sectionShowHideTextClass)
@@ -301,16 +301,16 @@ Accordion.prototype.constructHeaderMarkup = function ($header, index) {
     // new `span`
     // This is because the summary line text is now inside a button element, which can only contain
     // phrasing content
-    var $summarySpan = document.createElement('span')
+    const $summarySpan = document.createElement('span')
     // Create an inner summary container to limit the width of the summary focus state
-    var $summarySpanFocus = document.createElement('span')
+    const $summarySpanFocus = document.createElement('span')
     $summarySpanFocus.classList.add(this.sectionSummaryFocusClass)
     $summarySpan.appendChild($summarySpanFocus)
 
     // Get original attributes, and pass them to the replacement
-    for (var j = 0, l = $summary.attributes.length; j < l; ++j) {
-      var nodeName = $summary.attributes.item(j).nodeName
-      var nodeValue = $summary.attributes.item(j).nodeValue
+    for (let j = 0, l = $summary.attributes.length; j < l; ++j) {
+      const nodeName = $summary.attributes.item(j).nodeName
+      const nodeValue = $summary.attributes.item(j).nodeValue
       $summarySpan.setAttribute(nodeName, nodeValue)
     }
 
@@ -337,7 +337,7 @@ Accordion.prototype.constructHeaderMarkup = function ($header, index) {
  * @param {Event} event - Generic event
  */
 Accordion.prototype.onBeforeMatch = function (event) {
-  var $fragment = event.target
+  const $fragment = event.target
 
   // Handle elements with `.closest()` support only
   if (!($fragment instanceof Element)) {
@@ -345,7 +345,7 @@ Accordion.prototype.onBeforeMatch = function (event) {
   }
 
   // Handle when fragment is inside section
-  var $section = $fragment.closest('.' + this.sectionClass)
+  const $section = $fragment.closest('.' + this.sectionClass)
   if ($section) {
     this.setExpanded(true, $section)
   }
@@ -358,7 +358,7 @@ Accordion.prototype.onBeforeMatch = function (event) {
  * @param {Element} $section - Section element
  */
 Accordion.prototype.onSectionToggle = function ($section) {
-  var expanded = this.isExpanded($section)
+  const expanded = this.isExpanded($section)
   this.setExpanded(!expanded, $section)
 
   // Store the state in sessionStorage when a change is triggered
@@ -371,10 +371,10 @@ Accordion.prototype.onSectionToggle = function ($section) {
  * @deprecated Will be made private in v5.0
  */
 Accordion.prototype.onShowOrHideAllToggle = function () {
-  var $component = this
-  var $sections = this.$sections
+  const $component = this
+  const $sections = this.$sections
 
-  var nowExpanded = !this.checkIfAllSectionsOpen()
+  const nowExpanded = !this.checkIfAllSectionsOpen()
 
   // Loop through sections
   $sections.forEach(function ($section) {
@@ -394,10 +394,10 @@ Accordion.prototype.onShowOrHideAllToggle = function () {
  * @param {Element} $section - Section element
  */
 Accordion.prototype.setExpanded = function (expanded, $section) {
-  var $showHideIcon = $section.querySelector('.' + this.upChevronIconClass)
-  var $showHideText = $section.querySelector('.' + this.sectionShowHideTextClass)
-  var $button = $section.querySelector('.' + this.sectionButtonClass)
-  var $content = $section.querySelector('.' + this.sectionContentClass)
+  const $showHideIcon = $section.querySelector('.' + this.upChevronIconClass)
+  const $showHideText = $section.querySelector('.' + this.sectionShowHideTextClass)
+  const $button = $section.querySelector('.' + this.sectionButtonClass)
+  const $content = $section.querySelector('.' + this.sectionContentClass)
 
   if (!$showHideIcon ||
     !($showHideText instanceof HTMLElement) ||
@@ -406,7 +406,7 @@ Accordion.prototype.setExpanded = function (expanded, $section) {
     return
   }
 
-  var newButtonText = expanded
+  const newButtonText = expanded
     ? this.i18n.t('hideSection')
     : this.i18n.t('showSection')
 
@@ -414,19 +414,19 @@ Accordion.prototype.setExpanded = function (expanded, $section) {
   $button.setAttribute('aria-expanded', expanded.toString())
 
   // Update aria-label combining
-  var ariaLabelParts = []
+  const ariaLabelParts = []
 
-  var $headingText = $section.querySelector('.' + this.sectionHeadingTextClass)
+  const $headingText = $section.querySelector('.' + this.sectionHeadingTextClass)
   if ($headingText instanceof HTMLElement) {
     ariaLabelParts.push($headingText.innerText.trim())
   }
 
-  var $summary = $section.querySelector('.' + this.sectionSummaryClass)
+  const $summary = $section.querySelector('.' + this.sectionSummaryClass)
   if ($summary instanceof HTMLElement) {
     ariaLabelParts.push($summary.innerText.trim())
   }
 
-  var ariaLabelMessage = expanded
+  const ariaLabelMessage = expanded
     ? this.i18n.t('hideSectionAriaLabel')
     : this.i18n.t('showSectionAriaLabel')
   ariaLabelParts.push(ariaLabelMessage)
@@ -450,7 +450,7 @@ Accordion.prototype.setExpanded = function (expanded, $section) {
   }
 
   // See if "Show all sections" button text should be updated
-  var areAllSectionsOpen = this.checkIfAllSectionsOpen()
+  const areAllSectionsOpen = this.checkIfAllSectionsOpen()
   this.updateShowAllButton(areAllSectionsOpen)
 }
 
@@ -473,10 +473,10 @@ Accordion.prototype.isExpanded = function ($section) {
  */
 Accordion.prototype.checkIfAllSectionsOpen = function () {
   // Get a count of all the Accordion sections
-  var sectionsCount = this.$sections.length
+  const sectionsCount = this.$sections.length
   // Get a count of all Accordion sections that are expanded
-  var expandedSectionCount = this.$module.querySelectorAll('.' + this.sectionExpandedClass).length
-  var areAllSectionsOpen = sectionsCount === expandedSectionCount
+  const expandedSectionCount = this.$module.querySelectorAll('.' + this.sectionExpandedClass).length
+  const areAllSectionsOpen = sectionsCount === expandedSectionCount
 
   return areAllSectionsOpen
 }
@@ -488,7 +488,7 @@ Accordion.prototype.checkIfAllSectionsOpen = function () {
  * @param {boolean} expanded - Section expanded
  */
 Accordion.prototype.updateShowAllButton = function (expanded) {
-  var newButtonText = expanded
+  const newButtonText = expanded
     ? this.i18n.t('hideAllSections')
     : this.i18n.t('showAllSections')
 
@@ -503,15 +503,15 @@ Accordion.prototype.updateShowAllButton = function (expanded) {
   }
 }
 
-var helper = {
+const helper = {
   /**
    * Check for `window.sessionStorage`, and that it actually works.
    *
    * @returns {boolean} True if session storage is available
    */
   checkForSessionStorage: function () {
-    var testString = 'this is the test string'
-    var result
+    const testString = 'this is the test string'
+    let result
     try {
       window.sessionStorage.setItem(testString, testString)
       result = window.sessionStorage.getItem(testString) === testString.toString()
@@ -534,11 +534,11 @@ Accordion.prototype.storeState = function ($section) {
     // We need a unique way of identifying each content in the Accordion. Since
     // an `#id` should be unique and an `id` is required for `aria-` attributes
     // `id` can be safely used.
-    var $button = $section.querySelector('.' + this.sectionButtonClass)
+    const $button = $section.querySelector('.' + this.sectionButtonClass)
 
     if ($button) {
-      var contentId = $button.getAttribute('aria-controls')
-      var contentState = $button.getAttribute('aria-expanded')
+      const contentId = $button.getAttribute('aria-controls')
+      const contentState = $button.getAttribute('aria-expanded')
 
       // Only set the state when both `contentId` and `contentState` are taken from the DOM.
       if (contentId && contentState) {
@@ -556,11 +556,11 @@ Accordion.prototype.storeState = function ($section) {
  */
 Accordion.prototype.setInitialState = function ($section) {
   if (this.browserSupportsSessionStorage && this.config.rememberExpanded) {
-    var $button = $section.querySelector('.' + this.sectionButtonClass)
+    const $button = $section.querySelector('.' + this.sectionButtonClass)
 
     if ($button) {
-      var contentId = $button.getAttribute('aria-controls')
-      var contentState = contentId ? window.sessionStorage.getItem(contentId) : null
+      const contentId = $button.getAttribute('aria-controls')
+      const contentState = contentId ? window.sessionStorage.getItem(contentId) : null
 
       if (contentState !== null) {
         this.setExpanded(contentState === 'true', $section)
@@ -580,7 +580,7 @@ Accordion.prototype.setInitialState = function ($section) {
  * @returns {Element} DOM element
  */
 Accordion.prototype.getButtonPunctuationEl = function () {
-  var $punctuationEl = document.createElement('span')
+  const $punctuationEl = document.createElement('span')
   $punctuationEl.classList.add('govuk-visually-hidden', this.sectionHeadingDividerClass)
   $punctuationEl.innerHTML = ', '
   return $punctuationEl
diff --git a/packages/govuk-frontend/src/govuk/components/button/button.mjs b/packages/govuk-frontend/src/govuk/components/button/button.mjs
index 35c86c874c..d7baa46144 100644
--- a/packages/govuk-frontend/src/govuk/components/button/button.mjs
+++ b/packages/govuk-frontend/src/govuk/components/button/button.mjs
@@ -1,8 +1,8 @@
 import { mergeConfigs } from '../../common/index.mjs'
 import { normaliseDataset } from '../../common/normalise-dataset.mjs'
 
-var KEY_SPACE = 32
-var DEBOUNCE_TIMEOUT_IN_SECONDS = 1
+const KEY_SPACE = 32
+const DEBOUNCE_TIMEOUT_IN_SECONDS = 1
 
 /**
  * JavaScript enhancements for the Button component
@@ -23,7 +23,7 @@ function Button ($module, config) {
   this.debounceFormSubmitTimer = null
 
   /** @type {ButtonConfig} */
-  var defaultConfig = {
+  const defaultConfig = {
     preventDoubleClick: false
   }
 
@@ -63,7 +63,7 @@ Button.prototype.init = function () {
  * @param {KeyboardEvent} event - Keydown event
  */
 Button.prototype.handleKeyDown = function (event) {
-  var $target = event.target
+  const $target = event.target
 
   // Handle space bar only
   if (event.keyCode !== KEY_SPACE) {
diff --git a/packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs b/packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs
index 1469a95692..99d6e3d7e6 100644
--- a/packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs
+++ b/packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs
@@ -11,7 +11,7 @@ import { I18n } from '../../i18n.mjs'
  * @default
  * @type {CharacterCountTranslations}
  */
-var CHARACTER_COUNT_TRANSLATIONS = {
+const CHARACTER_COUNT_TRANSLATIONS = {
   // Characters
   charactersUnderLimit: {
     one: 'You have %{count} character remaining',
@@ -56,7 +56,7 @@ function CharacterCount ($module, config) {
     return this
   }
 
-  var $textarea = $module.querySelector('.govuk-js-character-count')
+  const $textarea = $module.querySelector('.govuk-js-character-count')
   if (
     !(
       $textarea instanceof HTMLTextAreaElement ||
@@ -67,13 +67,13 @@ function CharacterCount ($module, config) {
   }
 
   /** @type {CharacterCountConfig} */
-  var defaultConfig = {
+  const defaultConfig = {
     threshold: 0,
     i18n: CHARACTER_COUNT_TRANSLATIONS
   }
 
   // Read config set using dataset ('data-' values)
-  var datasetConfig = normaliseDataset($module.dataset)
+  const datasetConfig = normaliseDataset($module.dataset)
 
   // To ensure data-attributes take complete precedence, even if they change the
   // type of count, we need to reset the `maxlength` and `maxwords` from the
@@ -82,7 +82,7 @@ function CharacterCount ($module, config) {
   // We can't mutate `config`, though, as it may be shared across multiple
   // components inside `initAll`.
   /** @type {CharacterCountConfig} */
-  var configOverrides = {}
+  let configOverrides = {}
   if ('maxwords' in datasetConfig || 'maxlength' in datasetConfig) {
     configOverrides = {
       maxlength: undefined,
@@ -149,8 +149,8 @@ CharacterCount.prototype.init = function () {
     return
   }
 
-  var $textarea = this.$textarea
-  var $textareaDescription = document.getElementById($textarea.id + '-info')
+  const $textarea = this.$textarea
+  const $textareaDescription = document.getElementById($textarea.id + '-info')
   if (!$textareaDescription) {
     return
   }
@@ -168,7 +168,7 @@ CharacterCount.prototype.init = function () {
 
   // Create the *screen reader* specific live-updating counter
   // This doesn't need any styling classes, as it is never visible
-  var $screenReaderCountMessage = document.createElement('div')
+  const $screenReaderCountMessage = document.createElement('div')
   $screenReaderCountMessage.className = 'govuk-character-count__sr-status govuk-visually-hidden'
   $screenReaderCountMessage.setAttribute('aria-live', 'polite')
   this.$screenReaderCountMessage = $screenReaderCountMessage
@@ -177,7 +177,7 @@ CharacterCount.prototype.init = function () {
   // Create our live-updating counter element, copying the classes from the
   // textarea description for backwards compatibility as these may have been
   // configured
-  var $visibleCountMessage = document.createElement('div')
+  const $visibleCountMessage = document.createElement('div')
   $visibleCountMessage.className = $textareaDescription.className
   $visibleCountMessage.classList.add('govuk-character-count__status')
   $visibleCountMessage.setAttribute('aria-hidden', 'true')
@@ -212,7 +212,7 @@ CharacterCount.prototype.init = function () {
  * @deprecated Will be made private in v5.0
  */
 CharacterCount.prototype.bindChangeEvents = function () {
-  var $textarea = this.$textarea
+  const $textarea = this.$textarea
   $textarea.addEventListener('keyup', this.handleKeyUp.bind(this))
 
   // Bind focus/blur events to start/stop polling
@@ -299,9 +299,9 @@ CharacterCount.prototype.updateCountMessage = function () {
  * @deprecated Will be made private in v5.0
  */
 CharacterCount.prototype.updateVisibleCountMessage = function () {
-  var $textarea = this.$textarea
-  var $visibleCountMessage = this.$visibleCountMessage
-  var remainingNumber = this.maxLength - this.count($textarea.value)
+  const $textarea = this.$textarea
+  const $visibleCountMessage = this.$visibleCountMessage
+  const remainingNumber = this.maxLength - this.count($textarea.value)
 
   // If input is over the threshold, remove the disabled class which renders the
   // counter invisible.
@@ -332,7 +332,7 @@ CharacterCount.prototype.updateVisibleCountMessage = function () {
  * @deprecated Will be made private in v5.0
  */
 CharacterCount.prototype.updateScreenReaderCountMessage = function () {
-  var $screenReaderCountMessage = this.$screenReaderCountMessage
+  const $screenReaderCountMessage = this.$screenReaderCountMessage
 
   // If over the threshold, remove the aria-hidden attribute, allowing screen
   // readers to announce the content of the element.
@@ -356,7 +356,7 @@ CharacterCount.prototype.updateScreenReaderCountMessage = function () {
  */
 CharacterCount.prototype.count = function (text) {
   if ('maxwords' in this.config && this.config.maxwords) {
-    var tokens = text.match(/\S+/g) || [] // Matches consecutive non-whitespace chars
+    const tokens = text.match(/\S+/g) || [] // Matches consecutive non-whitespace chars
     return tokens.length
   } else {
     return text.length
@@ -370,9 +370,9 @@ CharacterCount.prototype.count = function (text) {
  * @returns {string} Status message
  */
 CharacterCount.prototype.getCountMessage = function () {
-  var remainingNumber = this.maxLength - this.count(this.$textarea.value)
+  const remainingNumber = this.maxLength - this.count(this.$textarea.value)
 
-  var countType = 'maxwords' in this.config && this.config.maxwords ? 'words' : 'characters'
+  const countType = 'maxwords' in this.config && this.config.maxwords ? 'words' : 'characters'
   return this.formatCountMessage(remainingNumber, countType)
 }
 
@@ -390,7 +390,7 @@ CharacterCount.prototype.formatCountMessage = function (remainingNumber, countTy
     return this.i18n.t(countType + 'AtLimit')
   }
 
-  var translationKeySuffix = remainingNumber < 0 ? 'OverLimit' : 'UnderLimit'
+  const translationKeySuffix = remainingNumber < 0 ? 'OverLimit' : 'UnderLimit'
 
   return this.i18n.t(countType + translationKeySuffix, { count: Math.abs(remainingNumber) })
 }
@@ -412,13 +412,13 @@ CharacterCount.prototype.isOverThreshold = function () {
     return true
   }
 
-  var $textarea = this.$textarea
+  const $textarea = this.$textarea
 
   // Determine the remaining number of characters/words
-  var currentLength = this.count($textarea.value)
-  var maxLength = this.maxLength
+  const currentLength = this.count($textarea.value)
+  const maxLength = this.maxLength
 
-  var thresholdValue = maxLength * this.config.threshold / 100
+  const thresholdValue = maxLength * this.config.threshold / 100
 
   return (thresholdValue <= currentLength)
 }
diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs b/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs
index 0938ff13ee..6419f88ba8 100644
--- a/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs
+++ b/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs
@@ -10,7 +10,7 @@ function Checkboxes ($module) {
   }
 
   /** @satisfies {NodeListOf<HTMLInputElement>} */
-  var $inputs = $module.querySelectorAll('input[type="checkbox"]')
+  const $inputs = $module.querySelectorAll('input[type="checkbox"]')
   if (!$inputs.length) {
     return this
   }
@@ -42,11 +42,11 @@ Checkboxes.prototype.init = function () {
     return
   }
 
-  var $module = this.$module
-  var $inputs = this.$inputs
+  const $module = this.$module
+  const $inputs = this.$inputs
 
   $inputs.forEach(function ($input) {
-    var targetId = $input.getAttribute('data-aria-controls')
+    const targetId = $input.getAttribute('data-aria-controls')
 
     // Skip checkboxes without data-aria-controls attributes, or where the
     // target element does not exist.
@@ -93,14 +93,14 @@ Checkboxes.prototype.syncAllConditionalReveals = function () {
  * @param {HTMLInputElement} $input - Checkbox input
  */
 Checkboxes.prototype.syncConditionalRevealWithInputState = function ($input) {
-  var targetId = $input.getAttribute('aria-controls')
+  const targetId = $input.getAttribute('aria-controls')
   if (!targetId) {
     return
   }
 
-  var $target = document.getElementById(targetId)
+  const $target = document.getElementById(targetId)
   if ($target && $target.classList.contains('govuk-checkboxes__conditional')) {
-    var inputIsChecked = $input.checked
+    const inputIsChecked = $input.checked
 
     $input.setAttribute('aria-expanded', inputIsChecked.toString())
     $target.classList.toggle('govuk-checkboxes__conditional--hidden', !inputIsChecked)
@@ -117,15 +117,15 @@ Checkboxes.prototype.syncConditionalRevealWithInputState = function ($input) {
  * @param {HTMLInputElement} $input - Checkbox input
  */
 Checkboxes.prototype.unCheckAllInputsExcept = function ($input) {
-  var $component = this
+  const $component = this
 
   /** @satisfies {NodeListOf<HTMLInputElement>} */
-  var allInputsWithSameName = document.querySelectorAll(
+  const allInputsWithSameName = document.querySelectorAll(
     'input[type="checkbox"][name="' + $input.name + '"]'
   )
 
   allInputsWithSameName.forEach(function ($inputWithSameName) {
-    var hasSameFormOwner = ($input.form === $inputWithSameName.form)
+    const hasSameFormOwner = ($input.form === $inputWithSameName.form)
     if (hasSameFormOwner && $inputWithSameName !== $input) {
       $inputWithSameName.checked = false
       $component.syncConditionalRevealWithInputState($inputWithSameName)
@@ -144,15 +144,15 @@ Checkboxes.prototype.unCheckAllInputsExcept = function ($input) {
  * @param {HTMLInputElement} $input - Checkbox input
  */
 Checkboxes.prototype.unCheckExclusiveInputs = function ($input) {
-  var $component = this
+  const $component = this
 
   /** @satisfies {NodeListOf<HTMLInputElement>} */
-  var allInputsWithSameNameAndExclusiveBehaviour = document.querySelectorAll(
+  const allInputsWithSameNameAndExclusiveBehaviour = document.querySelectorAll(
     'input[data-behaviour="exclusive"][type="checkbox"][name="' + $input.name + '"]'
   )
 
   allInputsWithSameNameAndExclusiveBehaviour.forEach(function ($exclusiveInput) {
-    var hasSameFormOwner = ($input.form === $exclusiveInput.form)
+    const hasSameFormOwner = ($input.form === $exclusiveInput.form)
     if (hasSameFormOwner) {
       $exclusiveInput.checked = false
       $component.syncConditionalRevealWithInputState($exclusiveInput)
@@ -170,7 +170,7 @@ Checkboxes.prototype.unCheckExclusiveInputs = function ($input) {
  * @param {MouseEvent} event - Click event
  */
 Checkboxes.prototype.handleClick = function (event) {
-  var $clickedInput = event.target
+  const $clickedInput = event.target
 
   // Ignore clicks on things that aren't checkbox inputs
   if (!($clickedInput instanceof HTMLInputElement) || $clickedInput.type !== 'checkbox') {
@@ -178,7 +178,7 @@ Checkboxes.prototype.handleClick = function (event) {
   }
 
   // If the checkbox conditionally-reveals some content, sync the state
-  var hasAriaControls = $clickedInput.getAttribute('aria-controls')
+  const hasAriaControls = $clickedInput.getAttribute('aria-controls')
   if (hasAriaControls) {
     this.syncConditionalRevealWithInputState($clickedInput)
   }
@@ -189,7 +189,7 @@ Checkboxes.prototype.handleClick = function (event) {
   }
 
   // Handle 'exclusive' checkbox behaviour (ie "None of these")
-  var hasBehaviourExclusive = ($clickedInput.getAttribute('data-behaviour') === 'exclusive')
+  const hasBehaviourExclusive = ($clickedInput.getAttribute('data-behaviour') === 'exclusive')
   if (hasBehaviourExclusive) {
     this.unCheckAllInputsExcept($clickedInput)
   } else {
diff --git a/packages/govuk-frontend/src/govuk/components/details/details.mjs b/packages/govuk-frontend/src/govuk/components/details/details.mjs
index bca51c127b..52469e93f8 100644
--- a/packages/govuk-frontend/src/govuk/components/details/details.mjs
+++ b/packages/govuk-frontend/src/govuk/components/details/details.mjs
@@ -6,8 +6,8 @@
  */
 import { generateUniqueID } from '../../common/index.mjs'
 
-var KEY_ENTER = 13
-var KEY_SPACE = 32
+const KEY_ENTER = 13
+const KEY_SPACE = 32
 
 /**
  * Details component
@@ -40,7 +40,7 @@ Details.prototype.init = function () {
   }
 
   // If there is native details support, we want to avoid running code to polyfill native behaviour.
-  var hasNativeDetails = 'HTMLDetailsElement' in window &&
+  const hasNativeDetails = 'HTMLDetailsElement' in window &&
     this.$module instanceof HTMLDetailsElement
 
   if (!hasNativeDetails) {
@@ -54,11 +54,11 @@ Details.prototype.init = function () {
  * @deprecated Will be made private in v5.0
  */
 Details.prototype.polyfillDetails = function () {
-  var $module = this.$module
+  const $module = this.$module
 
   // Save shortcuts to the inner summary and content elements
-  var $summary = this.$summary = $module.getElementsByTagName('summary').item(0)
-  var $content = this.$content = $module.getElementsByTagName('div').item(0)
+  const $summary = this.$summary = $module.getElementsByTagName('summary').item(0)
+  const $content = this.$content = $module.getElementsByTagName('div').item(0)
 
   // If <details> doesn't have a <summary> and a <div> representing the content
   // it means the required HTML structure is not met so the script will stop
@@ -127,7 +127,7 @@ Details.prototype.polyfillSetAttributes = function () {
  */
 Details.prototype.polyfillHandleInputs = function (callback) {
   this.$summary.addEventListener('keypress', function (event) {
-    var $target = event.target
+    const $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 instanceof HTMLElement && $target.nodeName.toLowerCase() === 'summary') {
@@ -147,7 +147,7 @@ Details.prototype.polyfillHandleInputs = function (callback) {
 
   // Prevent keyup to prevent clicking twice in Firefox when using space key
   this.$summary.addEventListener('keyup', function (event) {
-    var $target = event.target
+    const $target = event.target
     if (event.keyCode === KEY_SPACE) {
       if ($target instanceof HTMLElement && $target.nodeName.toLowerCase() === 'summary') {
         event.preventDefault()
diff --git a/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs b/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs
index 2adf263ded..6be42569a2 100644
--- a/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs
+++ b/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs
@@ -28,7 +28,7 @@ function ErrorSummary ($module, config) {
   this.$module = $module
 
   /** @type {ErrorSummaryConfig} */
-  var defaultConfig = {
+  const defaultConfig = {
     disableAutoFocus: false
   }
 
@@ -52,7 +52,7 @@ ErrorSummary.prototype.init = function () {
     return
   }
 
-  var $module = this.$module
+  const $module = this.$module
 
   this.setFocus()
   $module.addEventListener('click', this.handleClick.bind(this))
@@ -64,7 +64,7 @@ ErrorSummary.prototype.init = function () {
  * @deprecated Will be made private in v5.0
  */
 ErrorSummary.prototype.setFocus = function () {
-  var $module = this.$module
+  const $module = this.$module
 
   if (this.config.disableAutoFocus) {
     return
@@ -88,7 +88,7 @@ ErrorSummary.prototype.setFocus = function () {
  * @param {MouseEvent} event - Click event
  */
 ErrorSummary.prototype.handleClick = function (event) {
-  var $target = event.target
+  const $target = event.target
   if (this.focusTarget($target)) {
     event.preventDefault()
   }
@@ -119,17 +119,17 @@ ErrorSummary.prototype.focusTarget = function ($target) {
     return false
   }
 
-  var inputId = this.getFragmentFromUrl($target.href)
+  const inputId = this.getFragmentFromUrl($target.href)
   if (!inputId) {
     return false
   }
 
-  var $input = document.getElementById(inputId)
+  const $input = document.getElementById(inputId)
   if (!$input) {
     return false
   }
 
-  var $legendOrLabel = this.getAssociatedLegendOrLabel($input)
+  const $legendOrLabel = this.getAssociatedLegendOrLabel($input)
   if (!$legendOrLabel) {
     return false
   }
@@ -178,13 +178,13 @@ ErrorSummary.prototype.getFragmentFromUrl = function (url) {
  *   legend or label can be found
  */
 ErrorSummary.prototype.getAssociatedLegendOrLabel = function ($input) {
-  var $fieldset = $input.closest('fieldset')
+  const $fieldset = $input.closest('fieldset')
 
   if ($fieldset) {
-    var $legends = $fieldset.getElementsByTagName('legend')
+    const $legends = $fieldset.getElementsByTagName('legend')
 
     if ($legends.length) {
-      var $candidateLegend = $legends[0]
+      const $candidateLegend = $legends[0]
 
       // If the input type is radio or checkbox, always use the legend if there
       // is one.
@@ -198,13 +198,13 @@ ErrorSummary.prototype.getAssociatedLegendOrLabel = function ($input) {
       //
       // This should avoid situations where the input either ends up off the
       // screen, or obscured by a software keyboard.
-      var legendTop = $candidateLegend.getBoundingClientRect().top
-      var inputRect = $input.getBoundingClientRect()
+      const legendTop = $candidateLegend.getBoundingClientRect().top
+      const inputRect = $input.getBoundingClientRect()
 
       // If the browser doesn't support Element.getBoundingClientRect().height
       // or window.innerHeight (like IE8), bail and just link to the label.
       if (inputRect.height && window.innerHeight) {
-        var inputBottom = inputRect.top + inputRect.height
+        const inputBottom = inputRect.top + inputRect.height
 
         if (inputBottom - legendTop < window.innerHeight / 2) {
           return $candidateLegend
diff --git a/packages/govuk-frontend/src/govuk/components/notification-banner/notification-banner.mjs b/packages/govuk-frontend/src/govuk/components/notification-banner/notification-banner.mjs
index c8822f5e84..b3a895e3e5 100644
--- a/packages/govuk-frontend/src/govuk/components/notification-banner/notification-banner.mjs
+++ b/packages/govuk-frontend/src/govuk/components/notification-banner/notification-banner.mjs
@@ -17,7 +17,7 @@ function NotificationBanner ($module, config) {
   this.$module = $module
 
   /** @type {NotificationBannerConfig} */
-  var defaultConfig = {
+  const defaultConfig = {
     disableAutoFocus: false
   }
 
@@ -57,7 +57,7 @@ NotificationBanner.prototype.init = function () {
  * @deprecated Will be made private in v5.0
  */
 NotificationBanner.prototype.setFocus = function () {
-  var $module = this.$module
+  const $module = this.$module
 
   if (this.config.disableAutoFocus) {
     return
diff --git a/packages/govuk-frontend/src/govuk/components/radios/radios.mjs b/packages/govuk-frontend/src/govuk/components/radios/radios.mjs
index 9ed3c09b98..62d096f87d 100644
--- a/packages/govuk-frontend/src/govuk/components/radios/radios.mjs
+++ b/packages/govuk-frontend/src/govuk/components/radios/radios.mjs
@@ -10,7 +10,7 @@ function Radios ($module) {
   }
 
   /** @satisfies {NodeListOf<HTMLInputElement>} */
-  var $inputs = $module.querySelectorAll('input[type="radio"]')
+  const $inputs = $module.querySelectorAll('input[type="radio"]')
   if (!$inputs.length) {
     return this
   }
@@ -42,11 +42,11 @@ Radios.prototype.init = function () {
     return
   }
 
-  var $module = this.$module
-  var $inputs = this.$inputs
+  const $module = this.$module
+  const $inputs = this.$inputs
 
   $inputs.forEach(function ($input) {
-    var targetId = $input.getAttribute('data-aria-controls')
+    const targetId = $input.getAttribute('data-aria-controls')
 
     // Skip radios without data-aria-controls attributes, or where the
     // target element does not exist.
@@ -93,14 +93,14 @@ Radios.prototype.syncAllConditionalReveals = function () {
  * @param {HTMLInputElement} $input - Radio input
  */
 Radios.prototype.syncConditionalRevealWithInputState = function ($input) {
-  var targetId = $input.getAttribute('aria-controls')
+  const targetId = $input.getAttribute('aria-controls')
   if (!targetId) {
     return
   }
 
-  var $target = document.getElementById(targetId)
+  const $target = document.getElementById(targetId)
   if ($target && $target.classList.contains('govuk-radios__conditional')) {
-    var inputIsChecked = $input.checked
+    const inputIsChecked = $input.checked
 
     $input.setAttribute('aria-expanded', inputIsChecked.toString())
     $target.classList.toggle('govuk-radios__conditional--hidden', !inputIsChecked)
@@ -119,8 +119,8 @@ Radios.prototype.syncConditionalRevealWithInputState = function ($input) {
  * @param {MouseEvent} event - Click event
  */
 Radios.prototype.handleClick = function (event) {
-  var $component = this
-  var $clickedInput = event.target
+  const $component = this
+  const $clickedInput = event.target
 
   // Ignore clicks on things that aren't radio buttons
   if (!($clickedInput instanceof HTMLInputElement) || $clickedInput.type !== 'radio') {
@@ -130,14 +130,14 @@ Radios.prototype.handleClick = function (event) {
   // We only need to consider radios with conditional reveals, which will have
   // aria-controls attributes.
   /** @satisfies {NodeListOf<HTMLInputElement>} */
-  var $allInputs = document.querySelectorAll('input[type="radio"][aria-controls]')
+  const $allInputs = document.querySelectorAll('input[type="radio"][aria-controls]')
 
-  var $clickedInputForm = $clickedInput.form
-  var $clickedInputName = $clickedInput.name
+  const $clickedInputForm = $clickedInput.form
+  const $clickedInputName = $clickedInput.name
 
   $allInputs.forEach(function ($input) {
-    var hasSameFormOwner = $input.form === $clickedInputForm
-    var hasSameName = $input.name === $clickedInputName
+    const hasSameFormOwner = $input.form === $clickedInputForm
+    const hasSameName = $input.name === $clickedInputName
 
     if (hasSameName && hasSameFormOwner) {
       $component.syncConditionalRevealWithInputState($input)
diff --git a/packages/govuk-frontend/src/govuk/components/skip-link/skip-link.mjs b/packages/govuk-frontend/src/govuk/components/skip-link/skip-link.mjs
index 819f3ad892..f111154a28 100644
--- a/packages/govuk-frontend/src/govuk/components/skip-link/skip-link.mjs
+++ b/packages/govuk-frontend/src/govuk/components/skip-link/skip-link.mjs
@@ -29,7 +29,7 @@ SkipLink.prototype.init = function () {
   }
 
   // Check for linked element
-  var $linkedElement = this.getLinkedElement()
+  const $linkedElement = this.getLinkedElement()
   if (!$linkedElement) {
     return
   }
@@ -45,7 +45,7 @@ SkipLink.prototype.init = function () {
  * @returns {HTMLElement | null} $linkedElement - DOM element linked to from the skip link
  */
 SkipLink.prototype.getLinkedElement = function () {
-  var linkedElementId = this.getFragmentFromUrl()
+  const linkedElementId = this.getFragmentFromUrl()
   if (!linkedElementId) {
     return null
   }
@@ -61,7 +61,7 @@ SkipLink.prototype.getLinkedElement = function () {
  * @deprecated Will be made private in v5.0
  */
 SkipLink.prototype.focusLinkedElement = function () {
-  var $linkedElement = this.$linkedElement
+  const $linkedElement = this.$linkedElement
 
   if (!$linkedElement.getAttribute('tabindex')) {
     // Set the element tabindex to -1 so it can be focused with JavaScript.
diff --git a/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs b/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs
index d416bf0118..79f6771f50 100644
--- a/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs
+++ b/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs
@@ -10,7 +10,7 @@ function Tabs ($module) {
   }
 
   /** @satisfies {NodeListOf<HTMLAnchorElement>} */
-  var $tabs = $module.querySelectorAll('a.govuk-tabs__tab')
+  const $tabs = $module.querySelectorAll('a.govuk-tabs__tab')
   if (!$tabs.length) {
     return this
   }
@@ -95,11 +95,11 @@ Tabs.prototype.checkMode = function () {
  * @deprecated Will be made private in v5.0
  */
 Tabs.prototype.setup = function () {
-  var $component = this
-  var $module = this.$module
-  var $tabs = this.$tabs
-  var $tabList = $module.querySelector('.govuk-tabs__list')
-  var $tabListItems = $module.querySelectorAll('.govuk-tabs__list-item')
+  const $component = this
+  const $module = this.$module
+  const $tabs = this.$tabs
+  const $tabList = $module.querySelector('.govuk-tabs__list')
+  const $tabListItems = $module.querySelectorAll('.govuk-tabs__list-item')
 
   if (!$tabs || !$tabList || !$tabListItems) {
     return
@@ -124,7 +124,7 @@ Tabs.prototype.setup = function () {
   })
 
   // Show either the active tab according to the URL's hash or the first tab
-  var $activeTab = this.getTab(window.location.hash) || this.$tabs[0]
+  const $activeTab = this.getTab(window.location.hash) || this.$tabs[0]
   if (!$activeTab) {
     return
   }
@@ -141,11 +141,11 @@ Tabs.prototype.setup = function () {
  * @deprecated Will be made private in v5.0
  */
 Tabs.prototype.teardown = function () {
-  var $component = this
-  var $module = this.$module
-  var $tabs = this.$tabs
-  var $tabList = $module.querySelector('.govuk-tabs__list')
-  var $tabListItems = $module.querySelectorAll('a.govuk-tabs__list-item')
+  const $component = this
+  const $module = this.$module
+  const $tabs = this.$tabs
+  const $tabList = $module.querySelector('.govuk-tabs__list')
+  const $tabListItems = $module.querySelectorAll('a.govuk-tabs__list-item')
 
   if (!$tabs || !$tabList || !$tabListItems) {
     return
@@ -177,8 +177,8 @@ Tabs.prototype.teardown = function () {
  * @returns {void | undefined} Returns void, or undefined when prevented
  */
 Tabs.prototype.onHashChange = function () {
-  var hash = window.location.hash
-  var $tabWithHash = this.getTab(hash)
+  const hash = window.location.hash
+  const $tabWithHash = this.getTab(hash)
   if (!$tabWithHash) {
     return
   }
@@ -190,7 +190,7 @@ Tabs.prototype.onHashChange = function () {
   }
 
   // Show either the active tab according to the URL's hash or the first tab
-  var $previousTab = this.getCurrentTab()
+  const $previousTab = this.getCurrentTab()
   if (!$previousTab) {
     return
   }
@@ -241,7 +241,7 @@ Tabs.prototype.getTab = function (hash) {
  */
 Tabs.prototype.setAttributes = function ($tab) {
   // set tab attributes
-  var panelId = this.getHref($tab).slice(1)
+  const panelId = this.getHref($tab).slice(1)
   $tab.setAttribute('id', 'tab_' + panelId)
   $tab.setAttribute('role', 'tab')
   $tab.setAttribute('aria-controls', panelId)
@@ -249,7 +249,7 @@ Tabs.prototype.setAttributes = function ($tab) {
   $tab.setAttribute('tabindex', '-1')
 
   // set panel attributes
-  var $panel = this.getPanel($tab)
+  const $panel = this.getPanel($tab)
   if (!$panel) {
     return
   }
@@ -274,7 +274,7 @@ Tabs.prototype.unsetAttributes = function ($tab) {
   $tab.removeAttribute('tabindex')
 
   // unset panel attributes
-  var $panel = this.getPanel($tab)
+  const $panel = this.getPanel($tab)
   if (!$panel) {
     return
   }
@@ -292,8 +292,8 @@ Tabs.prototype.unsetAttributes = function ($tab) {
  * @returns {void} Returns void
  */
 Tabs.prototype.onTabClick = function (event) {
-  var $currentTab = this.getCurrentTab()
-  var $nextTab = event.currentTarget
+  const $currentTab = this.getCurrentTab()
+  const $nextTab = event.currentTarget
 
   if (!$currentTab || !($nextTab instanceof HTMLAnchorElement)) {
     return
@@ -316,14 +316,14 @@ Tabs.prototype.onTabClick = function (event) {
  * @param {HTMLAnchorElement} $tab - Tab link
  */
 Tabs.prototype.createHistoryEntry = function ($tab) {
-  var $panel = this.getPanel($tab)
+  const $panel = this.getPanel($tab)
   if (!$panel) {
     return
   }
 
   // Save and restore the id
   // so the page doesn't jump when a user clicks a tab (which changes the hash)
-  var panelId = $panel.id
+  const panelId = $panel.id
   $panel.id = ''
   this.changingHash = true
   window.location.hash = this.getHref($tab).slice(1)
@@ -360,18 +360,18 @@ Tabs.prototype.onTabKeydown = function (event) {
  * @deprecated Will be made private in v5.0
  */
 Tabs.prototype.activateNextTab = function () {
-  var $currentTab = this.getCurrentTab()
+  const $currentTab = this.getCurrentTab()
   if (!$currentTab || !$currentTab.parentElement) {
     return
   }
 
-  var $nextTabListItem = $currentTab.parentElement.nextElementSibling
+  const $nextTabListItem = $currentTab.parentElement.nextElementSibling
   if (!$nextTabListItem) {
     return
   }
 
   /** @satisfies {HTMLAnchorElement} */
-  var $nextTab = $nextTabListItem.querySelector('a.govuk-tabs__tab')
+  const $nextTab = $nextTabListItem.querySelector('a.govuk-tabs__tab')
   if (!$nextTab) {
     return
   }
@@ -388,18 +388,18 @@ Tabs.prototype.activateNextTab = function () {
  * @deprecated Will be made private in v5.0
  */
 Tabs.prototype.activatePreviousTab = function () {
-  var $currentTab = this.getCurrentTab()
+  const $currentTab = this.getCurrentTab()
   if (!$currentTab || !$currentTab.parentElement) {
     return
   }
 
-  var $previousTabListItem = $currentTab.parentElement.previousElementSibling
+  const $previousTabListItem = $currentTab.parentElement.previousElementSibling
   if (!$previousTabListItem) {
     return
   }
 
   /** @satisfies {HTMLAnchorElement} */
-  var $previousTab = $previousTabListItem.querySelector('a.govuk-tabs__tab')
+  const $previousTab = $previousTabListItem.querySelector('a.govuk-tabs__tab')
   if (!$previousTab) {
     return
   }
@@ -428,7 +428,7 @@ Tabs.prototype.getPanel = function ($tab) {
  * @param {HTMLAnchorElement} $tab - Tab link
  */
 Tabs.prototype.showPanel = function ($tab) {
-  var $panel = this.getPanel($tab)
+  const $panel = this.getPanel($tab)
   if (!$panel) {
     return
   }
@@ -443,7 +443,7 @@ Tabs.prototype.showPanel = function ($tab) {
  * @param {HTMLAnchorElement} $tab - Tab link
  */
 Tabs.prototype.hidePanel = function ($tab) {
-  var $panel = this.getPanel($tab)
+  const $panel = this.getPanel($tab)
   if (!$panel) {
     return
   }
@@ -505,8 +505,8 @@ Tabs.prototype.getCurrentTab = function () {
  * @returns {string} Hash fragment including #
  */
 Tabs.prototype.getHref = function ($tab) {
-  var href = $tab.getAttribute('href')
-  var hash = href.slice(href.indexOf('#'), href.length)
+  const href = $tab.getAttribute('href')
+  const hash = href.slice(href.indexOf('#'), href.length)
   return hash
 }
 
diff --git a/packages/govuk-frontend/src/govuk/i18n.mjs b/packages/govuk-frontend/src/govuk/i18n.mjs
index f132b3777c..1a3d8a323a 100644
--- a/packages/govuk-frontend/src/govuk/i18n.mjs
+++ b/packages/govuk-frontend/src/govuk/i18n.mjs
@@ -41,7 +41,7 @@ I18n.prototype.t = function (lookupKey, options) {
   }
 
   // Fetch the translation string for that lookup key
-  var translationString = this.translations[lookupKey]
+  const translationString = this.translations[lookupKey]
 
   if (typeof translationString === 'string') {
     // Check for ${} placeholders in the translation string
@@ -71,7 +71,7 @@ I18n.prototype.t = function (lookupKey, options) {
  */
 I18n.prototype.replacePlaceholders = function (translationString, options) {
   /** @type {Intl.NumberFormat | undefined} */
-  var formatter
+  let formatter
 
   if (this.hasIntlNumberFormatSupport()) {
     formatter = new Intl.NumberFormat(this.locale)
@@ -89,7 +89,7 @@ I18n.prototype.replacePlaceholders = function (translationString, options) {
      */
     function (placeholderWithBraces, placeholderKey) {
       if (Object.prototype.hasOwnProperty.call(options, placeholderKey)) {
-        var placeholderValue = options[placeholderKey]
+        const placeholderValue = options[placeholderKey]
 
         // If a user has passed `false` as the value for the placeholder
         // treat it as though the value should not be displayed
@@ -163,7 +163,7 @@ I18n.prototype.getPluralSuffix = function (lookupKey, count) {
   count = Number(count)
   if (!isFinite(count)) { return 'other' }
 
-  var preferredForm
+  let preferredForm
 
   // Check to verify that all the requirements for Intl.PluralRules are met.
   // If so, we can use that instead of our custom implementation. Otherwise,
@@ -208,7 +208,7 @@ I18n.prototype.selectPluralFormUsingFallbackRules = function (count) {
   // make sure our number is one of those.
   count = Math.abs(Math.floor(count))
 
-  var ruleset = this.getPluralRulesForLocale()
+  const ruleset = this.getPluralRulesForLocale()
 
   if (ruleset) {
     return I18n.pluralRules[ruleset](count)
@@ -229,15 +229,15 @@ I18n.prototype.selectPluralFormUsingFallbackRules = function (count) {
  *   of the functions in this.pluralRules)
  */
 I18n.prototype.getPluralRulesForLocale = function () {
-  var locale = this.locale
-  var localeShort = locale.split('-')[0]
+  const locale = this.locale
+  const localeShort = locale.split('-')[0]
 
   // Look through the plural rules map to find which `pluralRule` is
   // appropriate for our current `locale`.
-  for (var pluralRule in I18n.pluralRulesMap) {
+  for (const pluralRule in I18n.pluralRulesMap) {
     if (Object.prototype.hasOwnProperty.call(I18n.pluralRulesMap, pluralRule)) {
-      var languages = I18n.pluralRulesMap[pluralRule]
-      for (var i = 0; i < languages.length; i++) {
+      const languages = I18n.pluralRulesMap[pluralRule]
+      for (let i = 0; i < languages.length; i++) {
         if (languages[i] === locale || languages[i] === localeShort) {
           return pluralRule
         }
@@ -333,8 +333,8 @@ I18n.pluralRules = {
     return 'other'
   },
   russian: function (n) {
-    var lastTwo = n % 100
-    var last = lastTwo % 10
+    const lastTwo = n % 100
+    const last = lastTwo % 10
     if (last === 1 && lastTwo !== 11) { return 'one' }
     if (last >= 2 && last <= 4 && !(lastTwo >= 12 && lastTwo <= 14)) { return 'few' }
     if (last === 0 || (last >= 5 && last <= 9) || (lastTwo >= 11 && lastTwo <= 14)) { return 'many' }
diff --git a/packages/govuk-frontend/tasks/build/package.test.mjs b/packages/govuk-frontend/tasks/build/package.test.mjs
index a39f952792..d61c5541fd 100644
--- a/packages/govuk-frontend/tasks/build/package.test.mjs
+++ b/packages/govuk-frontend/tasks/build/package.test.mjs
@@ -123,7 +123,7 @@ describe('packages/govuk-frontend/dist/', () => {
       const contents = await readFile(join(paths.package, 'dist/govuk/all.js'), 'utf8')
 
       // Look for CommonJS `version` named export
-      expect(contents).toContain(`var version = '${pkg.version}';`)
+      expect(contents).toContain(`const version = '${pkg.version}';`)
       expect(contents).toContain('exports.version = version;')
     })
   })

From 0093a2533b48361238a6844ec6729893f144cd3f Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Thu, 8 Jun 2023 11:13:01 +0100
Subject: [PATCH 4/9] Add ESLint rules to auto fix concatenated strings

Including implicit `.toString()` for booleans and numbers within template strings
---
 .eslintrc.js                         | 6 +++++-
 packages/govuk-frontend/.eslintrc.js | 9 +++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 0dc96f8f86..fd80fc6d8f 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -75,7 +75,11 @@ module.exports = {
         // Ignore `govuk-frontend` exports as they require auto-generated files
         'import/no-unresolved': ['error', { ignore: ['govuk-frontend'] }],
         'n/no-missing-import': ['error', { allowModules: ['govuk-frontend'] }],
-        'n/no-missing-require': ['error', { allowModules: ['govuk-frontend'] }]
+        'n/no-missing-require': ['error', { allowModules: ['govuk-frontend'] }],
+
+        // Automatically use template strings
+        'no-useless-concat': 'error',
+        'prefer-template': 'error'
       },
       settings: {
         jsdoc: {
diff --git a/packages/govuk-frontend/.eslintrc.js b/packages/govuk-frontend/.eslintrc.js
index 850f276b9b..131d621115 100644
--- a/packages/govuk-frontend/.eslintrc.js
+++ b/packages/govuk-frontend/.eslintrc.js
@@ -35,6 +35,15 @@ module.exports = {
         // Allow `this` alias until arrow functions supported
         '@typescript-eslint/no-this-alias': 'off',
 
+        // Check type support for template string implicit `.toString()`
+        '@typescript-eslint/restrict-template-expressions': [
+          'error',
+          {
+            allowBoolean: true,
+            allowNumber: true
+          }
+        ],
+
         // JSDoc blocks are mandatory
         'jsdoc/require-jsdoc': [
           'error', {

From 0305cf6b42fae8e46ab4e180028308e290980bcf Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Thu, 8 Jun 2023 10:37:20 +0100
Subject: [PATCH 5/9] Run `eslint --fix`

---
 .../passport-details/index.mjs                |  6 ++--
 .../govuk/common/closest-attribute-value.mjs  |  2 +-
 .../govuk-frontend/src/govuk/common/index.mjs |  2 +-
 .../common/normalise-dataset.unit.test.mjs    |  2 +-
 .../govuk/components/accordion/accordion.mjs  | 34 +++++++++----------
 .../components/accordion/accordion.test.js    |  6 ++--
 .../character-count/character-count.mjs       |  6 ++--
 .../components/checkboxes/checkboxes.mjs      |  4 +--
 .../components/checkboxes/template.test.js    |  6 ++--
 .../components/date-input/template.test.js    |  2 +-
 .../src/govuk/components/details/details.mjs  |  2 +-
 .../error-summary/error-summary.mjs           |  2 +-
 .../components/file-upload/template.test.js   |  4 +--
 .../src/govuk/components/header/header.mjs    |  2 +-
 .../govuk/components/input/template.test.js   |  6 ++--
 .../govuk/components/radios/template.test.js  |  4 +--
 .../src/govuk/components/tabs/tabs.mjs        |  4 +--
 .../components/textarea/template.test.js      |  6 ++--
 packages/govuk-frontend/src/govuk/i18n.mjs    | 16 ++++-----
 .../govuk-frontend/src/govuk/template.test.js |  2 +-
 .../tasks/build/release.test.mjs              |  2 +-
 shared/tasks/files.mjs                        |  2 +-
 22 files changed, 61 insertions(+), 61 deletions(-)

diff --git a/packages/govuk-frontend-review/src/views/full-page-examples/passport-details/index.mjs b/packages/govuk-frontend-review/src/views/full-page-examples/passport-details/index.mjs
index f03aa3d24a..6197afcae4 100644
--- a/packages/govuk-frontend-review/src/views/full-page-examples/passport-details/index.mjs
+++ b/packages/govuk-frontend-review/src/views/full-page-examples/passport-details/index.mjs
@@ -37,13 +37,13 @@ export default (app) => {
 
       // If any of the date inputs error apply a general error.
       const expiryNamePrefix = 'expiry'
-      const expiryErrors = Object.values(errors).filter(error => error.id.includes(expiryNamePrefix + '-'))
+      const expiryErrors = Object.values(errors).filter(error => error.id.includes(`${expiryNamePrefix}-`))
       if (expiryErrors.length) {
         const firstExpiryErrorId = expiryErrors[0].id
         // Get the first error message and merge it into a single error message.
         errors[expiryNamePrefix] = {
           id: expiryNamePrefix,
-          href: '#' + firstExpiryErrorId,
+          href: `#${firstExpiryErrorId}`,
           value: '',
           text: ''
         }
@@ -60,7 +60,7 @@ export default (app) => {
       let errorSummary = Object.values(errors)
       if (expiryErrors) {
         // Remove all other errors from the summary so we only have one message that links to the expiry input.
-        errorSummary = errorSummary.filter(error => !error.id.includes(expiryNamePrefix + '-'))
+        errorSummary = errorSummary.filter(error => !error.id.includes(`${expiryNamePrefix}-`))
       }
 
       response.render('./full-page-examples/passport-details/index', {
diff --git a/packages/govuk-frontend/src/govuk/common/closest-attribute-value.mjs b/packages/govuk-frontend/src/govuk/common/closest-attribute-value.mjs
index fccd7b7873..c1a786b00a 100644
--- a/packages/govuk-frontend/src/govuk/common/closest-attribute-value.mjs
+++ b/packages/govuk-frontend/src/govuk/common/closest-attribute-value.mjs
@@ -7,7 +7,7 @@
  * @returns {string | null} Attribute value
  */
 export function closestAttributeValue ($element, attributeName) {
-  const $closestElementWithAttribute = $element.closest('[' + attributeName + ']')
+  const $closestElementWithAttribute = $element.closest(`[${attributeName}]`)
   return $closestElementWithAttribute
     ? $closestElementWithAttribute.getAttribute(attributeName)
     : null
diff --git a/packages/govuk-frontend/src/govuk/common/index.mjs b/packages/govuk-frontend/src/govuk/common/index.mjs
index e2678d06b5..2e017674e3 100644
--- a/packages/govuk-frontend/src/govuk/common/index.mjs
+++ b/packages/govuk-frontend/src/govuk/common/index.mjs
@@ -70,7 +70,7 @@ export function mergeConfigs (/* configObject1, configObject2, ...configObjects
           continue
         }
         const value = obj[key]
-        const prefixedKey = prefix ? prefix + '.' + key : key
+        const prefixedKey = prefix ? `${prefix}.${key}` : key
         if (typeof value === 'object') {
           // If the value is a nested object, recurse over that too
           flattenLoop(value, prefixedKey)
diff --git a/packages/govuk-frontend/src/govuk/common/normalise-dataset.unit.test.mjs b/packages/govuk-frontend/src/govuk/common/normalise-dataset.unit.test.mjs
index 864257fe5d..3d56e2ff4a 100644
--- a/packages/govuk-frontend/src/govuk/common/normalise-dataset.unit.test.mjs
+++ b/packages/govuk-frontend/src/govuk/common/normalise-dataset.unit.test.mjs
@@ -77,7 +77,7 @@ describe('normaliseString', () => {
 
   it('normalises strings that represent very big positive numbers to numbers', () => {
     const biggestNumber = Number.MAX_SAFE_INTEGER + 1
-    expect(normaliseString(biggestNumber.toString())).toEqual(biggestNumber)
+    expect(normaliseString(`${biggestNumber}`)).toEqual(biggestNumber)
   })
 
   it('does not normalise strings that contain numbers', () => {
diff --git a/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs b/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs
index cb0d7085d0..77bd25cba9 100644
--- a/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs
+++ b/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs
@@ -119,7 +119,7 @@ function Accordion ($module, config) {
   /** @deprecated Will be made private in v5.0 */
   this.sectionContentClass = 'govuk-accordion__section-content'
 
-  const $sections = this.$module.querySelectorAll('.' + this.sectionClass)
+  const $sections = this.$module.querySelectorAll(`.${this.sectionClass}`)
   if (!$sections.length) {
     return this
   }
@@ -205,7 +205,7 @@ Accordion.prototype.initSectionHeaders = function () {
 
   // Loop through sections
   $sections.forEach(function ($section, i) {
-    const $header = $section.querySelector('.' + $component.sectionHeaderClass)
+    const $header = $section.querySelector(`.${$component.sectionHeaderClass}`)
     if (!$header) {
       return
     }
@@ -231,9 +231,9 @@ Accordion.prototype.initSectionHeaders = function () {
  * @param {number} index - Section index
  */
 Accordion.prototype.constructHeaderMarkup = function ($header, index) {
-  const $span = $header.querySelector('.' + this.sectionButtonClass)
-  const $heading = $header.querySelector('.' + this.sectionHeadingClass)
-  const $summary = $header.querySelector('.' + this.sectionSummaryClass)
+  const $span = $header.querySelector(`.${this.sectionButtonClass}`)
+  const $heading = $header.querySelector(`.${this.sectionHeadingClass}`)
+  const $summary = $header.querySelector(`.${this.sectionSummaryClass}`)
 
   if (!$span || !$heading) {
     return
@@ -242,7 +242,7 @@ Accordion.prototype.constructHeaderMarkup = function ($header, index) {
   // Create a button element that will replace the '.govuk-accordion__section-button' span
   const $button = document.createElement('button')
   $button.setAttribute('type', 'button')
-  $button.setAttribute('aria-controls', this.$module.id + '-content-' + (index + 1).toString())
+  $button.setAttribute('aria-controls', `${this.$module.id}-content-${index + 1}`)
 
   // Copy all attributes (https://developer.mozilla.org/en-US/docs/Web/API/Element/attributes) from $span to $button
   for (let i = 0; i < $span.attributes.length; i++) {
@@ -345,7 +345,7 @@ Accordion.prototype.onBeforeMatch = function (event) {
   }
 
   // Handle when fragment is inside section
-  const $section = $fragment.closest('.' + this.sectionClass)
+  const $section = $fragment.closest(`.${this.sectionClass}`)
   if ($section) {
     this.setExpanded(true, $section)
   }
@@ -394,10 +394,10 @@ Accordion.prototype.onShowOrHideAllToggle = function () {
  * @param {Element} $section - Section element
  */
 Accordion.prototype.setExpanded = function (expanded, $section) {
-  const $showHideIcon = $section.querySelector('.' + this.upChevronIconClass)
-  const $showHideText = $section.querySelector('.' + this.sectionShowHideTextClass)
-  const $button = $section.querySelector('.' + this.sectionButtonClass)
-  const $content = $section.querySelector('.' + this.sectionContentClass)
+  const $showHideIcon = $section.querySelector(`.${this.upChevronIconClass}`)
+  const $showHideText = $section.querySelector(`.${this.sectionShowHideTextClass}`)
+  const $button = $section.querySelector(`.${this.sectionButtonClass}`)
+  const $content = $section.querySelector(`.${this.sectionContentClass}`)
 
   if (!$showHideIcon ||
     !($showHideText instanceof HTMLElement) ||
@@ -411,17 +411,17 @@ Accordion.prototype.setExpanded = function (expanded, $section) {
     : this.i18n.t('showSection')
 
   $showHideText.innerText = newButtonText
-  $button.setAttribute('aria-expanded', expanded.toString())
+  $button.setAttribute('aria-expanded', `${expanded}`)
 
   // Update aria-label combining
   const ariaLabelParts = []
 
-  const $headingText = $section.querySelector('.' + this.sectionHeadingTextClass)
+  const $headingText = $section.querySelector(`.${this.sectionHeadingTextClass}`)
   if ($headingText instanceof HTMLElement) {
     ariaLabelParts.push($headingText.innerText.trim())
   }
 
-  const $summary = $section.querySelector('.' + this.sectionSummaryClass)
+  const $summary = $section.querySelector(`.${this.sectionSummaryClass}`)
   if ($summary instanceof HTMLElement) {
     ariaLabelParts.push($summary.innerText.trim())
   }
@@ -475,7 +475,7 @@ Accordion.prototype.checkIfAllSectionsOpen = function () {
   // Get a count of all the Accordion sections
   const sectionsCount = this.$sections.length
   // Get a count of all Accordion sections that are expanded
-  const expandedSectionCount = this.$module.querySelectorAll('.' + this.sectionExpandedClass).length
+  const expandedSectionCount = this.$module.querySelectorAll(`.${this.sectionExpandedClass}`).length
   const areAllSectionsOpen = sectionsCount === expandedSectionCount
 
   return areAllSectionsOpen
@@ -534,7 +534,7 @@ Accordion.prototype.storeState = function ($section) {
     // We need a unique way of identifying each content in the Accordion. Since
     // an `#id` should be unique and an `id` is required for `aria-` attributes
     // `id` can be safely used.
-    const $button = $section.querySelector('.' + this.sectionButtonClass)
+    const $button = $section.querySelector(`.${this.sectionButtonClass}`)
 
     if ($button) {
       const contentId = $button.getAttribute('aria-controls')
@@ -556,7 +556,7 @@ Accordion.prototype.storeState = function ($section) {
  */
 Accordion.prototype.setInitialState = function ($section) {
   if (this.browserSupportsSessionStorage && this.config.rememberExpanded) {
-    const $button = $section.querySelector('.' + this.sectionButtonClass)
+    const $button = $section.querySelector(`.${this.sectionButtonClass}`)
 
     if ($button) {
       const contentId = $button.getAttribute('aria-controls')
diff --git a/packages/govuk-frontend/src/govuk/components/accordion/accordion.test.js b/packages/govuk-frontend/src/govuk/components/accordion/accordion.test.js
index 47028de77b..573096800b 100644
--- a/packages/govuk-frontend/src/govuk/components/accordion/accordion.test.js
+++ b/packages/govuk-frontend/src/govuk/components/accordion/accordion.test.js
@@ -18,7 +18,7 @@ describe('/components/accordion', () => {
         const numberOfExampleSections = 2
 
         for (let i = 0; i < numberOfExampleSections; i++) {
-          const isContentVisible = await page.waitForSelector('.govuk-accordion .govuk-accordion__section:nth-of-type(' + (i + 1) + ') .govuk-accordion__section-content',
+          const isContentVisible = await page.waitForSelector(`.govuk-accordion .govuk-accordion__section:nth-of-type(${i + 1}) .govuk-accordion__section-content`,
             { visible: true, timeout: 1000 }
           )
           expect(isContentVisible).toBeTruthy()
@@ -46,7 +46,7 @@ describe('/components/accordion', () => {
 
         for (let i = 0; i < numberOfExampleSections; i++) {
           const sectionHeaderButtonExpanded = await page.evaluate(function (i) {
-            return document.body.querySelector('.govuk-accordion .govuk-accordion__section:nth-of-type(' + (2 + i) + ') .govuk-accordion__section-button').getAttribute('aria-expanded')
+            return document.body.querySelector(`.govuk-accordion .govuk-accordion__section:nth-of-type(${2 + i}) .govuk-accordion__section-button`).getAttribute('aria-expanded')
           }, i)
 
           expect(sectionHeaderButtonExpanded).toEqual('false')
@@ -88,7 +88,7 @@ describe('/components/accordion', () => {
 
         for (let i = 0; i < numberOfExampleSections; i++) {
           const sectionHeaderButtonExpanded = await page.evaluate(function (i) {
-            return document.body.querySelector('.govuk-accordion .govuk-accordion__section:nth-of-type(' + (2 + i) + ') .govuk-accordion__section-button').getAttribute('aria-expanded')
+            return document.body.querySelector(`.govuk-accordion .govuk-accordion__section:nth-of-type(${2 + i}) .govuk-accordion__section-button`).getAttribute('aria-expanded')
           }, i)
 
           expect(sectionHeaderButtonExpanded).toEqual('true')
diff --git a/packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs b/packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs
index 99d6e3d7e6..186f0a3466 100644
--- a/packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs
+++ b/packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs
@@ -150,7 +150,7 @@ CharacterCount.prototype.init = function () {
   }
 
   const $textarea = this.$textarea
-  const $textareaDescription = document.getElementById($textarea.id + '-info')
+  const $textareaDescription = document.getElementById(`${$textarea.id}-info`)
   if (!$textareaDescription) {
     return
   }
@@ -387,12 +387,12 @@ CharacterCount.prototype.getCountMessage = function () {
  */
 CharacterCount.prototype.formatCountMessage = function (remainingNumber, countType) {
   if (remainingNumber === 0) {
-    return this.i18n.t(countType + 'AtLimit')
+    return this.i18n.t(`${countType}AtLimit`)
   }
 
   const translationKeySuffix = remainingNumber < 0 ? 'OverLimit' : 'UnderLimit'
 
-  return this.i18n.t(countType + translationKeySuffix, { count: Math.abs(remainingNumber) })
+  return this.i18n.t(`${countType}${translationKeySuffix}`, { count: Math.abs(remainingNumber) })
 }
 
 /**
diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs b/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs
index 6419f88ba8..a8ea4778d4 100644
--- a/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs
+++ b/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs
@@ -121,7 +121,7 @@ Checkboxes.prototype.unCheckAllInputsExcept = function ($input) {
 
   /** @satisfies {NodeListOf<HTMLInputElement>} */
   const allInputsWithSameName = document.querySelectorAll(
-    'input[type="checkbox"][name="' + $input.name + '"]'
+    `input[type="checkbox"][name="${$input.name}"]`
   )
 
   allInputsWithSameName.forEach(function ($inputWithSameName) {
@@ -148,7 +148,7 @@ Checkboxes.prototype.unCheckExclusiveInputs = function ($input) {
 
   /** @satisfies {NodeListOf<HTMLInputElement>} */
   const allInputsWithSameNameAndExclusiveBehaviour = document.querySelectorAll(
-    'input[data-behaviour="exclusive"][type="checkbox"][name="' + $input.name + '"]'
+    `input[data-behaviour="exclusive"][type="checkbox"][name="${$input.name}"]`
   )
 
   allInputsWithSameNameAndExclusiveBehaviour.forEach(function ($exclusiveInput) {
diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/template.test.js b/packages/govuk-frontend/src/govuk/components/checkboxes/template.test.js
index 15717905f3..05b4df1a7e 100644
--- a/packages/govuk-frontend/src/govuk/components/checkboxes/template.test.js
+++ b/packages/govuk-frontend/src/govuk/components/checkboxes/template.test.js
@@ -332,7 +332,7 @@ describe('Checkboxes', () => {
       const $errorMessage = $('.govuk-error-message')
 
       const errorMessageId = new RegExp(
-        WORD_BOUNDARY + 'some-id' + WHITESPACE + $errorMessage.attr('id') + WORD_BOUNDARY
+        `${WORD_BOUNDARY}some-id${WHITESPACE}${$errorMessage.attr('id')}${WORD_BOUNDARY}`
       )
 
       expect($fieldset.attr('aria-describedby'))
@@ -387,7 +387,7 @@ describe('Checkboxes', () => {
       const $hint = $('.govuk-hint')
 
       const hintId = new RegExp(
-        WORD_BOUNDARY + 'some-id' + WHITESPACE + $hint.attr('id') + WORD_BOUNDARY
+        `${WORD_BOUNDARY}some-id${WHITESPACE}${$hint.attr('id')}${WORD_BOUNDARY}`
       )
 
       expect($fieldset.attr('aria-describedby')).toMatch(hintId)
@@ -418,7 +418,7 @@ describe('Checkboxes', () => {
       const hintId = $('.govuk-hint').attr('id')
 
       const combinedIds = new RegExp(
-        WORD_BOUNDARY + 'some-id' + WHITESPACE + hintId + WHITESPACE + errorMessageId + WORD_BOUNDARY
+        `${WORD_BOUNDARY}some-id${WHITESPACE}${hintId}${WHITESPACE}${errorMessageId}${WORD_BOUNDARY}`
       )
 
       expect($fieldset.attr('aria-describedby'))
diff --git a/packages/govuk-frontend/src/govuk/components/date-input/template.test.js b/packages/govuk-frontend/src/govuk/components/date-input/template.test.js
index edb441c91d..92546b885d 100644
--- a/packages/govuk-frontend/src/govuk/components/date-input/template.test.js
+++ b/packages/govuk-frontend/src/govuk/components/date-input/template.test.js
@@ -200,7 +200,7 @@ describe('Date input', () => {
       const $hint = $('.govuk-hint')
 
       const hintId = new RegExp(
-        WORD_BOUNDARY + 'some-id' + WHITESPACE + $hint.attr('id') + WORD_BOUNDARY
+        `${WORD_BOUNDARY}some-id${WHITESPACE}${$hint.attr('id')}${WORD_BOUNDARY}`
       )
 
       expect($fieldset.attr('aria-describedby'))
diff --git a/packages/govuk-frontend/src/govuk/components/details/details.mjs b/packages/govuk-frontend/src/govuk/components/details/details.mjs
index 52469e93f8..0897bd1b4e 100644
--- a/packages/govuk-frontend/src/govuk/components/details/details.mjs
+++ b/packages/govuk-frontend/src/govuk/components/details/details.mjs
@@ -69,7 +69,7 @@ Details.prototype.polyfillDetails = function () {
   // If the content doesn't have an ID, assign it one now
   // which we'll need for the summary's aria-controls assignment
   if (!$content.id) {
-    $content.id = 'details-content-' + generateUniqueID()
+    $content.id = `details-content-${generateUniqueID()}`
   }
 
   // Add ARIA role="group" to details
diff --git a/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs b/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs
index 6be42569a2..0194241ca0 100644
--- a/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs
+++ b/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs
@@ -213,7 +213,7 @@ ErrorSummary.prototype.getAssociatedLegendOrLabel = function ($input) {
     }
   }
 
-  return document.querySelector("label[for='" + $input.getAttribute('id') + "']") ||
+  return document.querySelector(`label[for='${$input.getAttribute('id')}']`) ||
     $input.closest('label')
 }
 
diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/template.test.js b/packages/govuk-frontend/src/govuk/components/file-upload/template.test.js
index f592abe368..72ed260303 100644
--- a/packages/govuk-frontend/src/govuk/components/file-upload/template.test.js
+++ b/packages/govuk-frontend/src/govuk/components/file-upload/template.test.js
@@ -100,7 +100,7 @@ describe('File upload', () => {
       const $hint = $('.govuk-hint')
 
       const hintId = new RegExp(
-        WORD_BOUNDARY + 'some-id' + WHITESPACE + $hint.attr('id') + WORD_BOUNDARY
+        `${WORD_BOUNDARY}some-id${WHITESPACE}${$hint.attr('id')}${WORD_BOUNDARY}`
       )
 
       expect($component.attr('aria-describedby'))
@@ -136,7 +136,7 @@ describe('File upload', () => {
       const $errorMessage = $('.govuk-error-message')
 
       const errorMessageId = new RegExp(
-        WORD_BOUNDARY + 'some-id' + WHITESPACE + $errorMessage.attr('id') + WORD_BOUNDARY
+        `${WORD_BOUNDARY}some-id${WHITESPACE}${$errorMessage.attr('id')}${WORD_BOUNDARY}`
       )
 
       expect($component.attr('aria-describedby'))
diff --git a/packages/govuk-frontend/src/govuk/components/header/header.mjs b/packages/govuk-frontend/src/govuk/components/header/header.mjs
index a34e06d65f..b9f2e80adf 100644
--- a/packages/govuk-frontend/src/govuk/components/header/header.mjs
+++ b/packages/govuk-frontend/src/govuk/components/header/header.mjs
@@ -17,7 +17,7 @@ function Header ($module) {
 
   /** @deprecated Will be made private in v5.0 */
   this.$menu = this.$menuButton && $module.querySelector(
-    '#' + this.$menuButton.getAttribute('aria-controls')
+    `#${this.$menuButton.getAttribute('aria-controls')}`
   )
 
   /**
diff --git a/packages/govuk-frontend/src/govuk/components/input/template.test.js b/packages/govuk-frontend/src/govuk/components/input/template.test.js
index 399ea3d411..6396cd4e32 100644
--- a/packages/govuk-frontend/src/govuk/components/input/template.test.js
+++ b/packages/govuk-frontend/src/govuk/components/input/template.test.js
@@ -128,7 +128,7 @@ describe('Input', () => {
       const $hint = $('.govuk-hint')
 
       const hintId = new RegExp(
-        WORD_BOUNDARY + 'some-id' + WHITESPACE + $hint.attr('id') + WORD_BOUNDARY
+        `${WORD_BOUNDARY}some-id${WHITESPACE}${$hint.attr('id')}${WORD_BOUNDARY}`
       )
 
       expect($input.attr('aria-describedby'))
@@ -164,7 +164,7 @@ describe('Input', () => {
       const $errorMessage = $('.govuk-error-message')
 
       const errorMessageId = new RegExp(
-        WORD_BOUNDARY + 'some-id' + WHITESPACE + $errorMessage.attr('id') + WORD_BOUNDARY
+        `${WORD_BOUNDARY}some-id${WHITESPACE}${$errorMessage.attr('id')}${WORD_BOUNDARY}`
       )
 
       expect($input.attr('aria-describedby'))
@@ -233,7 +233,7 @@ describe('Input', () => {
       const hintId = $('.govuk-hint').attr('id')
 
       const combinedIds = new RegExp(
-        WORD_BOUNDARY + 'some-id' + WHITESPACE + hintId + WHITESPACE + errorMessageId + WORD_BOUNDARY
+        `${WORD_BOUNDARY}some-id${WHITESPACE}${hintId}${WHITESPACE}${errorMessageId}${WORD_BOUNDARY}`
       )
 
       expect($component.attr('aria-describedby'))
diff --git a/packages/govuk-frontend/src/govuk/components/radios/template.test.js b/packages/govuk-frontend/src/govuk/components/radios/template.test.js
index 3f1919b6e5..a9f019c388 100644
--- a/packages/govuk-frontend/src/govuk/components/radios/template.test.js
+++ b/packages/govuk-frontend/src/govuk/components/radios/template.test.js
@@ -319,7 +319,7 @@ describe('Radios', () => {
       const $errorMessage = $('.govuk-error-message')
 
       const errorMessageId = new RegExp(
-        WORD_BOUNDARY + 'some-id' + WHITESPACE + $errorMessage.attr('id') + WORD_BOUNDARY
+        `${WORD_BOUNDARY}some-id${WHITESPACE}${$errorMessage.attr('id')}${WORD_BOUNDARY}`
       )
 
       expect($fieldset.attr('aria-describedby'))
@@ -358,7 +358,7 @@ describe('Radios', () => {
       const hintId = $('.govuk-hint').attr('id')
 
       const combinedIds = new RegExp(
-        WORD_BOUNDARY + 'some-id' + WHITESPACE + hintId + WHITESPACE + errorMessageId + WORD_BOUNDARY
+        `${WORD_BOUNDARY}some-id${WHITESPACE}${hintId}${WHITESPACE}${errorMessageId}${WORD_BOUNDARY}`
       )
 
       expect($fieldset.attr('aria-describedby'))
diff --git a/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs b/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs
index 79f6771f50..aeaceb9f20 100644
--- a/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs
+++ b/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs
@@ -230,7 +230,7 @@ Tabs.prototype.showTab = function ($tab) {
  * @returns {HTMLAnchorElement | null} Tab link
  */
 Tabs.prototype.getTab = function (hash) {
-  return this.$module.querySelector('a.govuk-tabs__tab[href="' + hash + '"]')
+  return this.$module.querySelector(`a.govuk-tabs__tab[href="${hash}"]`)
 }
 
 /**
@@ -242,7 +242,7 @@ Tabs.prototype.getTab = function (hash) {
 Tabs.prototype.setAttributes = function ($tab) {
   // set tab attributes
   const panelId = this.getHref($tab).slice(1)
-  $tab.setAttribute('id', 'tab_' + panelId)
+  $tab.setAttribute('id', `tab_${panelId}`)
   $tab.setAttribute('role', 'tab')
   $tab.setAttribute('aria-controls', panelId)
   $tab.setAttribute('aria-selected', 'false')
diff --git a/packages/govuk-frontend/src/govuk/components/textarea/template.test.js b/packages/govuk-frontend/src/govuk/components/textarea/template.test.js
index cc48e1525d..890bf6bdf6 100644
--- a/packages/govuk-frontend/src/govuk/components/textarea/template.test.js
+++ b/packages/govuk-frontend/src/govuk/components/textarea/template.test.js
@@ -137,7 +137,7 @@ describe('Textarea', () => {
       const $hint = $('.govuk-hint')
 
       const hintId = new RegExp(
-        WORD_BOUNDARY + 'some-id' + WHITESPACE + $hint.attr('id') + WORD_BOUNDARY
+        `${WORD_BOUNDARY}some-id${WHITESPACE}${$hint.attr('id')}${WORD_BOUNDARY}`
       )
 
       expect($textarea.attr('aria-describedby'))
@@ -173,7 +173,7 @@ describe('Textarea', () => {
       const $errorMessage = $('.govuk-error-message')
 
       const errorMessageId = new RegExp(
-        WORD_BOUNDARY + 'some-id' + WHITESPACE + $errorMessage.attr('id') + WORD_BOUNDARY
+        `${WORD_BOUNDARY}some-id${WHITESPACE}${$errorMessage.attr('id')}${WORD_BOUNDARY}`
       )
 
       expect($component.attr('aria-describedby'))
@@ -219,7 +219,7 @@ describe('Textarea', () => {
       const hintId = $('.govuk-hint').attr('id')
 
       const combinedIds = new RegExp(
-        WORD_BOUNDARY + 'some-id' + WHITESPACE + hintId + WHITESPACE + errorMessageId + WORD_BOUNDARY
+        `${WORD_BOUNDARY}some-id${WHITESPACE}${hintId}${WHITESPACE}${errorMessageId}${WORD_BOUNDARY}`
       )
 
       expect($component.attr('aria-describedby'))
diff --git a/packages/govuk-frontend/src/govuk/i18n.mjs b/packages/govuk-frontend/src/govuk/i18n.mjs
index 1a3d8a323a..ecf31062a6 100644
--- a/packages/govuk-frontend/src/govuk/i18n.mjs
+++ b/packages/govuk-frontend/src/govuk/i18n.mjs
@@ -37,7 +37,7 @@ I18n.prototype.t = function (lookupKey, options) {
   // falsy, as this could legitimately be 0.
   if (options && typeof options.count === 'number') {
     // Get the plural suffix
-    lookupKey = lookupKey + '.' + this.getPluralSuffix(lookupKey, options.count)
+    lookupKey = `${lookupKey}.${this.getPluralSuffix(lookupKey, options.count)}`
   }
 
   // Fetch the translation string for that lookup key
@@ -102,12 +102,12 @@ I18n.prototype.replacePlaceholders = function (translationString, options) {
 
         // If the placeholder's value is a number, localise the number formatting
         if (typeof placeholderValue === 'number') {
-          return formatter ? formatter.format(placeholderValue) : placeholderValue.toString()
+          return formatter ? formatter.format(placeholderValue) : `${placeholderValue}`
         }
 
         return placeholderValue
       } else {
-        throw new Error('i18n: no data found to replace ' + placeholderWithBraces + ' placeholder in string')
+        throw new Error(`i18n: no data found to replace ${placeholderWithBraces} placeholder in string`)
       }
     })
 }
@@ -175,21 +175,21 @@ I18n.prototype.getPluralSuffix = function (lookupKey, count) {
   }
 
   // Use the correct plural form if provided
-  if (lookupKey + '.' + preferredForm in this.translations) {
+  if (`${lookupKey}.${preferredForm}` in this.translations) {
     return preferredForm
   // Fall back to `other` if the plural form is missing, but log a warning
   // to the console
-  } else if (lookupKey + '.other' in this.translations) {
+  } else if (`${lookupKey}.other` in this.translations) {
     if (console && 'warn' in console) {
-      console.warn('i18n: Missing plural form ".' + preferredForm + '" for "' +
-        this.locale + '" locale. Falling back to ".other".')
+      console.warn(`i18n: Missing plural form ".${preferredForm}" for "${
+        this.locale}" locale. Falling back to ".other".`)
     }
 
     return 'other'
   // If the required `other` plural form is missing, all we can do is error
   } else {
     throw new Error(
-      'i18n: Plural form ".other" is required for "' + this.locale + '" locale'
+      `i18n: Plural form ".other" is required for "${this.locale}" locale`
     )
   }
 }
diff --git a/packages/govuk-frontend/src/govuk/template.test.js b/packages/govuk-frontend/src/govuk/template.test.js
index 012628091d..149060da71 100644
--- a/packages/govuk-frontend/src/govuk/template.test.js
+++ b/packages/govuk-frontend/src/govuk/template.test.js
@@ -171,7 +171,7 @@ describe('Template', () => {
 
         // A change to the inline script would be a breaking change, and it would also require
         // updating the hash published in https://frontend.design-system.service.gov.uk/importing-css-assets-and-javascript/#if-your-javascript-isn-t-working-properly
-        expect('sha256-' + hash).toEqual('sha256-+6WnXIl4mbFTCARd8N3COQmT3bJJmo32N8q8ZSQAIcU=')
+        expect(`sha256-${hash}`).toEqual('sha256-+6WnXIl4mbFTCARd8N3COQmT3bJJmo32N8q8ZSQAIcU=')
       })
       it('should not have a nonce attribute by default', () => {
         const $ = renderTemplate()
diff --git a/packages/govuk-frontend/tasks/build/release.test.mjs b/packages/govuk-frontend/tasks/build/release.test.mjs
index 43284f0fc4..962f1f45c4 100644
--- a/packages/govuk-frontend/tasks/build/release.test.mjs
+++ b/packages/govuk-frontend/tasks/build/release.test.mjs
@@ -108,7 +108,7 @@ describe('dist/', () => {
     })
 
     it('should contain the correct version', () => {
-      expect(version).toEqual(pkg.version + EOL)
+      expect(version).toEqual(`${pkg.version}${EOL}`)
     })
   })
 })
diff --git a/shared/tasks/files.mjs b/shared/tasks/files.mjs
index 1e373cf1e6..4c75dcdb95 100644
--- a/shared/tasks/files.mjs
+++ b/shared/tasks/files.mjs
@@ -50,7 +50,7 @@ export async function write (assetPath, { destPath, filePath, fileContents }) {
   }
 
   await mkdir(dirname(assetDestPath), { recursive: true })
-  await writeFile(assetDestPath, await fileContents() + EOL)
+  await writeFile(assetDestPath, `${await fileContents()}${EOL}`)
 }
 
 /**

From a1e187a7b5b6e9fc57aa7a8ee0f48216a73a618d Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Thu, 8 Jun 2023 10:34:24 +0100
Subject: [PATCH 6/9] Remove ESLint rule `'@typescript-eslint/no-this-alias'`

We can now us arrow functions instead
---
 packages/govuk-frontend/.eslintrc.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/govuk-frontend/.eslintrc.js b/packages/govuk-frontend/.eslintrc.js
index 131d621115..64b308b2d2 100644
--- a/packages/govuk-frontend/.eslintrc.js
+++ b/packages/govuk-frontend/.eslintrc.js
@@ -32,9 +32,6 @@ module.exports = {
         // Allow unknown `.prototype` members until ES2015 classes
         '@typescript-eslint/no-unsafe-member-access': 'off',
 
-        // Allow `this` alias until arrow functions supported
-        '@typescript-eslint/no-this-alias': 'off',
-
         // Check type support for template string implicit `.toString()`
         '@typescript-eslint/restrict-template-expressions': [
           'error',

From 6f4eff544166f62f499c045aaa684f436bccf8cd Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Thu, 8 Jun 2023 15:00:17 +0100
Subject: [PATCH 7/9] Use arrow functions to preserve `this` in components

Fixes warnings from ESLint `@typescript/no-this-alias`
---
 packages/govuk-frontend/src/govuk/all.mjs     | 16 ++++++-------
 .../govuk/components/accordion/accordion.mjs  | 22 ++++++++---------
 .../components/checkboxes/checkboxes.mjs      | 14 ++++-------
 .../src/govuk/components/radios/radios.mjs    |  7 +++---
 .../src/govuk/components/tabs/tabs.mjs        | 24 +++++++++----------
 5 files changed, 37 insertions(+), 46 deletions(-)

diff --git a/packages/govuk-frontend/src/govuk/all.mjs b/packages/govuk-frontend/src/govuk/all.mjs
index ed40e0a314..0f970ede50 100644
--- a/packages/govuk-frontend/src/govuk/all.mjs
+++ b/packages/govuk-frontend/src/govuk/all.mjs
@@ -27,27 +27,27 @@ function initAll (config) {
   const $scope = config.scope instanceof HTMLElement ? config.scope : document
 
   const $accordions = $scope.querySelectorAll('[data-module="govuk-accordion"]')
-  $accordions.forEach(function ($accordion) {
+  $accordions.forEach(($accordion) => {
     new Accordion($accordion, config.accordion).init()
   })
 
   const $buttons = $scope.querySelectorAll('[data-module="govuk-button"]')
-  $buttons.forEach(function ($button) {
+  $buttons.forEach(($button) => {
     new Button($button, config.button).init()
   })
 
   const $characterCounts = $scope.querySelectorAll('[data-module="govuk-character-count"]')
-  $characterCounts.forEach(function ($characterCount) {
+  $characterCounts.forEach(($characterCount) => {
     new CharacterCount($characterCount, config.characterCount).init()
   })
 
   const $checkboxes = $scope.querySelectorAll('[data-module="govuk-checkboxes"]')
-  $checkboxes.forEach(function ($checkbox) {
+  $checkboxes.forEach(($checkbox) => {
     new Checkboxes($checkbox).init()
   })
 
   const $details = $scope.querySelectorAll('[data-module="govuk-details"]')
-  $details.forEach(function ($detail) {
+  $details.forEach(($detail) => {
     new Details($detail).init()
   })
 
@@ -64,12 +64,12 @@ function initAll (config) {
   }
 
   const $notificationBanners = $scope.querySelectorAll('[data-module="govuk-notification-banner"]')
-  $notificationBanners.forEach(function ($notificationBanner) {
+  $notificationBanners.forEach(($notificationBanner) => {
     new NotificationBanner($notificationBanner, config.notificationBanner).init()
   })
 
   const $radios = $scope.querySelectorAll('[data-module="govuk-radios"]')
-  $radios.forEach(function ($radio) {
+  $radios.forEach(($radio) => {
     new Radios($radio).init()
   })
 
@@ -80,7 +80,7 @@ function initAll (config) {
   }
 
   const $tabs = $scope.querySelectorAll('[data-module="govuk-tabs"]')
-  $tabs.forEach(function ($tabs) {
+  $tabs.forEach(($tabs) => {
     new Tabs($tabs).init()
   })
 }
diff --git a/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs b/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs
index 77bd25cba9..66100d7e0c 100644
--- a/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs
+++ b/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs
@@ -200,26 +200,25 @@ Accordion.prototype.initControls = function () {
  * @deprecated Will be made private in v5.0
  */
 Accordion.prototype.initSectionHeaders = function () {
-  const $component = this
   const $sections = this.$sections
 
   // Loop through sections
-  $sections.forEach(function ($section, i) {
-    const $header = $section.querySelector(`.${$component.sectionHeaderClass}`)
+  $sections.forEach(($section, i) => {
+    const $header = $section.querySelector(`.${this.sectionHeaderClass}`)
     if (!$header) {
       return
     }
 
     // Set header attributes
-    $component.constructHeaderMarkup($header, i)
-    $component.setExpanded($component.isExpanded($section), $section)
+    this.constructHeaderMarkup($header, i)
+    this.setExpanded(this.isExpanded($section), $section)
 
     // Handle events
-    $header.addEventListener('click', $component.onSectionToggle.bind($component, $section))
+    $header.addEventListener('click', this.onSectionToggle.bind(this, $section))
 
     // See if there is any state stored in sessionStorage and set the sections to
     // open or closed.
-    $component.setInitialState($section)
+    this.setInitialState($section)
   })
 }
 
@@ -371,19 +370,18 @@ Accordion.prototype.onSectionToggle = function ($section) {
  * @deprecated Will be made private in v5.0
  */
 Accordion.prototype.onShowOrHideAllToggle = function () {
-  const $component = this
   const $sections = this.$sections
 
   const nowExpanded = !this.checkIfAllSectionsOpen()
 
   // Loop through sections
-  $sections.forEach(function ($section) {
-    $component.setExpanded(nowExpanded, $section)
+  $sections.forEach(($section) => {
+    this.setExpanded(nowExpanded, $section)
     // Store the state in sessionStorage when a change is triggered
-    $component.storeState($section)
+    this.storeState($section)
   })
 
-  $component.updateShowAllButton(nowExpanded)
+  this.updateShowAllButton(nowExpanded)
 }
 
 /**
diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs b/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs
index a8ea4778d4..09bb31174a 100644
--- a/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs
+++ b/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs
@@ -45,7 +45,7 @@ Checkboxes.prototype.init = function () {
   const $module = this.$module
   const $inputs = this.$inputs
 
-  $inputs.forEach(function ($input) {
+  $inputs.forEach(($input) => {
     const targetId = $input.getAttribute('data-aria-controls')
 
     // Skip checkboxes without data-aria-controls attributes, or where the
@@ -117,18 +117,16 @@ Checkboxes.prototype.syncConditionalRevealWithInputState = function ($input) {
  * @param {HTMLInputElement} $input - Checkbox input
  */
 Checkboxes.prototype.unCheckAllInputsExcept = function ($input) {
-  const $component = this
-
   /** @satisfies {NodeListOf<HTMLInputElement>} */
   const allInputsWithSameName = document.querySelectorAll(
     `input[type="checkbox"][name="${$input.name}"]`
   )
 
-  allInputsWithSameName.forEach(function ($inputWithSameName) {
+  allInputsWithSameName.forEach(($inputWithSameName) => {
     const hasSameFormOwner = ($input.form === $inputWithSameName.form)
     if (hasSameFormOwner && $inputWithSameName !== $input) {
       $inputWithSameName.checked = false
-      $component.syncConditionalRevealWithInputState($inputWithSameName)
+      this.syncConditionalRevealWithInputState($inputWithSameName)
     }
   })
 }
@@ -144,18 +142,16 @@ Checkboxes.prototype.unCheckAllInputsExcept = function ($input) {
  * @param {HTMLInputElement} $input - Checkbox input
  */
 Checkboxes.prototype.unCheckExclusiveInputs = function ($input) {
-  const $component = this
-
   /** @satisfies {NodeListOf<HTMLInputElement>} */
   const allInputsWithSameNameAndExclusiveBehaviour = document.querySelectorAll(
     `input[data-behaviour="exclusive"][type="checkbox"][name="${$input.name}"]`
   )
 
-  allInputsWithSameNameAndExclusiveBehaviour.forEach(function ($exclusiveInput) {
+  allInputsWithSameNameAndExclusiveBehaviour.forEach(($exclusiveInput) => {
     const hasSameFormOwner = ($input.form === $exclusiveInput.form)
     if (hasSameFormOwner) {
       $exclusiveInput.checked = false
-      $component.syncConditionalRevealWithInputState($exclusiveInput)
+      this.syncConditionalRevealWithInputState($exclusiveInput)
     }
   })
 }
diff --git a/packages/govuk-frontend/src/govuk/components/radios/radios.mjs b/packages/govuk-frontend/src/govuk/components/radios/radios.mjs
index 62d096f87d..87907b696d 100644
--- a/packages/govuk-frontend/src/govuk/components/radios/radios.mjs
+++ b/packages/govuk-frontend/src/govuk/components/radios/radios.mjs
@@ -45,7 +45,7 @@ Radios.prototype.init = function () {
   const $module = this.$module
   const $inputs = this.$inputs
 
-  $inputs.forEach(function ($input) {
+  $inputs.forEach(($input) => {
     const targetId = $input.getAttribute('data-aria-controls')
 
     // Skip radios without data-aria-controls attributes, or where the
@@ -119,7 +119,6 @@ Radios.prototype.syncConditionalRevealWithInputState = function ($input) {
  * @param {MouseEvent} event - Click event
  */
 Radios.prototype.handleClick = function (event) {
-  const $component = this
   const $clickedInput = event.target
 
   // Ignore clicks on things that aren't radio buttons
@@ -135,12 +134,12 @@ Radios.prototype.handleClick = function (event) {
   const $clickedInputForm = $clickedInput.form
   const $clickedInputName = $clickedInput.name
 
-  $allInputs.forEach(function ($input) {
+  $allInputs.forEach(($input) => {
     const hasSameFormOwner = $input.form === $clickedInputForm
     const hasSameName = $input.name === $clickedInputName
 
     if (hasSameName && hasSameFormOwner) {
-      $component.syncConditionalRevealWithInputState($input)
+      this.syncConditionalRevealWithInputState($input)
     }
   })
 }
diff --git a/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs b/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs
index aeaceb9f20..745f4592a0 100644
--- a/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs
+++ b/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs
@@ -95,7 +95,6 @@ Tabs.prototype.checkMode = function () {
  * @deprecated Will be made private in v5.0
  */
 Tabs.prototype.setup = function () {
-  const $component = this
   const $module = this.$module
   const $tabs = this.$tabs
   const $tabList = $module.querySelector('.govuk-tabs__list')
@@ -107,20 +106,20 @@ Tabs.prototype.setup = function () {
 
   $tabList.setAttribute('role', 'tablist')
 
-  $tabListItems.forEach(function ($item) {
+  $tabListItems.forEach(($item) => {
     $item.setAttribute('role', 'presentation')
   })
 
-  $tabs.forEach(function ($tab) {
+  $tabs.forEach(($tab) => {
     // Set HTML attributes
-    $component.setAttributes($tab)
+    this.setAttributes($tab)
 
     // Handle events
-    $tab.addEventListener('click', $component.boundTabClick, true)
-    $tab.addEventListener('keydown', $component.boundTabKeydown, true)
+    $tab.addEventListener('click', this.boundTabClick, true)
+    $tab.addEventListener('keydown', this.boundTabKeydown, true)
 
     // Remove old active panels
-    $component.hideTab($tab)
+    this.hideTab($tab)
   })
 
   // Show either the active tab according to the URL's hash or the first tab
@@ -141,7 +140,6 @@ Tabs.prototype.setup = function () {
  * @deprecated Will be made private in v5.0
  */
 Tabs.prototype.teardown = function () {
-  const $component = this
   const $module = this.$module
   const $tabs = this.$tabs
   const $tabList = $module.querySelector('.govuk-tabs__list')
@@ -153,17 +151,17 @@ Tabs.prototype.teardown = function () {
 
   $tabList.removeAttribute('role')
 
-  $tabListItems.forEach(function ($item) {
+  $tabListItems.forEach(($item) => {
     $item.removeAttribute('role')
   })
 
-  $tabs.forEach(function ($tab) {
+  $tabs.forEach(($tab) => {
     // Remove events
-    $tab.removeEventListener('click', $component.boundTabClick, true)
-    $tab.removeEventListener('keydown', $component.boundTabKeydown, true)
+    $tab.removeEventListener('click', this.boundTabClick, true)
+    $tab.removeEventListener('keydown', this.boundTabKeydown, true)
 
     // Unset HTML attributes
-    $component.unsetAttributes($tab)
+    this.unsetAttributes($tab)
   })
 
   // Remove hashchange event handler

From 310f6a0493c5d9e4dca2360439b82d298ca6dee1 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Thu, 8 Jun 2023 14:58:46 +0100
Subject: [PATCH 8/9] Use arrow functions to preserve `this` in event listeners

---
 .../src/govuk/components/accordion/accordion.mjs          | 6 +++---
 .../govuk-frontend/src/govuk/components/button/button.mjs | 4 ++--
 .../govuk/components/character-count/character-count.mjs  | 8 ++++----
 .../src/govuk/components/checkboxes/checkboxes.mjs        | 6 +++---
 .../src/govuk/components/details/details.mjs              | 6 +++---
 .../src/govuk/components/error-summary/error-summary.mjs  | 4 ++--
 .../govuk-frontend/src/govuk/components/header/header.mjs | 6 +++---
 .../notification-banner/notification-banner.mjs           | 2 +-
 .../govuk-frontend/src/govuk/components/radios/radios.mjs | 6 +++---
 .../src/govuk/components/skip-link/skip-link.mjs          | 4 ++--
 .../govuk-frontend/src/govuk/components/tabs/tabs.mjs     | 4 ++--
 11 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs b/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs
index 66100d7e0c..f29881a7e3 100644
--- a/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs
+++ b/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs
@@ -186,11 +186,11 @@ Accordion.prototype.initControls = function () {
   this.$showAllButton.appendChild(this.$showAllText)
 
   // Handle click events on the show/hide all button
-  this.$showAllButton.addEventListener('click', this.onShowOrHideAllToggle.bind(this))
+  this.$showAllButton.addEventListener('click', () => this.onShowOrHideAllToggle())
 
   // Handle 'beforematch' events, if the user agent supports them
   if ('onbeforematch' in document) {
-    document.addEventListener('beforematch', this.onBeforeMatch.bind(this))
+    document.addEventListener('beforematch', (event) => this.onBeforeMatch(event))
   }
 }
 
@@ -214,7 +214,7 @@ Accordion.prototype.initSectionHeaders = function () {
     this.setExpanded(this.isExpanded($section), $section)
 
     // Handle events
-    $header.addEventListener('click', this.onSectionToggle.bind(this, $section))
+    $header.addEventListener('click', () => this.onSectionToggle($section))
 
     // See if there is any state stored in sessionStorage and set the sections to
     // open or closed.
diff --git a/packages/govuk-frontend/src/govuk/components/button/button.mjs b/packages/govuk-frontend/src/govuk/components/button/button.mjs
index d7baa46144..48bae7c995 100644
--- a/packages/govuk-frontend/src/govuk/components/button/button.mjs
+++ b/packages/govuk-frontend/src/govuk/components/button/button.mjs
@@ -47,8 +47,8 @@ Button.prototype.init = function () {
     return
   }
 
-  this.$module.addEventListener('keydown', this.handleKeyDown)
-  this.$module.addEventListener('click', this.debounce.bind(this))
+  this.$module.addEventListener('keydown', (event) => this.handleKeyDown(event))
+  this.$module.addEventListener('click', (event) => this.debounce(event))
 }
 
 /**
diff --git a/packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs b/packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs
index 186f0a3466..c4c977c7d3 100644
--- a/packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs
+++ b/packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs
@@ -195,7 +195,7 @@ CharacterCount.prototype.init = function () {
   // When the page is restored after navigating 'back' in some browsers the
   // state of form controls is not restored until *after* the DOMContentLoaded
   // event is fired, so we need to sync after the pageshow event.
-  window.addEventListener('pageshow', this.updateCountMessage.bind(this))
+  window.addEventListener('pageshow', () => this.updateCountMessage())
 
   // Although we've set up handlers to sync state on the pageshow event, init
   // could be called after those events have fired, for example if they are
@@ -213,11 +213,11 @@ CharacterCount.prototype.init = function () {
  */
 CharacterCount.prototype.bindChangeEvents = function () {
   const $textarea = this.$textarea
-  $textarea.addEventListener('keyup', this.handleKeyUp.bind(this))
+  $textarea.addEventListener('keyup', () => this.handleKeyUp())
 
   // Bind focus/blur events to start/stop polling
-  $textarea.addEventListener('focus', this.handleFocus.bind(this))
-  $textarea.addEventListener('blur', this.handleBlur.bind(this))
+  $textarea.addEventListener('focus', () => this.handleFocus())
+  $textarea.addEventListener('blur', () => this.handleBlur())
 }
 
 /**
diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs b/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs
index 09bb31174a..22a8010196 100644
--- a/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs
+++ b/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs
@@ -63,7 +63,7 @@ Checkboxes.prototype.init = function () {
   // When the page is restored after navigating 'back' in some browsers the
   // state of form controls is not restored until *after* the DOMContentLoaded
   // event is fired, so we need to sync after the pageshow event.
-  window.addEventListener('pageshow', this.syncAllConditionalReveals.bind(this))
+  window.addEventListener('pageshow', () => this.syncAllConditionalReveals())
 
   // Although we've set up handlers to sync state on the pageshow event, init
   // could be called after those events have fired, for example if they are
@@ -71,7 +71,7 @@ Checkboxes.prototype.init = function () {
   this.syncAllConditionalReveals()
 
   // Handle events
-  $module.addEventListener('click', this.handleClick.bind(this))
+  $module.addEventListener('click', (event) => this.handleClick(event))
 }
 
 /**
@@ -80,7 +80,7 @@ Checkboxes.prototype.init = function () {
  * @deprecated Will be made private in v5.0
  */
 Checkboxes.prototype.syncAllConditionalReveals = function () {
-  this.$inputs.forEach(this.syncConditionalRevealWithInputState.bind(this))
+  this.$inputs.forEach(($input) => this.syncConditionalRevealWithInputState($input))
 }
 
 /**
diff --git a/packages/govuk-frontend/src/govuk/components/details/details.mjs b/packages/govuk-frontend/src/govuk/components/details/details.mjs
index 0897bd1b4e..9432ea8686 100644
--- a/packages/govuk-frontend/src/govuk/components/details/details.mjs
+++ b/packages/govuk-frontend/src/govuk/components/details/details.mjs
@@ -96,7 +96,7 @@ Details.prototype.polyfillDetails = function () {
   }
 
   // Bind an event to handle summary elements
-  this.polyfillHandleInputs(this.polyfillSetAttributes.bind(this))
+  this.polyfillHandleInputs(() => this.polyfillSetAttributes())
 }
 
 /**
@@ -126,7 +126,7 @@ Details.prototype.polyfillSetAttributes = function () {
  * @param {(event: UIEvent) => void} callback - function
  */
 Details.prototype.polyfillHandleInputs = function (callback) {
-  this.$summary.addEventListener('keypress', function (event) {
+  this.$summary.addEventListener('keypress', (event) => {
     const $target = event.target
     // When the key gets pressed - check if it is enter or space
     if (event.keyCode === KEY_ENTER || event.keyCode === KEY_SPACE) {
@@ -146,7 +146,7 @@ Details.prototype.polyfillHandleInputs = function (callback) {
   })
 
   // Prevent keyup to prevent clicking twice in Firefox when using space key
-  this.$summary.addEventListener('keyup', function (event) {
+  this.$summary.addEventListener('keyup', (event) => {
     const $target = event.target
     if (event.keyCode === KEY_SPACE) {
       if ($target instanceof HTMLElement && $target.nodeName.toLowerCase() === 'summary') {
diff --git a/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs b/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs
index 0194241ca0..ef30ed8b5b 100644
--- a/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs
+++ b/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs
@@ -55,7 +55,7 @@ ErrorSummary.prototype.init = function () {
   const $module = this.$module
 
   this.setFocus()
-  $module.addEventListener('click', this.handleClick.bind(this))
+  $module.addEventListener('click', (event) => this.handleClick(event))
 }
 
 /**
@@ -74,7 +74,7 @@ ErrorSummary.prototype.setFocus = function () {
   // remove it on blur as the error summary doesn't need to be focused again.
   $module.setAttribute('tabindex', '-1')
 
-  $module.addEventListener('blur', function () {
+  $module.addEventListener('blur', () => {
     $module.removeAttribute('tabindex')
   })
 
diff --git a/packages/govuk-frontend/src/govuk/components/header/header.mjs b/packages/govuk-frontend/src/govuk/components/header/header.mjs
index b9f2e80adf..d528572c50 100644
--- a/packages/govuk-frontend/src/govuk/components/header/header.mjs
+++ b/packages/govuk-frontend/src/govuk/components/header/header.mjs
@@ -60,15 +60,15 @@ Header.prototype.init = function () {
   // MediaQueryList.addEventListener isn't supported by Safari < 14 so we need
   // to be able to fall back to the deprecated MediaQueryList.addListener
   if ('addEventListener' in this.mql) {
-    this.mql.addEventListener('change', this.syncState.bind(this))
+    this.mql.addEventListener('change', () => this.syncState())
   } else {
     // @ts-expect-error Property 'addListener' does not exist
     // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-    this.mql.addListener(this.syncState.bind(this))
+    this.mql.addListener(() => this.syncState())
   }
 
   this.syncState()
-  this.$menuButton.addEventListener('click', this.handleMenuButtonClick.bind(this))
+  this.$menuButton.addEventListener('click', () => this.handleMenuButtonClick())
 }
 
 /**
diff --git a/packages/govuk-frontend/src/govuk/components/notification-banner/notification-banner.mjs b/packages/govuk-frontend/src/govuk/components/notification-banner/notification-banner.mjs
index b3a895e3e5..eaa5191642 100644
--- a/packages/govuk-frontend/src/govuk/components/notification-banner/notification-banner.mjs
+++ b/packages/govuk-frontend/src/govuk/components/notification-banner/notification-banner.mjs
@@ -73,7 +73,7 @@ NotificationBanner.prototype.setFocus = function () {
   if (!$module.getAttribute('tabindex')) {
     $module.setAttribute('tabindex', '-1')
 
-    $module.addEventListener('blur', function () {
+    $module.addEventListener('blur', () => {
       $module.removeAttribute('tabindex')
     })
   }
diff --git a/packages/govuk-frontend/src/govuk/components/radios/radios.mjs b/packages/govuk-frontend/src/govuk/components/radios/radios.mjs
index 87907b696d..9a94892ebc 100644
--- a/packages/govuk-frontend/src/govuk/components/radios/radios.mjs
+++ b/packages/govuk-frontend/src/govuk/components/radios/radios.mjs
@@ -63,7 +63,7 @@ Radios.prototype.init = function () {
   // When the page is restored after navigating 'back' in some browsers the
   // state of form controls is not restored until *after* the DOMContentLoaded
   // event is fired, so we need to sync after the pageshow event.
-  window.addEventListener('pageshow', this.syncAllConditionalReveals.bind(this))
+  window.addEventListener('pageshow', () => this.syncAllConditionalReveals())
 
   // Although we've set up handlers to sync state on the pageshow event, init
   // could be called after those events have fired, for example if they are
@@ -71,7 +71,7 @@ Radios.prototype.init = function () {
   this.syncAllConditionalReveals()
 
   // Handle events
-  $module.addEventListener('click', this.handleClick.bind(this))
+  $module.addEventListener('click', (event) => this.handleClick(event))
 }
 
 /**
@@ -80,7 +80,7 @@ Radios.prototype.init = function () {
  * @deprecated Will be made private in v5.0
  */
 Radios.prototype.syncAllConditionalReveals = function () {
-  this.$inputs.forEach(this.syncConditionalRevealWithInputState.bind(this))
+  this.$inputs.forEach(($input) => this.syncConditionalRevealWithInputState($input))
 }
 
 /**
diff --git a/packages/govuk-frontend/src/govuk/components/skip-link/skip-link.mjs b/packages/govuk-frontend/src/govuk/components/skip-link/skip-link.mjs
index f111154a28..01a6ba0a5c 100644
--- a/packages/govuk-frontend/src/govuk/components/skip-link/skip-link.mjs
+++ b/packages/govuk-frontend/src/govuk/components/skip-link/skip-link.mjs
@@ -35,7 +35,7 @@ SkipLink.prototype.init = function () {
   }
 
   this.$linkedElement = $linkedElement
-  this.$module.addEventListener('click', this.focusLinkedElement.bind(this))
+  this.$module.addEventListener('click', () => this.focusLinkedElement())
 }
 
 /**
@@ -70,7 +70,7 @@ SkipLink.prototype.focusLinkedElement = function () {
 
     // Add listener for blur on the focused element (unless the listener has previously been added)
     if (!this.linkedElementListener) {
-      this.$linkedElement.addEventListener('blur', this.removeFocusProperties.bind(this))
+      this.$linkedElement.addEventListener('blur', () => this.removeFocusProperties())
       this.linkedElementListener = true
     }
   }
diff --git a/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs b/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs
index 745f4592a0..2e4fd40ee1 100644
--- a/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs
+++ b/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs
@@ -66,11 +66,11 @@ Tabs.prototype.setupResponsiveChecks = function () {
   // MediaQueryList.addEventListener isn't supported by Safari < 14 so we need
   // to be able to fall back to the deprecated MediaQueryList.addListener
   if ('addEventListener' in this.mql) {
-    this.mql.addEventListener('change', this.checkMode.bind(this))
+    this.mql.addEventListener('change', () => this.checkMode())
   } else {
     // @ts-expect-error Property 'addListener' does not exist
     // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-    this.mql.addListener(this.checkMode.bind(this))
+    this.mql.addListener(() => this.checkMode())
   }
 
   this.checkMode()

From 96b19ad4fb0705a6887e3eacc665938d7c1cbff4 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Thu, 8 Jun 2023 15:06:14 +0100
Subject: [PATCH 9/9] Use arrow functions to preserve `this` in timers

---
 .../govuk-frontend/src/govuk/components/button/button.mjs     | 4 ++--
 .../src/govuk/components/character-count/character-count.mjs  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/govuk-frontend/src/govuk/components/button/button.mjs b/packages/govuk-frontend/src/govuk/components/button/button.mjs
index 48bae7c995..ca1f476ebc 100644
--- a/packages/govuk-frontend/src/govuk/components/button/button.mjs
+++ b/packages/govuk-frontend/src/govuk/components/button/button.mjs
@@ -100,9 +100,9 @@ Button.prototype.debounce = function (event) {
     return false
   }
 
-  this.debounceFormSubmitTimer = setTimeout(/** @this {Button} */ function () {
+  this.debounceFormSubmitTimer = setTimeout(() => {
     this.debounceFormSubmitTimer = null
-  }.bind(this), DEBOUNCE_TIMEOUT_IN_SECONDS * 1000)
+  }, DEBOUNCE_TIMEOUT_IN_SECONDS * 1000)
 }
 
 export default Button
diff --git a/packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs b/packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs
index c4c977c7d3..1fbacb2052 100644
--- a/packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs
+++ b/packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs
@@ -249,11 +249,11 @@ CharacterCount.prototype.handleKeyUp = function () {
  * @deprecated Will be made private in v5.0
  */
 CharacterCount.prototype.handleFocus = function () {
-  this.valueChecker = setInterval(/** @this {CharacterCount} */ function () {
+  this.valueChecker = setInterval(() => {
     if (!this.lastInputTimestamp || (Date.now() - 500) >= this.lastInputTimestamp) {
       this.updateIfValueChanged()
     }
-  }.bind(this), 1000)
+  }, 1000)
 }
 
 /**