diff --git a/src/components/milestone/ActiveMilestoneDisplay.vue b/src/components/milestone/ActiveMilestoneDisplay.vue index fe49971453bc3bb340c00adf995707e82825046f..a93769c1d08775a7bbb5a858bc705023b023f42f 100644 --- a/src/components/milestone/ActiveMilestoneDisplay.vue +++ b/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"> diff --git a/src/components/milestone/CompletedMilestoneDisplay.vue b/src/components/milestone/CompletedMilestoneDisplay.vue index 5875c9da39b75fab00fe7e1775c2de2b64ee73b0..f5cc9003a6fc729bf6efa2cdfeee587f5a6476cd 100644 --- a/src/components/milestone/CompletedMilestoneDisplay.vue +++ b/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"> diff --git a/src/components/milestone/MilestoneLogList.vue b/src/components/milestone/MilestoneLogList.vue index 979b416a877bd7b432f56741b9a1f8c39499d899..c04211339b8a87cf574a00caa6702388f4807eca 100644 --- a/src/components/milestone/MilestoneLogList.vue +++ b/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 diff --git a/src/views/HomePage/EditMilestoneView.vue b/src/views/HomePage/EditMilestoneView.vue index c1344eeba6401d8c8a67babfddda6cf1e96f7977..2189943e2e418b0e0fad04852a32a5bcacd6c67a 100644 --- a/src/views/HomePage/EditMilestoneView.vue +++ b/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">