Add tabindex to active and completed milestones

src/components/milestone/ActiveMilestoneDisplay.vue

@@ -46,7 +46,8 @@ const isToExpire = () => {
 </script>
 
 <template>
-<div class="active-milestone-display" @click="openMilestone">
+<div class="active-milestone-display" @click="openMilestone"  @keyup.enter="openMilestone"
+     tabindex="0">
   <h2 class="title" :class="{'expire': isToExpire()}">{{props.title}}</h2>
   <div class="img">
     <img src="/src/assets/background/img.png" alt="milestone-img" class="milestone-img">

src/components/milestone/CompletedMilestoneDisplay.vue

@@ -15,7 +15,7 @@ const props = defineProps({
 </script>
 
 <template>
-<div class="completed-milestone-display">
+<div class="completed-milestone-display" tabindex="0">
   <h2 class="title">{{props.title}}</h2>
   <div class="center-content">
     <div class="img">

src/components/milestone/MilestoneLogList.vue

@@ -82,6 +82,7 @@ const toggleMilestoneHeight = (id: number) => {
         :image="completedMilestone.milestoneImage"
         :expanded="expandedMileStoneId == completedMilestone.milestoneId"
         @click="toggleMilestoneHeight(completedMilestone.milestoneId)"
+        @keyup.enter="toggleMilestoneHeight(completedMilestone.milestoneId)"
       ></CompletedMilestoneDisplay>
       <h4 class="milestone-placeholder" v-if="completedMilestones.length == 0">
         Du har ingen fullførte sparemål

src/views/HomePage/EditMilestoneView.vue

@@ -105,6 +105,14 @@ const handleFileChange = (event: any) => {
   reader.readAsDataURL(file)
 }
 
+const fileInput = ref(null);
+
+const openFileExplorer = () => {
+  if (fileInput.value) {
+    fileInput.value.click();
+  }
+};
+
 </script>
 
 <template>
@@ -179,7 +187,7 @@ const handleFileChange = (event: any) => {
     <div class="image-container">
       <label>Legg til et bilde</label>
       <div class="add-image-box">
-        <button>
+        <button @click="openFileExplorer" tabindex="0" type="button">
           <input type="file" style="display: none" ref="fileInput" accept="image/png, image/jpeg"
                  @change="handleFileChange">
           <img v-if="image" :src="image" id="literal-image" alt="Selected Image" width="150px" height="150px">