diff --git a/app/assets/javascripts/templateFolderForm.js b/app/assets/javascripts/templateFolderForm.js
index 335a66115..744b0c4f6 100644
--- a/app/assets/javascripts/templateFolderForm.js
+++ b/app/assets/javascripts/templateFolderForm.js
@@ -43,7 +43,9 @@
     this.addCancelButton = function(state) {
       let $cancel =  $('<a></a>')
           .html('Cancel')
-          .click((event) => {
+          .attr('class', 'page-footer-js-cancel')
+          .attr('tabindex', '0')
+          .on('click keydown', (event) => {
             event.preventDefault();
             // clear existing data
             state.$el.find('input:radio').prop('checked', false);
diff --git a/app/assets/stylesheets/components/page-footer.scss b/app/assets/stylesheets/components/page-footer.scss
index d126068c5..d1076397a 100644
--- a/app/assets/stylesheets/components/page-footer.scss
+++ b/app/assets/stylesheets/components/page-footer.scss
@@ -86,3 +86,21 @@
   }
 
 }
+
+.page-footer-js-cancel {
+
+  text-decoration: underline;
+  color: $govuk-blue;
+  cursor: pointer;
+
+  &:hover {
+    color: $link-hover-colour;
+  }
+
+  &:focus,
+  &:active, {
+    background: $yellow;
+    color: $govuk-blue;
+    outline: 3px solid $yellow;
+  }
+}