From d0f16279878a7b9388e3b8648e4cc100b59d8243 Mon Sep 17 00:00:00 2001
From: Iqbal Ahmed <iqbal.ahmed@digital.cabinet-office.gov.uk>
Date: Thu, 24 Oct 2024 11:05:22 +0100
Subject: [PATCH] PP-11883 Update cancel link to be a button

- The cancel link on the payment and confirm pages appears like a link but is semantically a button.
- This can cause confusion for users using assitive tech.
- This PR changes the link so that it is a secondary action button.
- Also got rid of SASS that is no longer required.
---
 app/assets/sass/application.scss           |  1 -
 app/assets/sass/modules/_button-reset.scss | 26 ----------------------
 app/views/charge.njk                       |  9 +++++++-
 app/views/confirm.njk                      |  9 +++++++-
 test/charge-ui.test.js                     |  2 +-
 5 files changed, 17 insertions(+), 30 deletions(-)
 delete mode 100644 app/assets/sass/modules/_button-reset.scss

diff --git a/app/assets/sass/application.scss b/app/assets/sass/application.scss
index 2a3328460..319da2a58 100644
--- a/app/assets/sass/application.scss
+++ b/app/assets/sass/application.scss
@@ -4,7 +4,6 @@
 @import "modules/3ds";
 @import "modules/accepted-cards";
 @import "modules/accessible-autocomplete";
-@import "modules/button-reset";
 @import "modules/cvc";
 @import "modules/expiry-date-separator";
 @import "modules/input-confirm";
diff --git a/app/assets/sass/modules/_button-reset.scss b/app/assets/sass/modules/_button-reset.scss
deleted file mode 100644
index d7eba6966..000000000
--- a/app/assets/sass/modules/_button-reset.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-.button-reset {
-  @include govuk-font($size: 19);
-  display: inline;
-  margin: govuk-spacing(2) 0 0 2px;
-  padding: 0;
-  border: 0;
-  outline: 0;
-  outline-offset: 0;
-  color: $govuk-link-colour;
-  background: 0 0;
-  text-decoration: underline;
-  font-size: 19px;
-  cursor: pointer;
-
-  &:hover {
-    color: $govuk-link-hover-colour;
-  }
-
-  &:focus {
-    @include govuk-focused-text;
-  }
-}
-
-.pay-button--custom {
-  padding: govuk-spacing(1) govuk-spacing(3) 1px;
-}
diff --git a/app/views/charge.njk b/app/views/charge.njk
index 83a774bf9..2b72de0fd 100644
--- a/app/views/charge.njk
+++ b/app/views/charge.njk
@@ -628,7 +628,14 @@
               </form>
               <form id="cancel" name="cancel" method="POST" action="{{ post_cancel_action }}" class="form" novalidate>
                 <div>
-                  <input id="cancel-payment" type="submit" class="button-reset" value="{{ __p("commonButtons.cancelButton") }}" name="cancel">
+                  {{ govukButton({
+                    text: __p("commonButtons.cancelButton"),
+                    classes: "govuk-button--secondary",
+                    attributes: {
+                      id: "cancel-payment",
+                      name: "cancel"
+                    }
+                  }) }}
                   <input id="csrf2" name="csrfToken" type="hidden" value="{{ csrf }}"/>
                 </div>
               </form>
diff --git a/app/views/confirm.njk b/app/views/confirm.njk
index b66bcb1b4..3497e40c0 100644
--- a/app/views/confirm.njk
+++ b/app/views/confirm.njk
@@ -134,7 +134,14 @@
 
           <form id="cancel" name="cancel" method="POST" action="{{ post_cancel_action }}" class="form" novalidate>
             <div>
-              <input id="cancel-payment" type="submit" class="button-reset" value="{{ __p("commonButtons.cancelButton") }}" name="cancel">
+              {{ govukButton({
+                text: __p("commonButtons.cancelButton"),
+                classes: "govuk-button--secondary",
+                attributes: {
+                  id: "cancel-payment",
+                  name: "cancel"
+                }
+              }) }}
               <input id="csrf2" name="csrfToken" type="hidden" value="{{ csrf }}"/>
             </div>
           </form>
diff --git a/test/charge-ui.test.js b/test/charge-ui.test.js
index 0734e9a79..a35b3ae8d 100644
--- a/test/charge-ui.test.js
+++ b/test/charge-ui.test.js
@@ -179,6 +179,6 @@ describe('The confirm view', function () {
 
   it('should have a \'Cancel\' button.', function () {
     const body = renderTemplate('charge', {})
-    body.should.containInputWithIdAndName('cancel-payment', 'cancel', 'submit')
+    body.should.containButtonWithIdAndName('cancel-payment', 'cancel', 'submit')
   })
 })