fix accessibility errors, replace plain text with language labels

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="$t('dynamic.panel.enterID')"
+                            v-model="newSlideName"
+                            :aria-label="$t('dynamic.panel.enterID')"
+                        />
                         <p v-if="idUsed">{{ $t('dynamic.panel.idTaken') }}</p>
                     </th>
                     <th>

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

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

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"

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

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

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

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>

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"

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;

src/components/slide-editor.vue

@@ -3,12 +3,13 @@
         <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">{{ $t('editor.slides.slideTitle') }}:</label>
                     <div class="flex">
                         <input
                             type="text"
+                            id="slideTitle"
                             v-model="currentSlide.title"
-                            placeholder="Add a title"
+                            :placeholder="$t('editor.slides.addSlideTitle')"
                             class="editor-input w-2/3"
                         />
                         <span class="ml-auto"></span>
@@ -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"

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
@@ -87,7 +88,9 @@
                     >
                         <div class="self-center overflow-ellipsis whitespace-nowrap overflow-hidden flex-grow ml-2">
                             {{ $t('editor.slides.slide') }} {{ index + 1 }}:
-                            <span class="font-bold overflow-hidden">{{ element.title || 'Add a title' }}</span>
+                            <span class="font-bold overflow-hidden">{{
+                                element.title || $t('editor.slides.addSlideTitle')
+                            }}</span>
                         </div>
                         <div class="flex">
                             <div class="flex flex-col">