From 2577f606645725e8a107ad00688a860956342c09 Mon Sep 17 00:00:00 2001
From: Hugo Jeffreys <hugo.jeffreys@digital.cabinet-office.gov.uk>
Date: Mon, 19 Aug 2024 14:59:11 +0100
Subject: [PATCH 1/3] Include hidden error message for screen readers

---
 app/views/charge.njk | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/app/views/charge.njk b/app/views/charge.njk
index 71163a27e..1b0669e01 100644
--- a/app/views/charge.njk
+++ b/app/views/charge.njk
@@ -189,6 +189,7 @@
                     <p class="govuk-error-message" id="error-card-no">
                       <span class="govuk-visually-hidden">{{ __p("fieldErrors.visuallyHiddenError") }}</span>
                       {{ highlightErrorFields.cardNo }}
+                      <span class="govuk-visually-hidden">{{ highlightErrorFields.cardNo }}</span>
                     </p>
                   {% endif %}
 
@@ -262,6 +263,7 @@
                       <p class="govuk-error-message" id="error-expiry-date">
                         <span class="govuk-visually-hidden">{{ __p("fieldErrors.visuallyHiddenError") }}</span>
                         {{ highlightErrorFields.expiryMonth }}
+                        <span class="govuk-visually-hidden">{{ highlightErrorFields.expiryMonth }}</span>
                       </p>
                     {% endif %}
                     <div class="govuk-date-input__item govuk-date-input__item--month govuk-date-input__item--with-separator">
@@ -312,6 +314,7 @@
                     <p class="govuk-error-message" id="error-cardholder-name">
                       <span class="govuk-visually-hidden">{{ __p("fieldErrors.visuallyHiddenError") }}</span>
                       {{ highlightErrorFields.cardholderName }}
+                      <span class="govuk-visually-hidden">{{ highlightErrorFields.cardholderName }}</span>
                     </p>
                   {% endif %}
 
@@ -351,6 +354,7 @@
                     <p class="govuk-error-message" id="error-cvc">
                       <span class="govuk-visually-hidden">{{ __p("fieldErrors.visuallyHiddenError") }}</span>
                       {{ highlightErrorFields.cvc }}
+                      <span class="govuk-visually-hidden">{{ highlightErrorFields.cvc }}</span>
                     </p>
                   {% endif %}
 
@@ -403,6 +407,7 @@
                             <p class="govuk-error-message" id="error-address-line-1">
                               <span class="govuk-visually-hidden">{{ __p("fieldErrors.visuallyHiddenError") }}</span>
                               {{ highlightErrorFields.addressLine1 }}
+                              <span class="govuk-visually-hidden">{{ highlightErrorFields.addressLine1 }}</span>
                             </p>
                           {% endif %}
 
@@ -457,6 +462,7 @@
                             <p class="govuk-error-message" id="error-address-city">
                               <span class="govuk-visually-hidden">{{ __p("fieldErrors.visuallyHiddenError") }}</span>
                               {{ highlightErrorFields.addressCity }}
+                              <span class="govuk-visually-hidden">{{ highlightErrorFields.addressCity }}</span>
                             </p>
                           {% endif %}
 
@@ -483,6 +489,7 @@
                             <p class="govuk-error-message" id="error-address-country">
                               <span class="govuk-visually-hidden">{{ __p("fieldErrors.visuallyHiddenError") }}</span>
                               {{ highlightErrorFields.addressCountry }}
+                              <span class="govuk-visually-hidden">{{ highlightErrorFields.addressCountry }}</span>
                             </p>
                           {% endif %}
 
@@ -513,6 +520,7 @@
                               <p class="govuk-error-message" id="error-address-postcode">
                                 <span class="govuk-visually-hidden">{{ __p("fieldErrors.visuallyHiddenError") }}</span>
                                 {{ highlightErrorFields.addressPostcode }}
+                                <span class="govuk-visually-hidden">{{ highlightErrorFields.addressPostcode }}</span>
                               </p>
                           {% endif %}
 
@@ -553,6 +561,7 @@
                               <p class="govuk-error-message" id="error-email">
                                 <span class="govuk-visually-hidden">{{ __p("fieldErrors.visuallyHiddenError") }}</span>
                                 {{ highlightErrorFields.email }}
+                                <span class="govuk-visually-hidden">{{ highlightErrorFields.email }}</span>
                               </p>
                             {% endif %}
 

From 5c9609cd10c772a47862a766802a0179004ebae0 Mon Sep 17 00:00:00 2001
From: Hugo Jeffreys <hugo.jeffreys@digital.cabinet-office.gov.uk>
Date: Mon, 19 Aug 2024 16:12:26 +0100
Subject: [PATCH 2/3] Correcting visually hidden spans

---
 app/views/charge.njk | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/app/views/charge.njk b/app/views/charge.njk
index 1b0669e01..71163a27e 100644
--- a/app/views/charge.njk
+++ b/app/views/charge.njk
@@ -189,7 +189,6 @@
                     <p class="govuk-error-message" id="error-card-no">
                       <span class="govuk-visually-hidden">{{ __p("fieldErrors.visuallyHiddenError") }}</span>
                       {{ highlightErrorFields.cardNo }}
-                      <span class="govuk-visually-hidden">{{ highlightErrorFields.cardNo }}</span>
                     </p>
                   {% endif %}
 
@@ -263,7 +262,6 @@
                       <p class="govuk-error-message" id="error-expiry-date">
                         <span class="govuk-visually-hidden">{{ __p("fieldErrors.visuallyHiddenError") }}</span>
                         {{ highlightErrorFields.expiryMonth }}
-                        <span class="govuk-visually-hidden">{{ highlightErrorFields.expiryMonth }}</span>
                       </p>
                     {% endif %}
                     <div class="govuk-date-input__item govuk-date-input__item--month govuk-date-input__item--with-separator">
@@ -314,7 +312,6 @@
                     <p class="govuk-error-message" id="error-cardholder-name">
                       <span class="govuk-visually-hidden">{{ __p("fieldErrors.visuallyHiddenError") }}</span>
                       {{ highlightErrorFields.cardholderName }}
-                      <span class="govuk-visually-hidden">{{ highlightErrorFields.cardholderName }}</span>
                     </p>
                   {% endif %}
 
@@ -354,7 +351,6 @@
                     <p class="govuk-error-message" id="error-cvc">
                       <span class="govuk-visually-hidden">{{ __p("fieldErrors.visuallyHiddenError") }}</span>
                       {{ highlightErrorFields.cvc }}
-                      <span class="govuk-visually-hidden">{{ highlightErrorFields.cvc }}</span>
                     </p>
                   {% endif %}
 
@@ -407,7 +403,6 @@
                             <p class="govuk-error-message" id="error-address-line-1">
                               <span class="govuk-visually-hidden">{{ __p("fieldErrors.visuallyHiddenError") }}</span>
                               {{ highlightErrorFields.addressLine1 }}
-                              <span class="govuk-visually-hidden">{{ highlightErrorFields.addressLine1 }}</span>
                             </p>
                           {% endif %}
 
@@ -462,7 +457,6 @@
                             <p class="govuk-error-message" id="error-address-city">
                               <span class="govuk-visually-hidden">{{ __p("fieldErrors.visuallyHiddenError") }}</span>
                               {{ highlightErrorFields.addressCity }}
-                              <span class="govuk-visually-hidden">{{ highlightErrorFields.addressCity }}</span>
                             </p>
                           {% endif %}
 
@@ -489,7 +483,6 @@
                             <p class="govuk-error-message" id="error-address-country">
                               <span class="govuk-visually-hidden">{{ __p("fieldErrors.visuallyHiddenError") }}</span>
                               {{ highlightErrorFields.addressCountry }}
-                              <span class="govuk-visually-hidden">{{ highlightErrorFields.addressCountry }}</span>
                             </p>
                           {% endif %}
 
@@ -520,7 +513,6 @@
                               <p class="govuk-error-message" id="error-address-postcode">
                                 <span class="govuk-visually-hidden">{{ __p("fieldErrors.visuallyHiddenError") }}</span>
                                 {{ highlightErrorFields.addressPostcode }}
-                                <span class="govuk-visually-hidden">{{ highlightErrorFields.addressPostcode }}</span>
                               </p>
                           {% endif %}
 
@@ -561,7 +553,6 @@
                               <p class="govuk-error-message" id="error-email">
                                 <span class="govuk-visually-hidden">{{ __p("fieldErrors.visuallyHiddenError") }}</span>
                                 {{ highlightErrorFields.email }}
-                                <span class="govuk-visually-hidden">{{ highlightErrorFields.email }}</span>
                               </p>
                             {% endif %}
 

From 09b28150fae1883f151a2dc633c35b185458c8e7 Mon Sep 17 00:00:00 2001
From: Hugo Jeffreys <hugo.jeffreys@digital.cabinet-office.gov.uk>
Date: Wed, 28 Aug 2024 10:00:26 +0100
Subject: [PATCH 3/3] Fix same error appearing multiple times

---
 .../javascripts/browsered/form-validation.js   |  8 +++++++-
 .../card-details-page-validation.test.cy.js    | 18 ++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/browsered/form-validation.js b/app/assets/javascripts/browsered/form-validation.js
index c579cf8a1..17bfb5b8f 100644
--- a/app/assets/javascripts/browsered/form-validation.js
+++ b/app/assets/javascripts/browsered/form-validation.js
@@ -125,7 +125,7 @@ var init = function () {
     var errorAnchor = document.createElement('a')
     errorAnchor.setAttribute('href', '#' + error.cssKey)
     errorAnchor.id = error.cssKey + '-error'
-    if(!document.getElementById(errorAnchor.id)){
+    if (!document.getElementById(errorAnchor.id)) {
       errorAnchor.innerText = error.value
       listElement.appendChild(errorAnchor)
       if (addType === 'append') {
@@ -192,8 +192,14 @@ var init = function () {
       if (isAnExpiryDateField) {
         expiryMonthElement.classList.remove(CSS_ERROR_CLASS)
         expiryYearElement.classList.remove(CSS_ERROR_CLASS)
+        if (document.getElementById('expiry-month-error')) {
+          document.getElementById('expiry-month-error').remove()
+        }
       } else {
         input.classList.remove(CSS_ERROR_CLASS)
+        if (document.getElementById(`${input.id}-error`)) {
+          document.getElementById(`${input.id}-error`).remove()
+        }
       }
     }
   }
diff --git a/test/cypress/integration/card/card-details-page-validation.test.cy.js b/test/cypress/integration/card/card-details-page-validation.test.cy.js
index 209da81e0..2f14830b1 100644
--- a/test/cypress/integration/card/card-details-page-validation.test.cy.js
+++ b/test/cypress/integration/card/card-details-page-validation.test.cy.js
@@ -81,4 +81,22 @@ describe('Card details page validation', () => {
     cy.get('[data-cy=expiry-month]').not('have.class', 'govuk-input--error')
     cy.get('[data-cy=expiry-year]').not('have.class', 'govuk-input--error')
   })
+
+  it('Should remove summary field errors after clicking out of a correctly validated field', () => {
+    cy.task('setupStubs', createPaymentChargeStubs)
+    cy.visit(`/secure/${tokenId}`)
+
+    cy.location('pathname').should('eq', `/card_details/${chargeId}`)
+    cy.window().its('chargeId').should('eq', `${chargeId}`)
+    
+    cy.get('[data-cy=cardholder-name]').invoke('val', '')
+    cy.get('#card-details').submit()
+    
+    cy.get('#cardholder-name-error').should('exist')
+
+    cy.get('[data-cy=cardholder-name]').clear().type('Jeff')
+    cy.get('[data-cy=expiry-month]').click()
+
+    cy.get('#cardholder-name-error').should('not.exist')
+  })
 })