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

@@ -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";

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>

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>

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')
   })
 })

test/test-helpers/html-assertions.js

@@ -93,6 +93,11 @@ chai.use(function (_chai, utils) {
     utils.flag(this, 'inputFieldId', id)
   })
 
+  chai.Assertion.addMethod('containButtonWithIdAndName', function (id, name, type) {
+    this.containSelector('button#' + id).withAttributes({ name: name, type: type })
+    utils.flag(this, 'buttonId', id)
+  })
+
   chai.Assertion.addMethod('withLabel', function (labelId, labelText) {
     const inputFieldId = utils.flag(this, 'inputFieldId')
     const subAssertion = new chai.Assertion(utils.flag(this, 'rawHtml'))