From a2a5336af237bd55edeb82d7b93cc4136cb88d2e Mon Sep 17 00:00:00 2001
From: IshavSohal <ishav.sohal@mail.utoronto.ca>
Date: Fri, 16 Aug 2024 16:26:17 -0400
Subject: [PATCH] fix accessibility errors

---
 src/components/dynamic-editor.vue           | 10 +++-
 src/components/editor.vue                   |  1 +
 src/components/helpers/chart-preview.vue    |  2 +
 src/components/helpers/custom-editor.vue    | 12 +++--
 src/components/helpers/image-preview.vue    |  1 +
 src/components/helpers/metadata-content.vue | 51 ++++++++++++++-------
 src/components/helpers/video-preview.vue    |  1 +
 src/components/image-editor.vue             | 24 ++++++++--
 src/components/map-editor.vue               | 14 ++++--
 src/components/metadata-editor.vue          |  5 +-
 src/components/slide-editor.vue             | 18 ++++++--
 src/components/slide-toc.vue                |  1 +
 src/components/slideshow-editor.vue         |  8 ++--
 src/components/text-editor.vue              |  4 +-
 src/components/video-editor.vue             | 15 ++++--
 15 files changed, 120 insertions(+), 47 deletions(-)

diff --git a/src/components/dynamic-editor.vue b/src/components/dynamic-editor.vue
index 9d2e6fd2..17d39588 100644
--- a/src/components/dynamic-editor.vue
+++ b/src/components/dynamic-editor.vue
@@ -50,7 +50,15 @@
                 </tr>
                 <tr class="table-add-row">
                     <th class="flex flex-col items-center">
-                        <input class="editor-input" type="text" placeholder="Enter Panel ID" v-model="newSlideName" />
+                        <label for="panelId"></label>
+                        <input
+                            id="panelId"
+                            class="editor-input"
+                            type="text"
+                            placeholder="Enter Panel ID"
+                            v-model="newSlideName"
+                            aria-label="Enter Panel ID"
+                        />
                         <p v-if="idUsed">{{ $t('dynamic.panel.idTaken') }}</p>
                     </th>
                     <th>
diff --git a/src/components/editor.vue b/src/components/editor.vue
index 1e23940b..b35fb27a 100644
--- a/src/components/editor.vue
+++ b/src/components/editor.vue
@@ -12,6 +12,7 @@
                         animateFill: true
                     }"
                     target
+                    :aria-label="$t('editor.returnToLanding')"
                 >
                     <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18.001" viewBox="0 0 18 18.001">
                         <path
diff --git a/src/components/helpers/chart-preview.vue b/src/components/helpers/chart-preview.vue
index d6b67581..f7d964a9 100644
--- a/src/components/helpers/chart-preview.vue
+++ b/src/components/helpers/chart-preview.vue
@@ -6,6 +6,7 @@
                 @click="() => $emit('delete', chart)"
                 :content="$t('editor.chart.delete')"
                 v-tippy="{ placement: 'top', hideOnClick: false, animateFill: true }"
+                :aria-label="$t('editor.chart.delete')"
             >
                 <svg
                     class="absolute transform -translate-x-1/2 -translate-y-1/2"
@@ -21,6 +22,7 @@
             </button>
             <button
                 class="editor-button bg-white absolute h-6 w-6 leading-5 rounded-full bottom-2 -right-1 p-0 z-10 handle"
+                :aria-label="$t('editor.chart.delete')"
             >
                 <svg xmlns="http://www.w3.org/2000/svg" fill="#000000" width="22px" height="22px" viewBox="0 0 24 24">
                     <path
diff --git a/src/components/helpers/custom-editor.vue b/src/components/helpers/custom-editor.vue
index da18a7b9..ee5d0f08 100644
--- a/src/components/helpers/custom-editor.vue
+++ b/src/components/helpers/custom-editor.vue
@@ -4,8 +4,8 @@
             class="w-full rounded-md bg-red-100 p-2 mb-3"
             :class="validatorErrors.length === 0 ? 'bg-green-200' : 'bg-red-100'"
         >
-            <span class="flex flex-row items-center" v-if="validatorErrors.length === 0"
-                ><svg
+            <span class="flex flex-row items-center" v-if="validatorErrors.length === 0">
+                <svg
                     version="1.1"
                     xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 1024 1024"
@@ -15,9 +15,11 @@
                     <path
                         fill="currentColor"
                         d="M512,72C269,72,72,269,72,512s197,440,440,440s440-197,440-440S755,72,512,72L512,72z M758.9,374 c-48.5,48.6-81.2,76.9-172.3,186.8c-52.6,63.4-102.3,131.5-102.7,132L462.1,720c-4.6,6.1-13.5,6.8-19.1,1.6L267.9,558.9 c-17.8-16.5-18.8-44.4-2.3-62.2s44.4-18.8,62.2-2.3l104.9,97.5c5.5,5.1,14.1,4.5,18.9-1.3c16.2-20.1,38.4-44.5,62.4-68.6 c90.2-90.9,145.6-139.7,175.2-161.3c36-26.2,77.3-48.6,87.3-36.2C792,343.9,782.5,350.3,758.9,374L758.9,374z"
-                    ></path></svg
-                >{{ $t('editor.slides.advanced.good') }}</span
-            >
+                    ></path>
+                </svg>
+                {{ $t('editor.slides.advanced.good') }}
+            </span>
+
             <span class="flex flex-row items-center" v-else>
                 <svg
                     version="1.1"
diff --git a/src/components/helpers/image-preview.vue b/src/components/helpers/image-preview.vue
index d8cc6094..5af6c819 100644
--- a/src/components/helpers/image-preview.vue
+++ b/src/components/helpers/image-preview.vue
@@ -6,6 +6,7 @@
                 @click="() => $emit('delete', imageFile)"
                 :content="$t('editor.image.delete')"
                 v-tippy="{ placement: 'top', hideOnClick: false, animateFill: true }"
+                :aria-label="$t('editor.image.delete')"
             >
                 <svg height="24px" width="24px" viewBox="0 0 352 512" xmlns="http://www.w3.org/2000/svg">
                     <path
diff --git a/src/components/helpers/metadata-content.vue b/src/components/helpers/metadata-content.vue
index d7c6853d..fac680fd 100644
--- a/src/components/helpers/metadata-content.vue
+++ b/src/components/helpers/metadata-content.vue
@@ -1,20 +1,29 @@
 <template>
     <div>
-        <label class="editor-label mb-5">{{ $t('editor.title') }}:</label>
-        <input type="text" name="title" :value="metadata.title" @change="metadataChanged" class="editor-input w-1/3" />
+        <label class="editor-label mb-5" for="metaTitle">{{ $t('editor.title') }}:</label>
+        <input
+            type="text"
+            name="title"
+            id="metaTitle"
+            :value="metadata.title"
+            @change="metadataChanged"
+            class="editor-input w-1/3"
+        />
         <br />
-        <label class="editor-label mb-5">{{ $t('editor.slides.title') }}:</label>
+        <label class="editor-label mb-5" for="introTitle">{{ $t('editor.slides.title') }}:</label>
         <input
             type="text"
             name="introTitle"
             :value="metadata.introTitle"
             @change="metadataChanged"
+            id="introTitle"
             class="editor-input w-1/4"
         />
-        <label class="editor-label mb-5">{{ $t('editor.slides.intro') }}:</label>
+        <label class="editor-label mb-5" for="introSubtitle">{{ $t('editor.slides.intro') }}:</label>
         <input
             type="text"
             name="introSubtitle"
+            id="introSubtitle"
             :value="metadata.introSubtitle"
             @change="metadataChanged"
             class="editor-input w-1/4"
@@ -27,21 +36,25 @@
                 :src="metadata.logoPreview"
                 v-if="!!metadata.logoPreview && metadata.logoPreview != 'error'"
                 class="image-preview"
+                alt="preview of product logo"
             />
             <p v-if="metadata.logoPreview == 'error'" class="image-preview">
                 {{ $t('editor.image.loadingError') }}
             </p>
         </div>
-        <label class="editor-label mb-5">{{ $t('editor.logo') }}:</label>
+        <label class="editor-label mb-5" for="metaLogo">{{ $t('editor.logo') }}:</label>
         <input
             type="text"
+            id="metaLogo"
             @change="$emit('logo-source-changed', $event)"
             :value="metadata.logoName"
             class="editor-input w-1/4"
         />
-        <button @click.stop="openFileSelector" class="editor-button bg-black text-white hover:bg-gray-800">
-            {{ $t('editor.browse') }}
-        </button>
+        <label for="logoUpload">
+            <button @click.stop="openFileSelector" class="editor-button bg-black text-white hover:bg-gray-800">
+                {{ $t('editor.browse') }}
+            </button>
+        </label>
         <button
             v-if="metadata.logoName || metadata.logoPreview"
             @click.stop="removeLogo"
@@ -58,53 +71,56 @@
             style="display: none"
         />
         <br />
-        <label class="editor-label">{{ $t('editor.logoAltText') }}:</label>
+        <label class="editor-label" for="logoAltText">{{ $t('editor.logoAltText') }}:</label>
         <input
             type="text"
             name="logoAltText"
+            id="logoAltText"
             :value="metadata.logoAltText"
             @change="metadataChanged"
             class="editor-input w-2/3"
         />
         <br />
-        <label class="editor-label mb-5"></label>
+        <div class="editor-label mb-5"></div>
         <p class="inline-block">
             <i>
                 {{ $t('editor.logoAltText.desc') }}
             </i>
         </p>
         <br />
-        <label class="editor-label">{{ $t('editor.contextLink') }}:</label>
+        <label class="editor-label" for="contextLink">{{ $t('editor.contextLink') }}:</label>
         <input
             type="text"
             name="contextLink"
+            id="contextLink"
             :value="metadata.contextLink"
             @change="metadataChanged"
             class="editor-input w-2/3"
         />
         <br />
-        <label class="editor-label mb-5"></label>
+        <div class="editor-label mb-5"></div>
         <p class="inline-block">
             <i>
                 {{ $t('editor.contextLink.info') }}
             </i>
         </p>
         <br />
-        <label class="editor-label">{{ $t('editor.contextLabel') }}:</label>
+        <label class="editor-label" for="contextLabel">{{ $t('editor.contextLabel') }}:</label>
         <input
             type="text"
             name="contextLabel"
+            id="contextLabel"
             :value="metadata.contextLabel"
             @change="metadataChanged"
             class="editor-input w-2/3"
         />
         <br />
-        <label class="editor-label mb-5"></label>
+        <div class="editor-label mb-5"></div>
         <p class="inline-block">
             <i> {{ $t('editor.contextLabel.info') }}</i>
         </p>
         <br />
-        <label class="editor-label mr-15">{{ $t('editor.tocOrientation') }}:</label>
+        <label class="editor-label mr-15" for="toc">{{ $t('editor.tocOrientation') }}:</label>
         <select
             class="border-solid border border-black p-1"
             name="tocOrientation"
@@ -116,16 +132,17 @@
             <option value="horizontal">{{ $t('editor.tocOrientation.horizontal') }}</option>
         </select>
         <br />
-        <label class="editor-label mb-5"></label>
+        <div class="editor-label mb-5"></div>
         <p class="inline-block">
             <i>{{ $t('editor.tocOrientation.info') }}</i>
         </p>
         <br />
-        <label class="editor-label mb-5">{{ $t('editor.dateModified') }}:</label>
+        <label class="editor-label mb-5" for="dateModified">{{ $t('editor.dateModified') }}:</label>
         <input
             class="editor-input"
             type="date"
             name="dateModified"
+            id="dateModified"
             :value="metadata.dateModified"
             @change="metadataChanged"
         />
diff --git a/src/components/helpers/video-preview.vue b/src/components/helpers/video-preview.vue
index 581236b3..43994d46 100644
--- a/src/components/helpers/video-preview.vue
+++ b/src/components/helpers/video-preview.vue
@@ -6,6 +6,7 @@
                 @click="() => $emit('delete', file)"
                 :content="$t('editor.video.delete')"
                 v-tippy="{ placement: 'top', hideOnClick: false, animateFill: true }"
+                :aria-label="$t('editor.video.delete')"
             >
                 <svg height="24px" width="24px" viewBox="0 0 352 512" xmlns="http://www.w3.org/2000/svg">
                     <path
diff --git a/src/components/image-editor.vue b/src/components/image-editor.vue
index 6d30756a..c6f34737 100644
--- a/src/components/image-editor.vue
+++ b/src/components/image-editor.vue
@@ -22,7 +22,7 @@
                         <div>{{ $t('editor.image.label.drag') }}</div>
                         <div>
                             {{ $t('editor.label.or') }}
-                            <span class="text-blue-400 font-bold">{{ $t('editor.label.browse') }}</span>
+                            <span class="text-blue-700 font-bold">{{ $t('editor.label.browse') }}</span>
                             {{ $t('editor.label.upload') }}
                         </div>
                     </span>
@@ -50,8 +50,11 @@
             <template #item="{ element, index }">
                 <ImagePreview :key="`${element.id}-${index}`" :imageFile="element" @delete="deleteImage">
                     <div class="flex mt-4 items-center w-full text-left">
-                        <label class="editor-label text-label">{{ $t('editor.image.altTag') }}:</label>
+                        <label class="editor-label text-label" :for="'altTag' + index"
+                            >{{ $t('editor.image.altTag') }}:</label
+                        >
                         <input
+                            :id="'altTag' + index"
                             class="editor-input w-4/5"
                             type="text"
                             v-model="element.altText"
@@ -60,8 +63,11 @@
                     </div>
 
                     <div class="flex mt-4 items-center w-full text-left">
-                        <label class="editor-label text-label">{{ $t('editor.image.label.caption') }}:</label>
+                        <label class="editor-label text-label" :for="'imgCaption' + index"
+                            >{{ $t('editor.image.label.caption') }}:</label
+                        >
                         <input
+                            :id="'imgCaption' + index"
                             class="editor-input w-4/5"
                             type="text"
                             v-model="element.caption"
@@ -73,8 +79,16 @@
         </draggable>
 
         <div v-show="imagePreviews.length > 1" class="flex items-center w-full text-left">
-            <label class="editor-label text-label">{{ $t('editor.image.slideshowCaption') }}:</label>
-            <input class="editor-input w-3/5" type="text" v-model="slideshowCaption" @change="onImagesEdited" />
+            <label class="editor-label text-label" for="imageSlideshowCaption"
+                >{{ $t('editor.image.slideshowCaption') }}:</label
+            >
+            <input
+                id="imageSlideshowCaption"
+                class="editor-input w-3/5"
+                type="text"
+                v-model="slideshowCaption"
+                @change="onImagesEdited"
+            />
         </div>
     </div>
 </template>
diff --git a/src/components/map-editor.vue b/src/components/map-editor.vue
index 87e4ac7a..1b2fba35 100644
--- a/src/components/map-editor.vue
+++ b/src/components/map-editor.vue
@@ -1,11 +1,17 @@
 <template>
     <div class="flex flex-col">
-        <label class="editor-label text-left">{{ $t('editor.map.title') }}:</label>
-        <input class="editor-input" type="text" v-model="panel.title" />
+        <label class="editor-label text-left" for="mapTitle">{{ $t('editor.map.title') }}:</label>
+        <input class="editor-input" type="text" id="mapTitle" v-model="panel.title" />
 
         <div>
-            <label class="editor-label mt-6">{{ $t('editor.map.timeslider.enable') }}</label>
-            <input class="editor-input" type="checkbox" @change="saveTimeSlider" v-model="usingTimeSlider" />
+            <label class="editor-label mt-6" for="timeSliderToggle">{{ $t('editor.map.timeslider.enable') }}</label>
+            <input
+                class="editor-input"
+                type="checkbox"
+                id="timeSliderToggle"
+                @change="saveTimeSlider"
+                v-model="usingTimeSlider"
+            />
             <span class="mx-4"></span>
             <button
                 v-if="usingTimeSlider"
diff --git a/src/components/metadata-editor.vue b/src/components/metadata-editor.vue
index 24f3a035..3e6145ba 100644
--- a/src/components/metadata-editor.vue
+++ b/src/components/metadata-editor.vue
@@ -39,14 +39,15 @@
                         </div>
                     </div>
                     <div v-else class="flex flex-row items-center">
-                        <label class="editor-label">
-                            <span class="text-red-500" v-if="'uuid' in reqFields">*</span>
+                        <label class="editor-label" for="uuid">
+                            <span class="text-red-600" v-if="'uuid' in reqFields">*</span>
                             {{ $t('editor.uuid') }}:
                         </label>
                         <div class="relative w-1/3 inline-block">
                             <input
                                 class="editor-input w-full mt-0"
                                 type="text"
+                                id="uuid"
                                 @input="
                                     error = false;
                                     reqFields.uuid = true;
diff --git a/src/components/slide-editor.vue b/src/components/slide-editor.vue
index 81fe7e67..f63c832d 100644
--- a/src/components/slide-editor.vue
+++ b/src/components/slide-editor.vue
@@ -3,10 +3,11 @@
         <div v-if="!!currentSlide">
             <div class="flex">
                 <div class="flex flex-col w-full">
-                    <label class="editor-label">Slide title:</label>
+                    <label class="editor-label" for="slideTitle">Slide title:</label>
                     <div class="flex">
                         <input
                             type="text"
+                            id="slideTitle"
                             v-model="currentSlide.title"
                             placeholder="Add a title"
                             class="editor-input w-2/3"
@@ -28,25 +29,34 @@
                         </button>
                     </div>
                     <div class="flex mt-3">
-                        <span class="mx-2 font-bold">{{ $t('editor.slides.makeFull') }}</span>
+                        <label class="ml-0" for="fullSlide">
+                            <span class="mr-2 font-bold">{{ $t('editor.slides.makeFull') }}</span>
+                        </label>
                         <input
                             type="checkbox"
+                            id="fullSlide"
                             class="editor-input rounded-none cursor-pointer w-4 h-4"
                             v-model="rightOnly"
                             :disabled="rightOnly && determineEditorType(currentSlide.panel[panelIndex]) === 'dynamic'"
                             @change.stop="$vfm.open(`right-only-${slideIndex}`)"
                         />
-                        <span class="mx-2 font-bold">{{ $t('editor.slides.centerSlide') }}</span>
+                        <label class="ml-0" for="centerSlide">
+                            <span class="mr-2 font-bold">{{ $t('editor.slides.centerSlide') }}</span>
+                        </label>
                         <input
                             type="checkbox"
+                            id="centerSlide"
                             class="editor-input rounded-none cursor-pointer w-4 h-4"
                             v-model="centerSlide"
                             :disabled="centerPanel"
                             @change.stop="toggleCenterSlide()"
                         />
-                        <span class="mx-2 font-bold">{{ $t('editor.slides.centerPanel') }}</span>
+                        <label class="ml-0" for="centerPanel">
+                            <span class="mr-2 font-bold">{{ $t('editor.slides.centerPanel') }}</span>
+                        </label>
                         <input
                             type="checkbox"
+                            id="centerPanel"
                             class="editor-input rounded-none cursor-pointer w-4 h-4"
                             v-model="centerPanel"
                             :disabled="centerSlide"
diff --git a/src/components/slide-toc.vue b/src/components/slide-toc.vue
index c86fefe1..b69af6ec 100644
--- a/src/components/slide-toc.vue
+++ b/src/components/slide-toc.vue
@@ -21,6 +21,7 @@
                     content: $t('editor.slides.copyFromLang'),
                     animateFill: true
                 }"
+                :aria-label="$t('editor.slides.copyFromLang')"
             >
                 <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24">
                     <path
diff --git a/src/components/slideshow-editor.vue b/src/components/slideshow-editor.vue
index 2f50dcc5..a0fbf723 100644
--- a/src/components/slideshow-editor.vue
+++ b/src/components/slideshow-editor.vue
@@ -44,13 +44,15 @@
         <hr class="border-solid border-t-2 border-gray-300 my-2" />
         <!-- Metadata Editor -->
         <div class="flex items-center w-full text-left">
-            <label class="editor-label text-label">{{ $t('editor.image.slideshowCaption') }}:</label>
-            <input class="editor-input w-1/3" type="text" v-model="panel.caption" /><br />
+            <label class="editor-label text-label" for="slideshowCaption"
+                >{{ $t('editor.image.slideshowCaption') }}:</label
+            >
+            <input id="slideshowCaption" class="editor-input w-1/3" type="text" v-model="panel.caption" /><br />
         </div>
         <table class="w-2/3 mt-5">
             <thead>
                 <tr class="table-header">
-                    <th></th>
+                    <th aria-label="slide number"></th>
                     <th>{{ $t('editor.slideshow.label.type') }}</th>
                     <th>{{ $t('dynamic.panel.actions') }}</th>
                 </tr>
diff --git a/src/components/text-editor.vue b/src/components/text-editor.vue
index 72109c34..5cf68cdf 100644
--- a/src/components/text-editor.vue
+++ b/src/components/text-editor.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="flex flex-col mt-4">
-        <label class="editor-label text-left">{{ $t('editor.slides.panel.title') }}:</label>
-        <input class="editor-input" type="text" v-model="panel.title" />
+        <label class="editor-label text-left" for="panelTitle">{{ $t('editor.slides.panel.title') }}:</label>
+        <input class="editor-input" type="text" id="panelTitle" v-model="panel.title" />
         <label class="editor-label text-left mt-2">{{ $t('editor.slides.panel.body') }}:</label>
         <v-md-editor
             v-model="panel.content"
diff --git a/src/components/video-editor.vue b/src/components/video-editor.vue
index 7baf03b8..9e4328af 100644
--- a/src/components/video-editor.vue
+++ b/src/components/video-editor.vue
@@ -2,8 +2,14 @@
     <div class="block">
         <!-- Upload video area -->
         <div class="flex mt-4 items-center w-full text-left">
-            <label class="editor-label text-label">{{ $t('editor.video.title') }}:</label>
-            <input class="editor-input w-3/5" type="text" v-model="videoPreview.title" @change="onVideoEdited" />
+            <label class="editor-label text-label" for="videoTitle">{{ $t('editor.video.title') }}:</label>
+            <input
+                id="videoTitle"
+                class="editor-input w-3/5"
+                type="text"
+                v-model="videoPreview.title"
+                @change="onVideoEdited"
+            />
         </div>
 
         <!-- Option 1: upload video file -->
@@ -28,7 +34,7 @@
                         <div>{{ $t('editor.video.label.drag') }}</div>
                         <div>
                             {{ $t('editor.label.or') }}
-                            <span class="text-blue-400 font-bold">{{ $t('editor.label.browse') }}</span>
+                            <span class="text-blue-700 font-bold">{{ $t('editor.label.browse') }}</span>
                             {{ $t('editor.label.upload') }}
                         </div>
                     </span>
@@ -39,11 +45,12 @@
 
         <!-- Option 2: provide URL to external or YT link -->
         <div class="flex mt-4 items-center w-full text-left">
-            <label class="editor-label text-label"
+            <label class="editor-label text-label" for="videoURL"
                 >{{ $t('editor.label.or') + ' ' + $t('editor.video.pasteUrl') }}:</label
             >
             <input
                 ref="videoUrl"
+                id="videoURL"
                 class="editor-input w-3/5"
                 type="search"
                 v-model="videoPreview.src"