From 590be9b7990707c2d3b69dd80779591d0bac6614 Mon Sep 17 00:00:00 2001
From: jensmjahle <126790845+jensmjahle@users.noreply.github.com>
Date: Mon, 29 Apr 2024 14:28:53 +0200
Subject: [PATCH] Add tab and enter controls for help icons

---
 src/views/HomePage/ChallengeView.vue     | 2 ++
 src/views/HomePage/DiscoverView.vue      | 2 ++
 src/views/HomePage/EconomyView.vue       | 2 ++
 src/views/HomePage/EditMilestoneView.vue | 5 +++--
 src/views/HomePage/HomeView.vue          | 2 ++
 src/views/HomePage/MilestonePathView.vue | 2 ++
 src/views/HomePage/MilestoneView.vue     | 2 ++
 7 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/views/HomePage/ChallengeView.vue b/src/views/HomePage/ChallengeView.vue
index 4f50bdc..f93052d 100644
--- a/src/views/HomePage/ChallengeView.vue
+++ b/src/views/HomePage/ChallengeView.vue
@@ -37,6 +37,8 @@ const closeHelpPopUp = async () => {
         src="/src/components/icons/navigation/help.svg"
         alt="hjelp"
         @click="openHelpPopUp"
+        tabindex="0"
+        @keyup.enter="openHelpPopUp"
         class="help-icon">
       <div v-if="displayHelpPopUp" class="popup-container">
         <ChallengeHelpPopUp
diff --git a/src/views/HomePage/DiscoverView.vue b/src/views/HomePage/DiscoverView.vue
index dc6da0a..e8fd9e7 100644
--- a/src/views/HomePage/DiscoverView.vue
+++ b/src/views/HomePage/DiscoverView.vue
@@ -48,6 +48,8 @@ onMounted(async () => {
         src="/src/components/icons/navigation/help.svg"
         alt="hjelp"
         @click="openHelpPopUp"
+        tabindex="0"
+        @keyup.enter="openHelpPopUp"
         class="help-icon">
       <div v-if="displayHelpPopUp" class="popup-container">
         <DicoverHelpPopUp
diff --git a/src/views/HomePage/EconomyView.vue b/src/views/HomePage/EconomyView.vue
index e27f83b..0803402 100644
--- a/src/views/HomePage/EconomyView.vue
+++ b/src/views/HomePage/EconomyView.vue
@@ -158,6 +158,8 @@ const getRandomColor = () => {
         src="/src/components/icons/navigation/help.svg"
         alt="hjelp"
         @click="openHelpPopUp"
+        tabindex="0"
+        @keyup.enter="openHelpPopUp"
         class="help-icon">
       <div v-if="displayHelpPopUp" class="popup-container">
         <EconomyHelpPopUp
diff --git a/src/views/HomePage/EditMilestoneView.vue b/src/views/HomePage/EditMilestoneView.vue
index f17e689..8ef3fa3 100644
--- a/src/views/HomePage/EditMilestoneView.vue
+++ b/src/views/HomePage/EditMilestoneView.vue
@@ -161,6 +161,7 @@ const handleFileChange = (event: any) => {
           <label>Sett slutt dato</label>
           <VueDatePicker
             :enable-time-picker="false"
+            tabindex="0"
             placeholder="Velg slutt dato"
             v-model="end_date"
             :min-date="start_date"
@@ -177,12 +178,12 @@ const handleFileChange = (event: any) => {
     <div class="image-container">
       <label>Legg til et bilde</label>
       <div class="add-image-box">
-        <label>
+        <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">
           <img v-else src="../../components/icons/image/AddImage.png" alt="Add Image" width="50px" height="50px">
-        </label>
+        </button>
       </div>
       <!--        <div class="existing-pictures">-->
       <!--          <div class="existing-image-box"></div>-->
diff --git a/src/views/HomePage/HomeView.vue b/src/views/HomePage/HomeView.vue
index f23384e..8af2f93 100644
--- a/src/views/HomePage/HomeView.vue
+++ b/src/views/HomePage/HomeView.vue
@@ -45,6 +45,8 @@ userSavings()
         src="/src/components/icons/navigation/help.svg"
         alt="hjelp"
         @click="openHelpPopUp"
+        tabindex="0"
+        @keyup.enter="openHelpPopUp"
         class="help-icon">
       <div v-if="displayHelpPopUp" class="popup-container">
         <HomeHelpPopUp
diff --git a/src/views/HomePage/MilestonePathView.vue b/src/views/HomePage/MilestonePathView.vue
index 00b683c..f6ca123 100644
--- a/src/views/HomePage/MilestonePathView.vue
+++ b/src/views/HomePage/MilestonePathView.vue
@@ -65,6 +65,8 @@ const closeHelpPopUp = async () => {
         src="/src/components/icons/navigation/help.svg"
         alt="hjelp"
         @click="openHelpPopUp"
+        tabindex="0"
+        @keyup.enter="openHelpPopUp"
         class="help-icon">
       <div v-if="displayHelpPopUp" class="popup-container">
         <PathHelpPopUp
diff --git a/src/views/HomePage/MilestoneView.vue b/src/views/HomePage/MilestoneView.vue
index 9c2f496..1566021 100644
--- a/src/views/HomePage/MilestoneView.vue
+++ b/src/views/HomePage/MilestoneView.vue
@@ -37,6 +37,8 @@ const closeHelpPopUp = () => {
         src="/src/components/icons/navigation/help.svg"
         alt="hjelp"
         @click="openHelpPopUp"
+        tabindex="0"
+        @keyup.enter="openHelpPopUp"
         class="help-icon">
       <div v-if="displayHelpPopUp" class="popup-container">
         <MilestoneHelpPopUp
-- 
GitLab