hof 22.11.0-frontend-v4-beta.3 → 22.11.1

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+## 2025-11-15, Version 22.11.0 (Stable), @Rhodine-orleans-lindsay
+
+### Changed
+- Updated custom session-timeout handling so that custom behaviours are not blocked by a `404` middleware error.
+
+### Added
+- Added a `CUSTOM_SESSION_EXPIRY` environment variable so that a time other than the redis session ttl can be used for the session timeout. **IMPORTANT**: The `CUSTOM_SESSION_EXPIRY` variable must always be a time before the redis session ttl would expire so that behaviours can run before the `SESSION_TIMEOUT` middleware is triggered.
+- Added a `USE_CUSTOM_SESSION_TIMEOUT` that is `false` by default. When set to `true` the '/session-timeout' page can run before the session expires without triggering a `404` middleware error.
+
+   - 🎬 Action:
+      - For custom session timeout handling that is not linked to the redis session ttl, The following variables must be set: `CUSTOM_SESSION_EXPIRY` to the relevant expiry time e.g.600 and `USE_CUSTOM_SESSION_TIMEOUT` to true.
+      - If a behaviour is required on the '/session-timeout` step, the '/session-timeout' step must be set in the project's index.js, along with any relevant behaviours.
+
+
+## 2025-10-10, Version 22.10.4 (Stable), @dk4g
+### Security
+- Upgraded axios version to address a security vulnerability
+- Updated version declarations to match installed packages
+
 ## 2025-10-08, Version 22.10.3 (Stable), @Rhodine-orleans-lindsay
 
 ### Changed

package/README.md

@@ -867,7 +867,7 @@ Kubernetes healthcheck URLs are provided as defaults if no overrides are supplie
 |----------|-------------|---------|---------|
 | `SHOW_COOKIES_BANNER` | Controls whether the cookies banner is displayed | Auto-detected based on GA tags | `true`, `false` |
 
-**Behavior:**
+**Behaviour:**
 - If `SHOW_COOKIES_BANNER` is explicitly set, that value is used
 - If not set, banner is automatically shown when `GA_TAG` or `GA_4_TAG` is present
 - If no GA tags are configured, banner is hidden by default
@@ -1328,7 +1328,11 @@ This feature allows you to customise the content related to the session timeout
 
 ### Usage
 
-To enable and customise the session timeout behavior, you need to set the component and translations in your project's `hof.settings.json` file:
+By default, the session timeout is set to the redis session ttl. To bypass this and display the session timeout message before the redis session ttl the following evironment variables must be set:
+`CUSTOM_SESSION_EXPIRY` - e.g. `600`. Configure to expire before thte project's redis session ttl.
+`USE_CUSTOM_SESSION_TIMEOUT` -  `false` by default. When set to `true` the '/session-timeout' page can run before the session expires without triggering a `404` middleware error.
+
+To enable and customise the session timeout behaviour, you need to set the component and translations in your project's `hof.settings.json` file:
 ```json
  "behaviours": [
     "hof/components/session-timeout-warning"
@@ -1348,6 +1352,20 @@ By default, the framework uses the standard content provided by HOF. If you wish
   "saveExitFormContent": true // allows you to customise the content on the save-and-exit page
 ```
 
+To override the default session-timeout page completely, the path to the session-timeout.html should be set in the views property in the hof.settings.json file e.g. 
+```json
+ "behaviours": [
+    "hof/components/session-timeout-warning"
+  ],
+  "translations": "./apps/common/translations",
+   "views": ["./apps/common/views"], // allows you to overide the HOF default session-timeout page and use a custom one from the specified views
+   ...
+```
+or in the project's `server.js` e.g.
+```js
+settings.views = path.resolve(__dirname, './apps/common/views');
+```
+
 ### Customising content in `pages.json`
 Once the variables are set, you can customise the session timeout warning and exit messages in your project's pages.json:
 

package/components/date/templates/date.html

@@ -6,7 +6,7 @@
     {{#isPageHeading}}</h1>{{/isPageHeading}}
   </legend>
     {{#hint}}
-      <div id="{{key}}-hint" class="govuk-hint">{{{hint}}}</div>
+      <span id="{{key}}-hint" class="govuk-hint">{{{hint}}}</span>
     {{/hint}}
     {{#error}}
       <p id="{{key}}-error" class="govuk-error-message">

package/config/hof-defaults.js

@@ -59,6 +59,7 @@ const defaults = {
     pdfConverter: process.env.PDF_CONVERTER_URL
   },
   serveStatic: process.env.SERVE_STATIC_FILES !== 'false',
+  useCustomSessionTimeout: parseBoolean(process.env.USE_CUSTOM_SESSION_TIMEOUT, false, 'USE_CUSTOM_SESSION_TIMEOUT'),
   sessionTimeOutWarning: process.env.SESSION_TIMEOUT_WARNING || 300,
   serviceUnavailable: parseBoolean(process.env.SERVICE_UNAVAILABLE, false, 'SERVICE_UNAVAILABLE')
 };

package/frontend/govuk-template/build/govuk_template.html

@@ -1,7 +1,7 @@
 
 <!DOCTYPE html>
 <!--[if lt IE 9]><html class="lte-ie8" lang="{{ htmlLang }}"><![endif]-->
-<!--[if gt IE 8]><!--><html lang="{{ htmlLang }}" class="govuk-template--rebranded"><!--<![endif]-->
+<!--[if gt IE 8]><!--><html lang="{{ htmlLang }}" class="govuk-template"><!--<![endif]-->
   <head>
     <meta charset="utf-8" />
     <title>{{ pageTitle }}</title>
@@ -23,8 +23,9 @@
     <meta property="og:image" content="{{assetPath}}images/opengraph-image.png">
   </head>
 
-  <body class="{{ bodyClasses }} govuk-template__body js-enabled" >
-    <script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
+  <body class="{{ bodyClasses }} govuk-template__body  js-enabled" >
+    <script>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
+
 
 
     <div id="global-cookie-message" class="gem-c-cookie-banner govuk-clearfix" data-module="cookie-banner" role="region" aria-label="cookie banner" data-nosnippet="">
@@ -40,36 +41,17 @@
             <a href="{{{ homepageUrl }}}" title="{{ logoLinkTitle }}" id="logo" class="govuk-header__link govuk-header__link--homepage" target="_blank" data-module="track-click" data-track-category="homeLinkClicked" data-track-action="homeHeader">
 			<span class="govuk-header__logotype">
 				<!--[if gt IE 8]><!-->
-        <svg
-          focusable="false"
-          role="img"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 324 60"
-          height="30"
-          width="162"
-          fill="currentcolor"
-          class="govuk-header__logotype"
-          aria-label="GOV.UK">
-          <title>GOV.UK</title>
-          <g>
-            <circle cx="20" cy="17.6" r="3.7"></circle>
-            <circle cx="10.2" cy="23.5" r="3.7"></circle>
-            <circle cx="3.7" cy="33.2" r="3.7"></circle>
-            <circle cx="31.7" cy="30.6" r="3.7"></circle>
-            <circle cx="43.3" cy="17.6" r="3.7"></circle>
-            <circle cx="53.2" cy="23.5" r="3.7"></circle>
-            <circle cx="59.7" cy="33.2" r="3.7"></circle>
-            <circle cx="31.7" cy="30.6" r="3.7"></circle>
-            <path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z"></path>
-          </g>
-          <circle class="govuk-logo-dot" cx="226" cy="36" r="7.3"></circle>
-          <path d="M93.94 41.25c.4 1.81 1.2 3.21 2.21 4.62 1 1.4 2.21 2.41 3.61 3.21s3.21 1.2 5.22 1.2 3.61-.4 4.82-1c1.4-.6 2.41-1.4 3.21-2.41.8-1 1.4-2.01 1.61-3.01s.4-2.01.4-3.01v.14h-10.86v-7.02h20.07v24.08h-8.03v-5.56c-.6.8-1.38 1.61-2.19 2.41-.8.8-1.81 1.2-2.81 1.81-1 .4-2.21.8-3.41 1.2s-2.41.4-3.81.4a18.56 18.56 0 0 1-14.65-6.63c-1.6-2.01-3.01-4.41-3.81-7.02s-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83a20.45 20.45 0 0 1 19.46-13.65c3.21 0 4.01.2 5.82.8 1.81.4 3.61 1.2 5.02 2.01 1.61.8 2.81 2.01 4.01 3.21s2.21 2.61 2.81 4.21l-7.63 4.41c-.4-1-1-1.81-1.61-2.61-.6-.8-1.4-1.4-2.21-2.01-.8-.6-1.81-1-2.81-1.4-1-.4-2.21-.4-3.61-.4-2.01 0-3.81.4-5.22 1.2-1.4.8-2.61 1.81-3.61 3.21s-1.61 2.81-2.21 4.62c-.4 1.81-.6 3.71-.6 5.42s.8 5.22.8 5.22Zm57.8-27.9c3.21 0 6.22.6 8.63 1.81 2.41 1.2 4.82 2.81 6.62 4.82S170.2 24.39 171 27s1.4 5.62 1.4 8.83-.4 6.02-1.4 8.83-2.41 5.02-4.01 7.02-4.01 3.61-6.62 4.82-5.42 1.81-8.63 1.81-6.22-.6-8.63-1.81-4.82-2.81-6.42-4.82-3.21-4.41-4.01-7.02-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83 2.41-5.02 4.01-7.02 4.01-3.61 6.42-4.82 5.42-1.81 8.63-1.81Zm0 36.73c1.81 0 3.61-.4 5.02-1s2.61-1.81 3.61-3.01 1.81-2.81 2.21-4.41c.4-1.81.8-3.61.8-5.62 0-2.21-.2-4.21-.8-6.02s-1.2-3.21-2.21-4.62c-1-1.2-2.21-2.21-3.61-3.01s-3.21-1-5.02-1-3.61.4-5.02 1c-1.4.8-2.61 1.81-3.61 3.01s-1.81 2.81-2.21 4.62c-.4 1.81-.8 3.61-.8 5.62 0 2.41.2 4.21.8 6.02.4 1.81 1.2 3.21 2.21 4.41s2.21 2.21 3.61 3.01c1.4.8 3.21 1 5.02 1Zm36.32 7.96-12.24-44.15h9.83l8.43 32.77h.4l8.23-32.77h9.83L200.3 58.04h-12.24Zm74.14-7.96c2.18 0 3.51-.6 3.51-.6 1.2-.6 2.01-1 2.81-1.81s1.4-1.81 1.81-2.81a13 13 0 0 0 .8-4.01V13.9h8.63v28.15c0 2.41-.4 4.62-1.4 6.62-.8 2.01-2.21 3.61-3.61 5.02s-3.41 2.41-5.62 3.21-4.62 1.2-7.02 1.2-5.02-.4-7.02-1.2c-2.21-.8-4.01-1.81-5.62-3.21s-2.81-3.01-3.61-5.02-1.4-4.21-1.4-6.62V13.9h8.63v26.95c0 1.61.2 3.01.8 4.01.4 1.2 1.2 2.21 2.01 2.81.8.8 1.81 1.4 2.81 1.81 0 0 1.34.6 3.51.6Zm34.22-36.18v18.92l15.65-18.92h10.82l-15.03 17.32 16.03 26.83h-10.21l-11.44-20.21-5.62 6.22v13.99h-8.83V13.9"></path>
-        </svg>
+          <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg\" viewBox="0 0 32 30" height="30" width="32">
+            <path fill="currentColor" fill-rule="evenodd"    d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8"></path>
+          </svg>
           <!--<![endif]-->
           <!--[if IE 8]>
           <img src="{{ assetPath }}images/govuk-logotype-tudor-crown.png" class="govuk-header__logotype-crown-fallback-image" width="32" height="30" alt="">
           <![endif]-->
 			</span>
+				<span class="govuk-header__logotype-text">
+				  {{{ globalHeaderText }}}
+				</span>
             </a>
           </div>
           {{{ insideHeader }}}
@@ -84,54 +66,25 @@
 
     {{{ content }}}
 
-    <footer class="govuk-footer">
+    <footer class="govuk-footer" id="footer" role="contentinfo">
+
       <div class="govuk-width-container">
-        <svg
-          focusable="false"
-          role="presentation"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 64 60"
-          height="30"
-          width="32"
-          fill="currentcolor" class="govuk-footer__crown">
-          <g>
-            <circle cx="20" cy="17.6" r="3.7" />
-            <circle cx="10.2" cy="23.5" r="3.7" />
-            <circle cx="3.7" cy="33.2" r="3.7" />
-            <circle cx="31.7" cy="30.6" r="3.7" />
-            <circle cx="43.3" cy="17.6" r="3.7" />
-            <circle cx="53.2" cy="23.5" r="3.7" />
-            <circle cx="59.7" cy="33.2" r="3.7" />
-            <circle cx="31.7" cy="30.6" r="3.7" />
-            <path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z" />
-          </g>
-        </svg>
+        {{{ footerTop }}}
+
         <div class="govuk-footer__meta">
           <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
-            <h2 class="govuk-visually-hidden">Support links</h2>
+		        <h2 class="govuk-visually-hidden">Support links</h2>
             {{{ footerSupportLinks }}}
-            <svg
-              aria-hidden="true"
-              focusable="false"
-              class="govuk-footer__licence-logo"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 483.2 195.7"
-              height="17"
-              width="41">
-              <path
-                fill="currentColor"
-                d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" />
+
+			      <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 483.2 195.7" height="17" width="41">
+                <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"></path>
             </svg>
-            <span class="govuk-footer__licence-description">
-                {{{ licenceMessage }}}
-            </span>
+
+			      <span class="govuk-footer__licence-description">{{{ licenceMessage }}}</span>
           </div>
+
           <div class="govuk-footer__meta-item">
-            <a
-              class="govuk-footer__link govuk-footer__copyright-logo"
-              href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">
-              {{{ crownCopyrightMessage }}}
-            </a>
+            <a class="govuk-footer__link govuk-footer__copyright-logo" id="copyright-logo" target="_blank" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">{{{ crownCopyrightMessage }}}</a>
           </div>
         </div>
       </div>

package/frontend/template-mixins/mixins/template-mixins.js

@@ -358,8 +358,7 @@ module.exports = function (options) {
         path: 'partials/forms/input-text-group',
         renderWith: inputText,
         options: {
-          maxlength: 18,
-          className: 'govuk-input govuk-input--extra-letter-spacing'
+          maxlength: 18
         }
       },
       'input-file': {
@@ -460,12 +459,12 @@ module.exports = function (options) {
             const parts = [];
 
             if (isExact) {
-              const dayPart = compiled['partials/forms/input-text-date'].render(inputText.call(this, key + '-day', { inputmode: 'numeric', min: 1, max: 31, maxlength: 2, hintId: key + '-hint', date: true, autocomplete: autocomplete.day, formGroupClassName, className: classNameDay, isThisRequired }));
+              const dayPart = compiled['partials/forms/input-text-date'].render(inputText.call(this, key + '-day', { pattern: '[0-9]*', min: 1, max: 31, maxlength: 2, hintId: key + '-hint', date: true, autocomplete: autocomplete.day, formGroupClassName, className: classNameDay, isThisRequired }));
               parts.push(dayPart);
             }
 
-            const monthPart = compiled['partials/forms/input-text-date'].render(inputText.call(this, key + '-month', { inputmode: 'numeric', min: 1, max: 12, maxlength: 2, hintId: key + '-hint', date: true, autocomplete: autocomplete.month, formGroupClassName, className: classNameMonth, isThisRequired }));
-            const yearPart = compiled['partials/forms/input-text-date'].render(inputText.call(this, key + '-year', { inputmode: 'numeric', maxlength: 4, hintId: key + '-hint', date: true, autocomplete: autocomplete.year, formGroupClassName, className: classNameYear, isThisRequired }));
+            const monthPart = compiled['partials/forms/input-text-date'].render(inputText.call(this, key + '-month', { pattern: '[0-9]*', min: 1, max: 12, maxlength: 2, hintId: key + '-hint', date: true, autocomplete: autocomplete.month, formGroupClassName, className: classNameMonth, isThisRequired }));
+            const yearPart = compiled['partials/forms/input-text-date'].render(inputText.call(this, key + '-year', { pattern: '[0-9]*', maxlength: 4, hintId: key + '-hint', date: true, autocomplete: autocomplete.year, formGroupClassName, className: classNameYear, isThisRequired }));
 
             return parts.concat(monthPart, yearPart).join('\n');
           };

package/frontend/template-mixins/partials/forms/checkbox.html

@@ -1,9 +1,5 @@
 <div id="{{key}}-group" class="govuk-form-group {{#compound}} form-group-compound{{/compound}}{{#formGroupClassName}} {{formGroupClassName}}{{/formGroupClassName}}{{#error}} govuk-form-group--error{{/error}}">
-    {{#error}}
-    <p class="govuk-error-message" aria-hidden="true">
-        <span class="govuk-visually-hidden">Error:</span> {{error.message}}
-    </p>
-    {{/error}}
+    {{#error}}<p class="govuk-error-message" aria-hidden="true">{{error.message}}</p>{{/error}}
     <div class="govuk-checkboxes__item">
         <input class="govuk-checkboxes__input" type="checkbox" id="{{key}}" name="{{key}}" value="true" aria-required="{{required}}"{{#error}} aria-invalid="true"{{/error}}{{^error}}{{#toggle}} data-toggle="{{toggle}}"{{/toggle}}{{#selected}} checked="checked"{{/selected}}{{/error}}>
         <label for="{{key}}" class="{{#className}}{{className}} {{/className}}{{#invalid}}invalid-input{{/invalid}}">

package/frontend/template-mixins/partials/forms/input-text-date.html

@@ -3,7 +3,7 @@
       <label for="{{id}}" class="{{labelClassName}}">
           <span class="label-text">{{{label}}}</span>
       </label>
-      {{#hint}}<div {{$hintId}}id="{{hintId}}" {{/hintId}}class="govuk-hint">{{{hint}}}</div>{{/hint}}
+      {{#hint}}<span {{$hintId}}id="{{hintId}}" {{/hintId}}class="govuk-hint">{{{hint}}}</span>{{/hint}}
       {{#renderChild}}{{/renderChild}}
           {{#attributes}}
               {{#prefix}}
@@ -21,7 +21,6 @@
               {{#max}} max="{{max}}"{{/max}}
               {{#maxlength}} maxlength="{{maxlength}}"{{/maxlength}}
               {{#pattern}} pattern="{{pattern}}"{{/pattern}}
-              {{#inputmode}}inputmode="{{inputmode}}"{{/inputmode}}
               {{#hintId}} aria-describedby="{{hintId}}"{{/hintId}}
               {{#error}} aria-invalid="true"{{/error}}
               {{#autocomplete}} autocomplete="{{autocomplete}}"{{/autocomplete}}

package/frontend/template-mixins/partials/forms/input-text-group.html

@@ -3,7 +3,7 @@
         {{{label}}}
       </label>
     {{#isPageHeading}}</h1>{{/isPageHeading}}
-    {{#hint}}<div {{$hintId}}id="{{hintId}}" {{/hintId}}class="govuk-hint">{{{hint}}}</div>{{/hint}}
+    {{#hint}}<span {{$hintId}}id="{{hintId}}" {{/hintId}}class="govuk-hint">{{{hint}}}</span>{{/hint}}
     {{#error}}
       <p class="govuk-error-message">
         <span class="govuk-visually-hidden">Error:</span> {{error.message}}

package/frontend/template-mixins/partials/forms/textarea-group.html

@@ -29,7 +29,7 @@
             {{#error}} aria-invalid="true" aria-describedby="{{id}}-error" {{/error}}
             >{{value}}</textarea>
         {{#isMaxlengthOrMaxword}}
-        <div id="{{id}}-info" class=" govuk-hint govuk-character-count__message">You have {{#maxlength}}{{maxlength}} characters{{/maxlength}}{{#maxword}}{{maxword}}
+        <div id="{{id}}-info" class=" govuk-hint govuk-character-count__message" aria-live="polite">You have {{#maxlength}}{{maxlength}} characters{{/maxlength}}{{#maxword}}{{maxword}}
             words{{/maxword}} remaining
         </div>
         {{/isMaxlengthOrMaxword}}

package/frontend/template-partials/views/layout.html

@@ -6,7 +6,7 @@
     {{#errorlist.length}}{{#t}}errorlist.prefix{{/t}}{{/errorlist.length}}{{#title}}{{title}}{{/title}}{{^title}}{{$header}}{{/header}}{{/title}}{{#serviceName}} – {{serviceName}}{{/serviceName}} – GOV.UK
   {{/pageTitle}}
   {{$bodyStart}}
-    <a href="#{{#skipToMain}}{{skipToMain}}{{/skipToMain}}{{^skipToMain}}main-content{{/skipToMain}}" class="govuk-skip-link" data-module="govuk-skip-link" id="skip-to-main">Skip to main content</a>
+    <a href="#{{#skipToMain}}{{skipToMain}}{{/skipToMain}}{{^skipToMain}}main-content{{/skipToMain}}" class="govuk-skip-link" id="skip-to-main">Skip to main content</a>
   {{/bodyStart}}
   {{$headerClass}}govuk-header{{/headerClass}}
   {{$insideHeader}}{{/insideHeader}}

package/frontend/template-partials/views/partials/cookie-banner.html

@@ -1,51 +1,33 @@
-<div id="cookie-banner"  class="govuk-cookie-banner" data-nosnippet="" role="region" aria-label="Cookies on {{#appName}}{{appName}}{{/appName}}{{^appName}}this service{{/appName}}">
-  <div class="govuk-cookie-banner__message govuk-width-container">
-    <div id="cookie-banner-info" class="govuk-grid-row">
-      <div class="govuk-grid-column-two-thirds">
-        <h2 class="govuk-cookie-banner__heading govuk-heading-m">Cookies on {{#appName}}{{appName}}{{/appName}}{{^appName}}this service{{/appName}}</h2>
-        <div class="govuk-cookie-banner__content">
-          <p class="govuk-body">{{#t}}cookies.banner.message{{/t}}</p>
-          {{#hasGoogleAnalytics}}
-          <p class="govuk-body">We'd like to set additional cookies to understand how you use GOV.UK, remember your settings and improve government services.</p>
-          <p class="govuk-body">We also use cookies set by other sites to help us deliver content from their services.</p>
-          {{/hasGoogleAnalytics}}
-        </div>
-      </div>
-    </div>
-    <div id="cookie-banner-actions" class="govuk-button-group">
-      {{#hasGoogleAnalytics}}
-        <button id="accept-cookies-button" value="yes" type="submit" name="cookies[additional]" class="govuk-button" data-module="govuk-button" data-accept-cookies="true" data-track-category="cookieBanner" data-track-action="Cookie banner accepted" data-cookie-types="all">Accept additional cookies</button>
-        <button id="reject-cookies-button" value="no" type="submit" name="cookies[additional]" class="govuk-button" data-module="govuk-button" data-reject-cookies="true" data-track-category="cookieBanner" data-track-action="Cookie banner rejected">Reject additional cookies</button>
-      {{/hasGoogleAnalytics}}
-        <a class="govuk-link" href="/cookies">{{#t}}cookies.banner.link{{/t}}</a>
-    </div>
-  </div>
-  <div id="cookie-banner-submitted-accepted" data-accept-cookies="true" class="govuk-cookie-banner__message govuk-width-container" role="alert" hidden >
-    <div class="govuk-grid-row">
-      <div class="govuk-grid-column-two-thirds">
-        <div class="govuk-cookie-banner__content">
-          <p class="govuk-body">You've accepted additional cookies. You can <a class="govuk-link" href="/cookies">change your cookie settings</a> at any time.</p>
-        </div>
-      </div>
-    </div>
-    <div class="govuk-button-group">
-      <button id="hide-accept-cookie-banner" value="yes" type="submit" name="cookies[hide]" class="govuk-button" data-module="govuk-button">
-        Hide cookie message
-      </button>
-    </div>
-  </div>
-  <div id="cookie-banner-submitted-rejected" class="govuk-cookie-banner__message govuk-width-container" role="alert" hidden>
-    <div class="govuk-grid-row">
-      <div class="govuk-grid-column-two-thirds">
-        <div class="govuk-cookie-banner__content">
-          <p class="govuk-body">You've rejected additional cookies. You can <a class="govuk-link" href="/cookies">change your cookie settings</a> at any time.</p>
-        </div>
-      </div>
-    </div>
-    <div class="govuk-button-group">
-      <button id="hide-reject-cookie-banner" value="yes" type="submit" name="cookies[hide]" class="govuk-button" data-module="govuk-button">
-        Hide cookie message
-      </button>
-    </div>
-  </div>
+<div id="cookie-banner"  class="govuk-cookie-banner gem-c-cookie-banner govuk-clearfix">
+	<div class="gem-c-cookie-banner__message govuk-cookie-banner__message govuk-width-container">
+		<div id="cookie-banner-info" class="govuk-grid-row">
+			<div class="govuk-grid-column-two-thirds">
+				<h2 class="govuk-cookie-banner__heading govuk-heading-m">Cookies on {{#appName}}{{appName}}{{/appName}}{{^appName}}this service{{/appName}}</h2>
+				<div class="govuk-cookie-banner__content">
+					<p class="govuk-body">{{#t}}cookies.banner.message{{/t}}</p>
+					{{#hasGoogleAnalytics}}
+						<p class="govuk-body">We'd like to set additional cookies to understand how you use GOV.UK, remember your settings and improve government services.</p>
+						<p class="govuk-body">We also use cookies set by other sites to help us deliver content from their services.</p>
+					{{/hasGoogleAnalytics}}
+				</div>
+			</div>
+		</div>
+		<div id="cookie-banner-actions" class="govuk-button-group">         
+			{{#hasGoogleAnalytics}}
+				<button id="accept-cookies-button" class="gem-c-button govuk-button" type="submit" data-module="gem-track-click" data-accept-cookies="true" data-track-category="cookieBanner" data-track-action="Cookie banner accepted" data-cookie-types="all">Accept additional cookies</button>
+	
+				<button id="reject-cookies-button" class="gem-c-button govuk-button" type="submit" data-module="gem-track-click" data-reject-cookies="true" data-track-category="cookieBanner" data-track-action="Cookie banner rejected">Reject additional cookies</button>
+			{{/hasGoogleAnalytics}}
+			<a class="govuk-link" href="/cookies">{{#t}}cookies.banner.link{{/t}}</a>
+		</div>
+	</div>
+	
+	<div class="gem-c-cookie-banner__confirmation govuk-width-container" hidden=""  id="cookie-banner-submitted" >
+		<p class="gem-c-cookie-banner__confirmation-message" role="alert">
+			Your cookie preferences have been saved. You can <a class="govuk-link" data-module="gem-track-click" data-track-category="cookieBanner" data-track-action="Cookie banner settings clicked from confirmation" href="/cookies">change your cookie settings</a> at any time.
+		</p>
+		<div class="govuk-button-group">
+			<button   class="gem-c-cookie-banner__hide-button govuk-button"  id="hide-cookie-banner">Hide this message</button>
+		</div>
+	</div>
 </div>

package/frontend/template-partials/views/partials/navigation.html

@@ -1,8 +1,8 @@
 <div class="govuk-header__content">
   {{#startPageRedirectUrl}}
-    <a href="{{startPageRedirectUrl}}" class="govuk-header__link govuk-header__service-name" id="proposition-name">{{$journeyHeader}}{{/journeyHeader}}</a>
+    <a href="{{startPageRedirectUrl}}" class="govuk-header__link govuk-header__link--service-name" id="proposition-name">{{$journeyHeader}}{{/journeyHeader}}</a>
   {{/startPageRedirectUrl}}
   {{^startPageRedirectUrl}}
-    <a href="{{journeyHeaderURL}}" class="govuk-header__link govuk-header__service-name" id="proposition-name">{{$journeyHeader}}{{/journeyHeader}}</a>
+    <a href="{{journeyHeaderURL}}" class="govuk-header__link govuk-header__link--service-name" id="proposition-name">{{$journeyHeader}}{{/journeyHeader}}</a>
   {{/startPageRedirectUrl}}
 </div>

package/frontend/themes/gov-uk/client-js/cookieSettings.js

@@ -1,22 +1,22 @@
-/* eslint-disable max-len, no-undef */
+/* eslint-disable max-len, no-var, vars-on-top, no-undef */
 'use strict';
 
 // TODO: update package.json(s)
 
 function hideFallbackContent(containerId) {
-  const container = document.getElementById(containerId);
+  var container = document.getElementById(containerId);
   if (container === null) return;
-  const fallbackContent = container.getElementsByClassName('js-disabled');
-  for (let i = 0; i < fallbackContent.length; i++) {
+  var fallbackContent = container.getElementsByClassName('js-disabled');
+  for (var i = 0; i < fallbackContent.length; i++) {
     fallbackContent[i].style.display = 'none';
   }
 }
 
 function showInteractiveContent(containerId) {
-  const container = document.getElementById(containerId);
+  var container = document.getElementById(containerId);
   if (container === null) return;
-  const interactiveContent = container.getElementsByClassName('js-enabled');
-  for (let i = 0; i < interactiveContent.length; i++) {
+  var interactiveContent = container.getElementsByClassName('js-enabled');
+  for (var i = 0; i < interactiveContent.length; i++) {
     interactiveContent[i].style.display = 'block';
   }
 }
@@ -34,53 +34,41 @@ function setCookiePreferences(preferences) {
 function showCookieBannerSubmitted() {
   document.getElementById('cookie-banner-info').style.display = 'none';
   document.getElementById('cookie-banner-actions').style.display = 'none';
-  let cookieBannerSubmitted;
-  const cookieBannerDiv = document.getElementById('cookie-banner-submitted-accepted');
-  if (cookieBannerDiv.dataset.acceptCookies === 'true') {
-    cookieBannerSubmitted = document.getElementById('cookie-banner-submitted-accepted');
-  } else {
-    cookieBannerSubmitted = document.getElementById('cookie-banner-submitted-rejected');
-  }
+  var cookieBannerSubmitted = document.getElementById('cookie-banner-submitted');
   cookieBannerSubmitted.style.display = 'block';
   cookieBannerSubmitted.focus();
 }
 
-function hideCookieBanner() {
-  document.getElementById('cookie-banner').style.display = 'none';
-}
-
 function initialiseBannerButtons() {
-  const acceptedCookieBannerDiv = document.getElementById('cookie-banner-submitted-accepted');
   document.getElementById('accept-cookies-button').addEventListener('click', function () {
-    setCookiePreferences({ essential: true, usage: true });
+    setCookiePreferences({essential: true, usage: true});
     showCookieBannerSubmitted();
     sessionStorage.setItem('reloading', 'true');
     window.location = document.URL;
   });
 
   document.getElementById('reject-cookies-button').addEventListener('click', function () {
-    setCookiePreferences({ essential: true, usage: false });
-    acceptedCookieBannerDiv.dataset.acceptCookies = 'false';
+    setCookiePreferences({essential: true, usage: false});
     showCookieBannerSubmitted();
   });
 
-  document.getElementById('hide-accept-cookie-banner').addEventListener('click', hideCookieBanner);
-
-  document.getElementById('hide-reject-cookie-banner').addEventListener('click', hideCookieBanner);
+  document.getElementById('hide-cookie-banner').addEventListener('click', function () {
+    document.getElementById('cookie-banner').style.display = 'none';
+  });
 }
 
 function initialiseCookieBanner() {
-  const preferences = GOVUK.cookie('cookie_preferences');
+  var preferences = GOVUK.cookie('cookie_preferences');
 
   if (preferences !== null) {
     return;
   }
 
   // the default cookie message container from hof-govuk-template
-  const bannerContainer = document.getElementById('global-cookie-message');
+  var bannerContainer = document.getElementById('global-cookie-message');
 
   // the cookie banner that will replace the container's default content if using google analytics
-  const cookieBanner = document.getElementById('cookie-banner');
+  var cookieBanner = document.getElementById('cookie-banner');
 
   if (bannerContainer !== null && cookieBanner !== null) {
     hideFallbackContent('global-cookie-message');
@@ -94,8 +82,8 @@ function handleSaveSettings(e) {
   e.preventDefault();
   setCookiePreferences({ essential: true, usage: document.getElementById('radio-1').checked });
 
-  const cookieNotification = document.getElementById('cookie-notification');
-  const cookieBanner = document.getElementById('cookie-banner');
+  var cookieNotification = document.getElementById('cookie-notification');
+  var cookieBanner = document.getElementById('cookie-banner');
 
   if (cookieBanner !== null) {
     cookieBanner.style.display = 'none';
@@ -108,8 +96,8 @@ function handleSaveSettings(e) {
 }
 
 function initialiseFormControls() {
-  const preferences = JSON.parse(GOVUK.cookie('cookie_preferences'));
-  let usage;
+  var preferences = JSON.parse(GOVUK.cookie('cookie_preferences'));
+  var usage;
 
   if (preferences !== null && preferences.usage !== undefined && typeof preferences.usage === 'boolean') {
     usage = preferences.usage;
@@ -123,7 +111,7 @@ function initialiseFormControls() {
 }
 
 function initialiseCookiePage() {
-  const shouldDisplayCookieControls = document.getElementById('cookie-settings') !== null;
+  var shouldDisplayCookieControls = document.getElementById('cookie-settings') !== null;
 
   if (shouldDisplayCookieControls) {
     hideFallbackContent('cookie-settings');
@@ -134,12 +122,12 @@ function initialiseCookiePage() {
 
 function onLoad() {
   window.onload = function () {
-    const reloading = sessionStorage.getItem('reloading');
+    var reloading = sessionStorage.getItem('reloading');
     if (reloading) {
       sessionStorage.removeItem('reloading');
 
-      const bannerContainer = document.getElementById('global-cookie-message');
-      const cookieBanner = document.getElementById('cookie-banner');
+      var bannerContainer = document.getElementById('global-cookie-message');
+      var cookieBanner = document.getElementById('cookie-banner');
 
       if (bannerContainer !== null && cookieBanner !== null) {
         bannerContainer.style.display = 'block';

package/index.js

@@ -156,7 +156,7 @@ function bootstrap(options) {
     res.locals.htmlLang = config.htmlLang;
     res.locals.cookieName = config.session.name;
     // session timeout warning configs
-    res.locals.sessionTimeOut = config.session.ttl;
+    res.locals.sessionTimeOut = process.env.CUSTOM_SESSION_EXPIRY || config.session.ttl;
     res.locals.sessionTimeOutWarning = config.sessionTimeOutWarning;
     res.locals.sessionTimeoutWarningContent = config.sessionTimeoutWarningContent;
     res.locals.exitFormContent = config.exitFormContent;
@@ -252,26 +252,32 @@ function bootstrap(options) {
 
   /**
    * Handles requests to the session timeout page.
+   * For custom session timeout handling that is not linked to the redis session ttl,
+   * set `CUSTOM_SESSION_EXPIRY` variables to the relevant time and `USE_CUSTOM_SESSION_TIMEOUT`variables to true.
+   * If `CUSTOM_SESSION_EXPIRY` and `USE_CUSTOM_SESSION_TIMEOUT` envs are set,
+   * include '/session-timeout' step in the project's index.js.
    * - If the user has a session cookie but their session is missing or inactive,
    *   this triggers a session timeout error handled by error middleware.
    * - Otherwise, responds with a 404 "Page Not Found" error.
    * This route ensures the timeout page only appears after an actual session expiry.
   */
-  app.get('/session-timeout', (req, res, next) => {
-    if ((req.cookies['hof-wizard-sc']) && (!req.session || req.session.exists !== true)) {
-      const err = new Error('Session expired');
-      err.code = 'SESSION_TIMEOUT';
-      return next(err);
-    }
-    const err = new Error('Not Found');
-    err.status = 404;
-    const locals = Object.assign({}, req.translate('errors'));
-    if (locals && locals['404']) {
-      return res.status(404).render('404', locals['404']);
-    }
-    // Fallback: render a basic 404 page if translation is missing
-    return res.status(404).send('Page Not Found');
-  });
+  if (!config.useCustomSessionTimeout) {
+    app.get('/session-timeout', (req, res, next) => {
+      if ((req.cookies['hof-wizard-sc']) && (!req.session || req.session.exists !== true)) {
+        const err = new Error('Session expired');
+        err.code = 'SESSION_TIMEOUT';
+        return next(err);
+      }
+      const err = new Error('Not Found');
+      err.status = 404;
+      const locals = Object.assign({}, req.translate('errors'));
+      if (locals && locals['404']) {
+        return res.status(404).render('404', locals['404']);
+      }
+      // Fallback: render a basic 404 page if translation is missing
+      return res.status(404).send('Page Not Found');
+    });
+  }
 
   if (config.getAccessibility === true) {
     deprecate(