CSR-222: revised button to be button markup, not link

src/ux-components/button-back/button-back.spec.js

@@ -3,19 +3,20 @@ import buttonBack from "./button-back";
 
 describe("back button", () => {
 
-  test("renders a link", () => {
+  test("renders a button", () => {
     // Arrange
+    const myFunction = () => {};
 
     // Act
     const wrapper = shallowMount(buttonBack, {
       propsData: {
-        backButtonUrl: "#",
+        backButtonAction: myFunction,
         backButtonAccessibleText: "something",
       },
     });
     
     // Assert
-    expect(wrapper.find("a").exists()).toBe(true);
+    expect(wrapper.find("button").exists()).toBe(true);
     wrapper.unmount();
   });
 
@@ -32,7 +33,7 @@ describe("back button", () => {
     });
     const handleClickMethod = jest.spyOn(wrapper.vm, "handleClick");
 
-    await wrapper.find("a").trigger("click");
+    await wrapper.find("button").trigger("click");
     
     // Assert
     expect(handleClickMethod).toHaveBeenCalled();

src/ux-components/button-back/button-back.vue

@@ -1,7 +1,6 @@
 <template>
-  <a 
-    v-if="backButtonUrl || backButtonAction" 
-    :href="backButtonUrl || '#'" 
+  <button 
+    v-if="backButtonAction" 
     @click="handleClick($event)" 
     class="back-button-wrapper d-flex p-0" 
     :aria-label="backButtonAccessibleText"
@@ -10,17 +9,13 @@
       <div class="arrow-left"></div>
       <div class="box"></div>
     </div>
-  </a>
+  </button>
 </template>
 
 <script>
 export default {
   name: "buttonBack",
   props: {
-    backButtonUrl: {
-      type: String,
-      default: "",
-    },
     backButtonAccessibleText: {
       type: String,
       required: true,
@@ -28,12 +23,12 @@ export default {
     backButtonAction: {
       type: Function,
       default: null,
+      required: true,
     }
   },
   methods: {
-    handleClick: function (event) {
+    handleClick: function () {
       if (this.backButtonAction) {
-        event.preventDefault();
         this.backButtonAction();
       }
     },