diff --git a/index.html b/index.html
index a888544898a5059056e4c148c28b2eabf4b2d67a..9c28756611925d2f6d4554b0c977e269adb56e40 100644
--- a/index.html
+++ b/index.html
@@ -1,8 +1,8 @@
<!DOCTYPE html>
-<html lang="en">
+<html lang="no">
<head>
<meta charset="UTF-8">
- <link rel="icon" href="/favicon.ico">
+ <link rel="icon" href="/pigIcon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
diff --git a/src/components/challenge/ActiveChallengeDisplay.vue b/src/components/challenge/ActiveChallengeDisplay.vue
index e523fc63cf791cf1fc9406f681c237d9f600c033..0af09d7737e481f324fb8fa01883270dd106969b 100644
--- a/src/components/challenge/ActiveChallengeDisplay.vue
+++ b/src/components/challenge/ActiveChallengeDisplay.vue
@@ -40,6 +40,8 @@ const deleteTheChallenge = () => {
<div class="potential-challenge-display">
<img
class="close-img"
+ tabindex="0"
+ @keyup.enter="deleteTheChallenge()"
src="/src/components/icons/navigation/close.svg"
alt="delete-button"
@click="deleteTheChallenge()">
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/FrontPage/LoginView.vue b/src/views/FrontPage/LoginView.vue
index 1c88f724af12c9b1b8f21efe30e188d89d1d8281..f95861ec8541cdbcfc7856d31316c565824dd929 100644
--- a/src/views/FrontPage/LoginView.vue
+++ b/src/views/FrontPage/LoginView.vue
@@ -43,6 +43,7 @@ async function login() {
<input id="PasswordField" type="password" placeholder="Skriv inn dit passord" v-model="password" data-testid="PasswordInput">
</div>
</div>
+
<button id="LogInButton"
@click="login"
:disabled="!username || password.length < 8"
@@ -50,7 +51,7 @@ async function login() {
data-testid="LogInButton">
LogIn
</button>
- <h2 @click="navigateToNewUser()" id="NewUser" data-testid="NewUserLink">Ny til Sparesti? Trykk her for å lage en profil!</h2>
+ <h2 tabindex="0" @keyup.enter="navigateToNewUser()" @click="navigateToNewUser()" id="NewUser" data-testid="NewUserLink">Ny til Sparesti? Trykk her for å lage en profil!</h2>
</div>
</template>
diff --git a/src/views/HomePage/ChallengeView.vue b/src/views/HomePage/ChallengeView.vue
index 1416fdad1eb37e8c71b713484faf2ae462a54506..ff172a1c4397cb82091f97a7279264a3246d97fb 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/CreateMilestoneView.vue b/src/views/HomePage/CreateMilestoneView.vue
index adbbea10e4dacffbae8472938a3aa5440de5c359..2369fc1f9579c90e87255aaec893d59b755df9e7 100644
--- a/src/views/HomePage/CreateMilestoneView.vue
+++ b/src/views/HomePage/CreateMilestoneView.vue
@@ -82,7 +82,13 @@ const handleFileChange = (event: any) => {
}
reader.readAsDataURL(file)
}
+const fileInput = ref<HTMLInputElement | null>(null);
+const openFileExplorer = () => {
+ if (fileInput.value instanceof HTMLInputElement) {
+ fileInput.value.click();
+ }
+};
</script>
<template>
@@ -156,12 +162,12 @@ const handleFileChange = (event: any) => {
<div class="image-container">
<label>Legg til et bilde</label>
<div class="add-image-box">
- <label>
+ <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">
<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/DiscoverView.vue b/src/views/HomePage/DiscoverView.vue
index 6211423835b4ea918a0a7db100cdc29c21ca2267..c7f219562b640af3dab7caded0b5438e5d43a360 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 60c24d391dff2a8b29d719b1151572522cf2c4ab..65ab83aa0e8037793dcd957b37fa4614231e4173 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 d138006f2e68d7b6f2b1cf6a79a35d44e0dd81e5..5a87f7da9232132439e621063f6a319da9536eef 100644
--- a/src/views/HomePage/EditMilestoneView.vue
+++ b/src/views/HomePage/EditMilestoneView.vue
@@ -105,6 +105,13 @@ const handleFileChange = (event: any) => {
reader.readAsDataURL(file)
}
+const fileInput = ref<HTMLInputElement | null>(null);
+
+const openFileExplorer = () => {
+ if (fileInput.value instanceof HTMLInputElement) {
+ fileInput.value.click();
+ }
+};
</script>
<template>
@@ -162,6 +169,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"
@@ -178,12 +186,12 @@ const handleFileChange = (event: any) => {
<div class="image-container">
<label>Legg til et bilde</label>
<div class="add-image-box">
- <label>
+ <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">
<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 282fab2832b99bfe216fcdb13292b49b6b79297a..9877cf7aa3cb29a783e0e840849eb4cfa1fc7444 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 7e651794ed51da6ddf401451818290bafdaad803..6ffa826a8a3f9c7f507ee0db79b94db8bd105e43 100644
--- a/src/views/HomePage/MilestonePathView.vue
+++ b/src/views/HomePage/MilestonePathView.vue
@@ -67,6 +67,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 b6b0c2195f379283fbfb6a9e69ea7c75008f50a6..dd090a985a6be7b5a1a7b8e335bfaeb491ab1324 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