Various accessibility improvements

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

js/src/components/Editor.vue

@@ -16,6 +16,7 @@
           :class="{ 'is-active': editor.isActive('bold') }"
           @click="editor.chain().focus().toggleBold().run()"
           type="button"
+          :title="$t('Bold')"
         >
           <b-icon icon="format-bold" />
         </button>
@@ -25,6 +26,7 @@
           :class="{ 'is-active': editor.isActive('italic') }"
           @click="editor.chain().focus().toggleItalic().run()"
           type="button"
+          :title="$t('Italic')"
         >
           <b-icon icon="format-italic" />
         </button>
@@ -34,6 +36,7 @@
           :class="{ 'is-active': editor.isActive('underline') }"
           @click="editor.chain().focus().toggleUnderline().run()"
           type="button"
+          :title="$t('Underline')"
         >
           <b-icon icon="format-underline" />
         </button>
@@ -44,6 +47,7 @@
           :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
           @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
           type="button"
+          :title="$t('Heading Level 1')"
         >
           <b-icon icon="format-header-1" />
         </button>
@@ -54,6 +58,7 @@
           :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
           @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
           type="button"
+          :title="$t('Heading Level 2')"
         >
           <b-icon icon="format-header-2" />
         </button>
@@ -64,6 +69,7 @@
           :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
           @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
           type="button"
+          :title="$t('Heading Level 3')"
         >
           <b-icon icon="format-header-3" />
         </button>
@@ -73,6 +79,7 @@
           @click="showLinkMenu()"
           :class="{ 'is-active': editor.isActive('link') }"
           type="button"
+          :title="$t('Add link')"
         >
           <b-icon icon="link" />
         </button>
@@ -82,6 +89,7 @@
           class="menubar__button"
           @click="editor.chain().focus().unsetLink().run()"
           type="button"
+          :title="$t('Remove link')"
         >
           <b-icon icon="link-off" />
         </button>
@@ -91,6 +99,7 @@
           v-if="!isBasicMode"
           @click="showImagePrompt()"
           type="button"
+          :title="$t('Add picture')"
         >
           <b-icon icon="image" />
         </button>
@@ -101,6 +110,7 @@
           :class="{ 'is-active': editor.isActive('bulletList') }"
           @click="editor.chain().focus().toggleBulletList().run()"
           type="button"
+          :title="$t('Bullet list')"
         >
           <b-icon icon="format-list-bulleted" />
         </button>
@@ -111,6 +121,7 @@
           :class="{ 'is-active': editor.isActive('orderedList') }"
           @click="editor.chain().focus().toggleOrderedList().run()"
           type="button"
+          :title="$t('Ordered list')"
         >
           <b-icon icon="format-list-numbered" />
         </button>
@@ -121,6 +132,7 @@
           :class="{ 'is-active': editor.isActive('blockquote') }"
           @click="editor.chain().focus().toggleBlockquote().run()"
           type="button"
+          :title="$t('Quote')"
         >
           <b-icon icon="format-quote-close" />
         </button>
@@ -130,6 +142,7 @@
           class="menubar__button"
           @click="editor.chain().focus().undo().run()"
           type="button"
+          :title="$t('Undo')"
         >
           <b-icon icon="undo" />
         </button>
@@ -139,6 +152,7 @@
           class="menubar__button"
           @click="editor.chain().focus().redo().run()"
           type="button"
+          :title="$t('Redo')"
         >
           <b-icon icon="redo" />
         </button>
@@ -155,6 +169,7 @@
           :class="{ 'is-active': editor.isActive('bold') }"
           @click="editor.chain().focus().toggleBold().run()"
           type="button"
+          :title="$t('Bold')"
         >
           <b-icon icon="format-bold" />
           <span class="visually-hidden">{{ $t("Bold") }}</span>
@@ -165,6 +180,7 @@
           :class="{ 'is-active': editor.isActive('italic') }"
           @click="editor.chain().focus().toggleItalic().run()"
           type="button"
+          :title="$t('Italic')"
         >
           <b-icon icon="format-italic" />
           <span class="visually-hidden">{{ $t("Italic") }}</span>

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

js/src/components/Footer.vue

@@ -20,6 +20,7 @@
     <ul>
       <li>
         <b-select
+          :aria-label="$t('Language')"
           v-if="$i18n"
           v-model="locale"
           :placeholder="$t('Select a language')"

js/src/components/Group/GroupMemberCard.vue

@@ -24,8 +24,8 @@
                 },
               }"
             >
-              <h3>{{ member.parent.name }}</h3>
-              <p class="is-6 has-text-grey">
+              <h2>{{ member.parent.name }}</h2>
+              <p class="is-6 has-text-grey-dark">
                 <span v-if="member.parent.domain">{{
                   `@${member.parent.preferredUsername}@${member.parent.domain}`
                 }}</span>

js/src/components/Post/PostElementItem.vue

@@ -22,13 +22,13 @@
                 post.visibility === PostVisibility.PUBLIC &&
                 isCurrentActorMember
               "
-              class="has-text-grey"
+              class="has-text-grey-dark"
             >
               <b-icon icon="earth" size="is-small" />{{ $t("Public") }}</small
             >
             <small
               v-else-if="post.visibility === PostVisibility.UNLISTED"
-              class="has-text-grey"
+              class="has-text-grey-dark"
             >
               <b-icon icon="link" size="is-small" />{{
                 $t("Accessible through link")
@@ -36,7 +36,7 @@
             >
             <small
               v-else-if="post.visibility === PostVisibility.PRIVATE"
-              class="has-text-grey"
+              class="has-text-grey-dark"
             >
               <b-icon icon="lock" size="is-small" />{{
                 $t("Accessible only to members", {
@@ -44,13 +44,13 @@
                 })
               }}</small
             >
-            <small class="has-text-grey">{{
+            <small class="has-text-grey-dark">{{
               $options.filters.formatDateTimeString(
                 new Date(post.insertedAt),
                 false
               )
             }}</small>
-            <small class="has-text-grey" v-if="isCurrentActorMember">{{
+            <small class="has-text-grey-dark" v-if="isCurrentActorMember">{{
               $t("Created by {username}", {
                 username: `@${usernameWithDomain(post.author)}`,
               })