From 68faf9c20109e059d19a6a4cb220c040dbf5134f Mon Sep 17 00:00:00 2001
From: jensmjahle <126790845+jensmjahle@users.noreply.github.com>
Date: Tue, 30 Apr 2024 10:21:58 +0200
Subject: [PATCH] Add tabindex to active and completed milestones

---
 src/components/milestone/ActiveMilestoneDisplay.vue    |  3 ++-
 src/components/milestone/CompletedMilestoneDisplay.vue |  2 +-
 src/components/milestone/MilestoneLogList.vue          |  1 +
 src/views/HomePage/EditMilestoneView.vue               | 10 +++++++++-
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/milestone/ActiveMilestoneDisplay.vue b/src/components/milestone/ActiveMilestoneDisplay.vue
index fe49971..a93769c 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 5875c9d..f5cc900 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 979b416..c042113 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 c1344ee..2189943 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">
-- 
GitLab