Skip to content

Commit

Permalink
PP-11883 Update cancel link to be a button
Browse files Browse the repository at this point in the history
- 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.
  • Loading branch information
iqbalgds committed Oct 24, 2024
1 parent 037c6d9 commit d0f1627
Show file tree
Hide file tree
Showing 5 changed files with 17 additions and 30 deletions.
1 change: 0 additions & 1 deletion app/assets/sass/application.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
26 changes: 0 additions & 26 deletions app/assets/sass/modules/_button-reset.scss

This file was deleted.

9 changes: 8 additions & 1 deletion app/views/charge.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
9 changes: 8 additions & 1 deletion app/views/confirm.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion test/charge-ui.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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')
})
})

0 comments on commit d0f1627

Please sign in to comment.