@govuk-one-login/frontend-ui 4.0.0 → 4.1.0

package/build/all.css

@@ -1 +1 @@
-@media(max-width: 640px){.govuk-header__navigation-item{border-left:none !important}.govuk-template--rebranded .govuk-header__navigation-list{padding-bottom:0px !important}.govuk-header__navigation-item{padding-top:8px !important}}.frontendUi_header_signOut-item{padding:5px 0px 5px 30px;border-left:1px solid #b1b4b6;margin-left:auto}.frontendUi_header_signOut-item--rebrand{border-left:none;padding:5px 0px 5px 0px;margin-left:auto;font-weight:700 !important}.frontendUi_header__signOut{display:flex;flex-wrap:wrap}.frontendUi-header__content{margin-left:auto}.govuk-header__navigation--signOut{padding:15px 0 15px !important}.govuk-template--rebranded .govuk-header__navigation{padding:15px 0 15px !important}@media(max-width: 640px){.govuk-header__navigation--signOut{padding:18px 0 8px !important}.govuk-template--rebranded .govuk-header__navigation{padding:18px 0 8px !important}}.govuk-template--rebranded .govuk-header__navigation-item a{font-weight:700 !important}.govuk-template--rebranded .govuk-header__navigation-item{padding-top:5px !important}@media(min-width: 20em)and (max-width: 48.0525em){.govuk-template--rebranded .govuk-header__navigation-list{padding-bottom:0px}}@media(max-width: 323px){.govuk-header__logo{padding-right:5px}.frontendUi_header_signOut-item{padding-left:0px}}@media(max-width: 261px){.frontendUi-header__content{margin-left:unset}.govuk-template--rebranded .govuk-header__navigation{padding:0px 0 8px !important}.govuk-header__logotype{max-width:100%;max-height:auto}.govuk-template--rebranded .govuk-header__logo{padding-top:5% !important;padding-bottom:5% !important}}.govuk-tag{font-size:16px;font-weight:bold;line-height:1;display:inline-block;padding-top:5px;padding-right:8px;padding-bottom:4px;padding-left:8px;outline:2px solid rgba(0,0,0,0);outline-offset:-2px;color:#fff !important;background-color:#1d70b8 !important;letter-spacing:1px !important;text-decoration:none !important;text-transform:uppercase !important}@media(max-width: 256px){.govuk-phase-banner__content{display:block}}.language-select{margin:15px 0 15px 0}.language-select__list{margin-top:1em;text-align:right}.language-select__list-item{display:inline-block}.language-select__list-item:first-child::after{content:"";display:inline-block;position:relative;top:.1875em;height:1em;border-right:.09375em solid #000}.language-select__list-item a,.language-select__list-item [aria-current]{padding:.3125em}@media screen and (max-width: 641px){.language-select__list{float:none;text-align:left;padding-bottom:10px;border-bottom:1px solid #b1b4b6}}.spinner{width:80px;height:80px;border-radius:50%;border-width:12px;border-style:solid;border-color:#dee0e2;border-top-color:#005ea5;margin-bottom:15px}@media(forced-colors: active){.spinner{forced-color-adjust:none;border-top-color:rgba(0,0,0,0) !important}}@media not (prefers-reduced-motion){.spinner{-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}}@media(prefers-reduced-motion){.spinner{transform:rotate(0.125turn)}}.spinner__finished{border-color:#005ea5;-webkit-animation:none;animation:none}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.centre{margin-left:auto;margin-right:auto;text-align:center;display:block}@media(max-width: 256px){.govuk-footer__crown{max-width:100%;max-height:auto}}.govuk-footer{padding-top:25px;padding-bottom:15px;border-top:1px solid #b1b4b6;color:#0b0c0c;background:#f3f2f1}.govuk-template--rebranded .govuk-footer{border-top:10px solid #1d70b8;background:#f4f8fb}.govuk-footer__copyright-logo::before{background:#6e777a}.govuk-template--rebranded .govuk-footer__copyright-logo::before{background:currentcolor}.govuk-button--progress{border-bottom:8px;position:relative}.govuk-button--progress-loading{background-color:#505a5f !important;color:#fff !important;pointer-events:none !important;padding-left:40px !important}@keyframes rotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}.govuk-button--progress-loading::before{content:"";border:3px solid hsla(0,0%,100%,.35);border-top:3px solid #fff;border-radius:50%;width:20px;height:20px;animation:rotate 1s infinite linear;position:absolute;top:12% !important;left:8px}@media(prefers-reduced-motion: reduce){.govuk-button--progress-loading{animation:none}}
+@media(max-width: 640px){.govuk-header__navigation-item{border-left:none !important}.govuk-template--rebranded .govuk-header__navigation-list{padding-bottom:0px !important}.govuk-header__navigation-item{padding-top:8px !important}}.frontendUi_header_signOut-item{padding:5px 0px 5px 30px;border-left:1px solid #b1b4b6;margin-left:auto}.frontendUi_header_signOut-item--rebrand{border-left:none;padding:5px 0px 5px 0px;margin-left:auto;font-weight:700 !important}.frontendUi_header__signOut{display:flex;flex-wrap:wrap}.frontendUi-header__content{margin-left:auto}.govuk-header__navigation--signOut{padding:15px 0 15px !important}.govuk-template--rebranded .govuk-header__navigation{padding:15px 0 15px !important}@media(max-width: 640px){.govuk-header__navigation--signOut{padding:18px 0 8px !important}.govuk-template--rebranded .govuk-header__navigation{padding:18px 0 8px !important}}.govuk-template--rebranded .govuk-header__navigation-item a{font-weight:700 !important}.govuk-template--rebranded .govuk-header__navigation-item{padding-top:5px !important}@media(min-width: 20em)and (max-width: 48.0525em){.govuk-template--rebranded .govuk-header__navigation-list{padding-bottom:0px}}@media(max-width: 323px){.govuk-header__logo{padding-right:5px}.frontendUi_header_signOut-item{padding-left:0px}}@media(max-width: 261px){.frontendUi-header__content{margin-left:unset}.govuk-template--rebranded .govuk-header__navigation{padding:0px 0 8px !important}.govuk-header__logotype{max-width:100%;max-height:auto}.govuk-template--rebranded .govuk-header__logo{padding-top:5% !important;padding-bottom:5% !important}}.govuk-tag{font-size:16px;font-weight:bold;line-height:1;display:inline-block;padding-top:5px;padding-right:8px;padding-bottom:4px;padding-left:8px;outline:2px solid rgba(0,0,0,0);outline-offset:-2px;color:#fff !important;background-color:#1d70b8 !important;letter-spacing:1px !important;text-decoration:none !important;text-transform:uppercase !important}@media(max-width: 256px){.govuk-phase-banner__content{display:block}}.language-select{margin:15px 0 15px 0}.language-select__list{margin-top:1em;text-align:right}.language-select__list-item{display:inline-block}.language-select__list-item:first-child::after{content:"";display:inline-block;position:relative;top:.1875em;height:1em;border-right:.09375em solid #000}.language-select__list-item a,.language-select__list-item [aria-current]{padding:.3125em}@media screen and (max-width: 641px){.language-select__list{float:none;text-align:left;padding-bottom:10px;border-bottom:1px solid #b1b4b6}}.spinner{width:80px;height:80px;border-radius:50%;border-width:12px;border-style:solid;border-color:#dee0e2;border-top-color:#005ea5;margin-bottom:15px}@media(forced-colors: active){.spinner{forced-color-adjust:none;border-top-color:rgba(0,0,0,0) !important}}@media not (prefers-reduced-motion){.spinner{-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}}@media(prefers-reduced-motion){.spinner{transform:rotate(0.125turn)}}.spinner__finished{border-color:#005ea5;-webkit-animation:none;animation:none}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.centre{margin-left:auto;margin-right:auto;text-align:center;display:block}@media(max-width: 256px){.govuk-footer__crown{max-width:100%;max-height:auto}}.govuk-footer{padding-top:25px;padding-bottom:15px;border-top:1px solid #b1b4b6;color:#0b0c0c;background:#f3f2f1}.govuk-template--rebranded .govuk-footer{border-top:10px solid #1d70b8;background:#f4f8fb}.govuk-footer__copyright-logo::before{background:#6e777a}.govuk-template--rebranded .govuk-footer__copyright-logo::before{background:currentcolor}.govuk-button--progress{position:relative}.govuk-button--progress-loading{background-color:#505a5f !important;color:#fff !important;pointer-events:none !important;padding-left:40px !important}@keyframes rotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}.govuk-button--progress-loading::before{content:"";border:3px solid hsla(0,0%,100%,.35);border-top:3px solid #fff;border-radius:50%;width:20px;height:20px;animation:rotate 1s infinite linear;position:absolute;top:12% !important;left:8px}@media(prefers-reduced-motion: reduce){.govuk-button--progress-loading{padding-left:10px !important}.govuk-button--progress-loading::before{display:none}}

package/build/cjs/frontend/index.cjs

@@ -290,6 +290,12 @@ class Spinner {
 }
 
 function initialiseProgressButtons(document = window.document) {
+    // Create a single live region for button status announcements
+    const statusRegion = document.createElement('div');
+    statusRegion.setAttribute('aria-live', 'assertive');
+    statusRegion.setAttribute('role', 'status');
+    statusRegion.className = 'govuk-visually-hidden';
+    document.body.appendChild(statusRegion);
     const progressButtons = Array.prototype.slice.call(document.querySelectorAll('[data-frontendui="di-progress-button"]'));
     function findClosestForm(element) {
         let el = element;
@@ -301,6 +307,15 @@ function initialiseProgressButtons(document = window.document) {
     progressButtons.forEach(function (button) {
         const form = findClosestForm(button);
         let isSubmitting = false;
+        // Handle spacebar press for anchor tags
+        if (button.tagName.toLowerCase() === 'a') {
+            button.addEventListener('keydown', function (event) {
+                if (event.code === 'Space') {
+                    event.preventDefault();
+                    button.click();
+                }
+            });
+        }
         button.addEventListener('click', function (event) {
             if (isSubmitting) {
                 event.preventDefault();
@@ -343,6 +358,7 @@ function initialiseProgressButtons(document = window.document) {
 }
 function handleProgressButtonClick(element, waitingText, longWaitingText, errorPage, isInput) {
     var originalText = isInput && element instanceof HTMLInputElement ? element.value : element.innerText;
+    const statusRegion = document.querySelector('.govuk-visually-hidden[role="status"]');
     if (typeof element.blur === 'function') {
         element.blur();
     }
@@ -358,7 +374,10 @@ function handleProgressButtonClick(element, waitingText, longWaitingText, errorP
     else {
         element.innerText = waitingText;
     }
-    element.setAttribute('aria-label', waitingText);
+    // Announce the initial waiting state
+    if (statusRegion) {
+        statusRegion.textContent = waitingText;
+    }
     var longWaitTimeout = window.setTimeout(function () {
         if (isInput && element instanceof HTMLInputElement) {
             element.value = longWaitingText;
@@ -366,7 +385,10 @@ function handleProgressButtonClick(element, waitingText, longWaitingText, errorP
         else {
             element.innerText = longWaitingText;
         }
-        element.setAttribute('aria-label', longWaitingText);
+        // Announce the long wait state
+        if (statusRegion) {
+            statusRegion.textContent = longWaitingText;
+        }
     }, 5000);
     var errorTimeout = window.setTimeout(function () {
         window.location.href = errorPage;
@@ -385,7 +407,11 @@ function handleProgressButtonClick(element, waitingText, longWaitingText, errorP
         else {
             element.innerText = originalText;
         }
-        element.setAttribute('aria-label', originalText);
+        // Clear status region without announcement
+        const statusRegion = document.querySelector('.govuk-visually-hidden[role="status"]');
+        if (statusRegion) {
+            statusRegion.textContent = '';
+        }
         window.clearTimeout(errorTimeout);
         window.clearTimeout(longWaitTimeout);
     }

package/build/cjs/frontend/progress-button/progress-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress-button.d.ts","sourceRoot":"","sources":["../../../../frontend-src/progress-button/progress-button.ts"],"names":[],"mappings":"AAAA,wBAAgB,yBAAyB,CAAC,QAAQ,GAAE,QAA0B,QAgE7E"}
+{"version":3,"file":"progress-button.d.ts","sourceRoot":"","sources":["../../../../frontend-src/progress-button/progress-button.ts"],"names":[],"mappings":"AAAA,wBAAgB,yBAAyB,CAAC,QAAQ,GAAE,QAA0B,QAiF7E"}

package/build/components/bases/identity/identity-base-form.njk

@@ -3,7 +3,9 @@
   {% set assetPath = "/public/rebrand"%}
 {% endif %}
 
-{% set isPageDataSensitive = true %}
+{% if isPageDataSensitive is not defined %}
+    {% set isPageDataSensitive = true %}
+{% endif %}
 {% set taxLevel1 = 'web cri' %}
 
 {% extends "form-template.njk" %}

package/build/components/bases/identity/identity-base-page.njk

@@ -3,7 +3,9 @@
   {% set assetPath = "/public/rebrand"%}
 {% endif %}
 
-{% set isPageDataSensitive = true %}
+{% if isPageDataSensitive is not defined %}
+    {% set isPageDataSensitive = true %}
+{% endif %}
 {% set taxLevel1 = 'web cri' %}
 
 {% extends "hmpo-template.njk" %}

package/build/components/bases/ipv-core/ipv-core-base.njk

@@ -2,7 +2,9 @@
     {% set govukRebrand = true %}
 {% endif %}
 
-{% set isPageDataSensitive = true %}
+{% if isPageDataSensitive is not defined %}
+    {% set isPageDataSensitive = true %}
+{% endif %}
 {% set taxLevel1 = 'web cri' %}
 {% set taxLevel2 = 'pre cri' %}
 

package/build/components/progress-button/_index.scss

@@ -1,5 +1,4 @@
 .govuk-button--progress{
-  border-bottom: 8px;
   position: relative;
 }
 
@@ -35,8 +34,12 @@
 }
   
 @media (prefers-reduced-motion: reduce) {
-.govuk-button--progress-loading {
-     animation: none;
+  .govuk-button--progress-loading {
+    padding-left: 10px !important; 
+
+    &::before {
+      display: none; 
+    }
   }
 }
 

package/build/components/progress-button/template.njk

@@ -65,8 +65,7 @@ treat it as an interactive element - without this it will be
       </div>
     </noscript>
 
-    <a href="{{ params.href if params.href else '#' }}" role="button" draggable="false" {{- commonAttributes | safe }} class = "{{ classNames }}"
-aria-live="assertive" data-frontendui="di-progress-button" data-waiting-text="{{ progressButton.waitingText }}" data-long-waiting-text="{{ progressButton.longWaitingText }}" data-error-page="{{ params.errorPage | default('#') }}" >
+    <a href="{{ params.href if params.href else '#' }}" role="button" draggable="false" {{- commonAttributes | safe }} class = "{{ classNames }}" data-frontendui="di-progress-button" data-waiting-text="{{ progressButton.waitingText }}" data-long-waiting-text="{{ progressButton.longWaitingText }}" data-error-page="{{ params.errorPage | default('#') }}" >
       {% if params.html %}
         {{ params.html | safe }}
       {% elseif params.text %}
@@ -86,8 +85,7 @@ aria-live="assertive" data-frontendui="di-progress-button" data-waiting-text="{{
       </div>
     </noscript>
 
-    <button {%- if params.value %} value="{{ params.value }}"{% endif %}{%- if params.type %} type="{{ params.type }}"{% endif %} {{- buttonAttributes | safe }} {{- commonAttributes | safe }} class = "{{ classNames }}"
-aria-live="assertive" data-frontendui="di-progress-button" data-waiting-text="{{ progressButton.waitingText }}" data-long-waiting-text="{{ progressButton.longWaitingText }}" data-error-page="{{ params.errorPage | default('#') }}" >
+    <button {%- if params.value %} value="{{ params.value }}"{% endif %}{%- if params.type %} type="{{ params.type }}"{% endif %} {{- buttonAttributes | safe }} {{- commonAttributes | safe }} class = "{{ classNames }}" data-frontendui="di-progress-button" data-waiting-text="{{ progressButton.waitingText }}" data-long-waiting-text="{{ progressButton.longWaitingText }}" data-error-page="{{ params.errorPage | default('#') }}" >
       {% if params.html %}
         {{ params.html | safe }}
       {% elseif params.text %}
@@ -107,8 +105,7 @@ aria-live="assertive" data-frontendui="di-progress-button" data-waiting-text="{{
         {{ progressButton.noJavascriptMessage }}
       </div>
     </noscript>
-    <input value="{{ params.value }}" type="{{ params.type if params.type else 'submit'}}"{{- buttonAttributes | safe }} {{- commonAttributes | safe }} class = "{{ classNames }}"
-  aria-live="assertive" data-frontendui="di-progress-button" data-waiting-text="{{ progressButton.waitingText }}" data-long-waiting-text="{{ progressButton.longWaitingText }}" data-error-page="{{ params.errorPage | default('#') }}" >
+    <input value="{{ params.value }}" type="{{ params.type if params.type else 'submit'}}"{{- buttonAttributes | safe }} {{- commonAttributes | safe }} class = "{{ classNames }}" data-frontendui="di-progress-button" data-waiting-text="{{ progressButton.waitingText }}" data-long-waiting-text="{{ progressButton.longWaitingText }}" data-error-page="{{ params.errorPage | default('#') }}" >
     {{- iconHtml | safe | trim | indent(2, true) if iconHtml -}}
   </div>
 

package/build/esm/frontend/index.js

@@ -288,6 +288,12 @@ class Spinner {
 }
 
 function initialiseProgressButtons(document = window.document) {
+    // Create a single live region for button status announcements
+    const statusRegion = document.createElement('div');
+    statusRegion.setAttribute('aria-live', 'assertive');
+    statusRegion.setAttribute('role', 'status');
+    statusRegion.className = 'govuk-visually-hidden';
+    document.body.appendChild(statusRegion);
     const progressButtons = Array.prototype.slice.call(document.querySelectorAll('[data-frontendui="di-progress-button"]'));
     function findClosestForm(element) {
         let el = element;
@@ -299,6 +305,15 @@ function initialiseProgressButtons(document = window.document) {
     progressButtons.forEach(function (button) {
         const form = findClosestForm(button);
         let isSubmitting = false;
+        // Handle spacebar press for anchor tags
+        if (button.tagName.toLowerCase() === 'a') {
+            button.addEventListener('keydown', function (event) {
+                if (event.code === 'Space') {
+                    event.preventDefault();
+                    button.click();
+                }
+            });
+        }
         button.addEventListener('click', function (event) {
             if (isSubmitting) {
                 event.preventDefault();
@@ -341,6 +356,7 @@ function initialiseProgressButtons(document = window.document) {
 }
 function handleProgressButtonClick(element, waitingText, longWaitingText, errorPage, isInput) {
     var originalText = isInput && element instanceof HTMLInputElement ? element.value : element.innerText;
+    const statusRegion = document.querySelector('.govuk-visually-hidden[role="status"]');
     if (typeof element.blur === 'function') {
         element.blur();
     }
@@ -356,7 +372,10 @@ function handleProgressButtonClick(element, waitingText, longWaitingText, errorP
     else {
         element.innerText = waitingText;
     }
-    element.setAttribute('aria-label', waitingText);
+    // Announce the initial waiting state
+    if (statusRegion) {
+        statusRegion.textContent = waitingText;
+    }
     var longWaitTimeout = window.setTimeout(function () {
         if (isInput && element instanceof HTMLInputElement) {
             element.value = longWaitingText;
@@ -364,7 +383,10 @@ function handleProgressButtonClick(element, waitingText, longWaitingText, errorP
         else {
             element.innerText = longWaitingText;
         }
-        element.setAttribute('aria-label', longWaitingText);
+        // Announce the long wait state
+        if (statusRegion) {
+            statusRegion.textContent = longWaitingText;
+        }
     }, 5000);
     var errorTimeout = window.setTimeout(function () {
         window.location.href = errorPage;
@@ -383,7 +405,11 @@ function handleProgressButtonClick(element, waitingText, longWaitingText, errorP
         else {
             element.innerText = originalText;
         }
-        element.setAttribute('aria-label', originalText);
+        // Clear status region without announcement
+        const statusRegion = document.querySelector('.govuk-visually-hidden[role="status"]');
+        if (statusRegion) {
+            statusRegion.textContent = '';
+        }
         window.clearTimeout(errorTimeout);
         window.clearTimeout(longWaitTimeout);
     }

package/build/esm/frontend/progress-button/progress-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress-button.d.ts","sourceRoot":"","sources":["../../../../frontend-src/progress-button/progress-button.ts"],"names":[],"mappings":"AAAA,wBAAgB,yBAAyB,CAAC,QAAQ,GAAE,QAA0B,QAgE7E"}
+{"version":3,"file":"progress-button.d.ts","sourceRoot":"","sources":["../../../../frontend-src/progress-button/progress-button.ts"],"names":[],"mappings":"AAAA,wBAAgB,yBAAyB,CAAC,QAAQ,GAAE,QAA0B,QAiF7E"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@govuk-one-login/frontend-ui",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "",
   "main": "build/cjs/backend/index.cjs",
   "module": "build/esm/backend/index.js",
@@ -59,6 +59,6 @@
   "types": "./build/esm/backend/index.d.ts",
   "optionalDependencies": {
     "hmpo-components": "^7.1.0",
-    "@govuk-one-login/frontend-analytics": "^4.0.3"
+    "@govuk-one-login/frontend-analytics": "^4.0.5"
   }
 }