Merge branch 'wcag-improvements' into 'master'

Wcag improvements See merge request !73

Merge branch 'wcag-improvements' into 'master'
69fa068e · Torbjørn Antonsen · 89b681a6 · 952e9c38 · 69fa068e · 69fa068e
Commit 69fa068e authored 10 months ago by Torbjørn Antonsen
--- a/index.html
+++ b/index.html
 <!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>

--- 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()">

--- 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">

--- 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">

--- 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

--- 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>


--- 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

--- 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>-->

--- 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

--- 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

--- 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>-->

--- 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

--- 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

--- 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