Style cancel link and make it keyboard navigable

So that it looks and behaves like a normal link.

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);

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;
+  }
+}