Various accessibility improvements

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Event/EventListViewCard.vue

@@ -12,7 +12,7 @@
             <h2 class="title">{{ event.title }}</h2>
           </router-link>
         </div>
-        <div class="participation-actor has-text-grey">
+        <div class="participation-actor has-text-grey-dark">
           <span v-if="event.physicalAddress && event.physicalAddress.locality">
             {{ event.physicalAddress.locality }}
           </span>

js/src/components/Event/EventMetadataItem.vue

@@ -9,6 +9,7 @@
           :src="`/img/${metadataItem.icon.substring(8)}_monochrome.svg`"
           width="24"
           height="24"
+          alt=""
         />
 
         <b-icon v-else-if="metadataItem.icon" :icon="metadataItem.icon" />

js/src/components/Event/EventMetadataList.vue

@@ -9,7 +9,11 @@
         />
       </div>
     </div>
-    <b-field grouped :label="$t('Find or add an element')">
+    <b-field
+      grouped
+      :label="$t('Find or add an element')"
+      label-for="event-metadata-autocomplete"
+    >
       <b-autocomplete
         expanded
         v-model="search"
@@ -19,6 +23,7 @@
         group-options="items"
         open-on-focus
         :placeholder="$t('e.g. Accessibility, Twitch, PeerTube')"
+        id="event-metadata-autocomplete"
         @select="(option) => addElement(option)"
       >
         <template slot-scope="props">
@@ -32,6 +37,7 @@
                 :src="`/img/${props.option.icon.substring(8)}_monochrome.svg`"
                 width="24"
                 height="24"
+                alt=""
               />
               <b-icon v-else-if="props.option.icon" :icon="props.option.icon" />
               <b-icon v-else icon="help-circle" />

js/src/components/Event/OrganizerPickerWrapper.vue

@@ -12,14 +12,14 @@
             <img
               class="image is-rounded"
               :src="selectedActor.avatar.url"
-              :alt="selectedActor.avatar.alt"
+              :alt="selectedActor.avatar.alt || ''"
             />
           </figure>
           <b-icon v-else size="is-large" icon="account-circle" />
         </div>
         <div class="media-content" v-if="selectedActor.name">
           <p class="is-4">{{ selectedActor.name }}</p>
-          <p class="is-6 has-text-grey">
+          <p class="is-6 has-text-grey-dark">
             {{ `@${selectedActor.preferredUsername}` }}
           </p>
         </div>

js/src/components/Event/TagInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <b-field>
+  <b-field :label-for="id">
     <template slot="label">
       {{ $t("Add some tags") }}
       <b-tooltip
@@ -22,6 +22,7 @@
       maxtags="10"
       :placeholder="$t('Eg: Stockholm, Dance, Chess…')"
       @typing="getFilteredTags"
+      :id="id"
     >
     </b-taginput>
   </b-field>
@@ -59,6 +60,16 @@ export default class TagInput extends Vue {
 
   filteredTags: ITag[] = [];
 
+  private static componentId = 0;
+
+  created(): void {
+    TagInput.componentId += 1;
+  }
+
+  get id(): string {
+    return `tag-input-${TagInput.componentId}`;
+  }
+
   getFilteredTags(text: string): void {
     this.filteredTags = differenceBy(this.data, this.value, "id").filter(
       (option) =>