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>
+              <h2>{{ member.parent.name }}</h2>
-              <p class="is-6 has-text-grey">
+              <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)}`,
               })

js/src/views/About.vue

@@ -31,7 +31,7 @@
                 $t("About this instance")
               }}</router-link>
             </p>
-            <p class="menu-label">
+            <p class="menu-label has-text-grey-dark">
               {{ $t("Legal") }}
             </p>
             <ul class="menu-list">
@@ -64,8 +64,10 @@
       </div>
     </main>
 
-    <!-- We hide the "Find an instance button until https://joinmobilizon.org gets a instance picker -->
+    <div
-    <div class="hero register is-primary is-medium">
+      class="hero register is-primary is-medium"
+      v-if="!currentUser || !currentUser.id"
+    >
       <div class="hero-body">
         <div class="container has-text-centered">
           <div class="columns">

js/src/views/Account/children/EditIdentity.vue

@@ -36,12 +36,17 @@
         class="picture-upload"
       />
 
-      <b-field horizontal :label="$t('Display name')">
+      <b-field
+        horizontal
+        :label="$t('Display name')"
+        label-for="identity-display-name"
+      >
         <b-input
           aria-required="true"
           required
           v-model="identity.name"
           @input="autoUpdateUsername($event)"
+          id="identity-display-name"
         />
       </b-field>
 
@@ -50,6 +55,7 @@
         custom-class="username-field"
         expanded
         :label="$t('Username')"
+        label-for="identity-username"
         :message="message"
       >
         <b-field expanded>
@@ -60,6 +66,7 @@
             :disabled="isUpdate"
             :use-html5-validation="!isUpdate"
             pattern="[a-z0-9_]+"
+            id="identity-username"
           />
 
           <p class="control">
@@ -68,11 +75,16 @@
         </b-field>
       </b-field>
 
-      <b-field horizontal :label="$t('Description')">
+      <b-field
+        horizontal
+        :label="$t('Description')"
+        label-for="identity-summary"
+      >
         <b-input
           type="textarea"
           aria-required="false"
           v-model="identity.summary"
+          id="identity-summary"
         />
       </b-field>
 
@@ -94,11 +106,15 @@
         </div>
       </b-field>
 
-      <div class="delete-identity" v-if="isUpdate">
+      <b-field class="delete-identity">
-        <span @click="openDeleteIdentityConfirmation()">{{
+        <b-button
-          $t("Delete this identity")
+          v-if="isUpdate"
-        }}</span>
+          @click="openDeleteIdentityConfirmation()"
-      </div>
+          type="is-text"
+        >
+          {{ $t("Delete this identity") }}
+        </b-button>
+      </b-field>
 
       <section v-if="isUpdate">
         <div class="setting-title">
@@ -194,12 +210,6 @@ h1 {
   margin: 30px 0;
 }
 
-.delete-identity {
-  text-decoration: underline;
-  cursor: pointer;
-  margin-top: 15px;
-}
-
 .username-field + .field {
   margin-bottom: 0;
 }

js/src/views/Admin/GroupProfiles.vue

@@ -41,10 +41,10 @@
         >
           <template #searchable="props">
             <b-input
+              :aria-label="$t('Filter')"
               v-model="props.filters.preferredUsername"
-              placeholder="Search..."
+              :placeholder="$t('Filter')"
               icon="magnify"
-              size="is-small"
             />
           </template>
           <template v-slot:default="props">
@@ -58,7 +58,10 @@
               <article class="media">
                 <figure class="media-left" v-if="props.row.avatar">
                   <p class="image is-48x48">
-                    <img :src="props.row.avatar.url" />
+                    <img
+                      :src="props.row.avatar.url"
+                      :alt="props.row.avatar.alt || ''"
+                    />
                   </p>
                 </figure>
                 <div class="media-content">
@@ -76,10 +79,10 @@
         <b-table-column field="domain" :label="$t('Domain')" searchable>
           <template #searchable="props">
             <b-input
+              :aria-label="$t('Filter')"
               v-model="props.filters.domain"
-              placeholder="Search..."
+              :placeholder="$t('Filter')"
               icon="magnify"
-              size="is-small"
             />
           </template>
           <template v-slot:default="props">

js/src/views/Admin/Profiles.vue

@@ -42,9 +42,9 @@
           <template #searchable="props">
             <b-input
               v-model="props.filters.preferredUsername"
-              placeholder="Search..."
+              :aria-label="$t('Filter')"
+              :placeholder="$t('Filter')"
               icon="magnify"
-              size="is-small"
             />
           </template>
           <template v-slot:default="props">
@@ -58,7 +58,10 @@
               <article class="media">
                 <figure class="media-left" v-if="props.row.avatar">
                   <p class="image is-48x48">
-                    <img :src="props.row.avatar.url" />
+                    <img
+                      :src="props.row.avatar.url"
+                      :alt="props.row.avatar.alt || ''"
+                    />
                   </p>
                 </figure>
                 <div class="media-content">
@@ -77,9 +80,9 @@
           <template #searchable="props">
             <b-input
               v-model="props.filters.domain"
-              placeholder="Search..."
+              :aria-label="$t('Filter')"
+              :placeholder="$t('Filter')"
               icon="magnify"
-              size="is-small"
             />
           </template>
           <template v-slot:default="props">

js/src/views/Admin/Settings.vue

@@ -16,11 +16,11 @@
     </nav>
     <section v-if="adminSettings">
       <form @submit.prevent="updateSettings">
-        <b-field :label="$t('Instance Name')">
+        <b-field :label="$t('Instance Name')" label-for="instance-name">
-          <b-input v-model="adminSettings.instanceName" />
+          <b-input v-model="adminSettings.instanceName" id="instance-name" />
         </b-field>
         <div class="field">
-          <label class="label has-help">{{
+          <label class="label has-help" for="instance-description">{{
             $t("Instance Short Description")
           }}</label>
           <small>
@@ -34,10 +34,13 @@
             type="textarea"
             v-model="adminSettings.instanceDescription"
             rows="2"
+            id="instance-name"
           />
         </div>
         <div class="field">
-          <label class="label has-help">{{ $t("Instance Slogan") }}</label>
+          <label class="label has-help" for="instance-slogan">{{
+            $t("Instance Slogan")
+          }}</label>
           <small>
             {{
               $t(
@@ -48,14 +51,17 @@
           <b-input
             v-model="adminSettings.instanceSlogan"
             :placeholder="$t('Gather ⋅ Organize ⋅ Mobilize')"
+            id="instance-slogan"
           />
         </div>
         <div class="field">
-          <label class="label has-help">{{ $t("Contact") }}</label>
+          <label class="label has-help" for="instance-contact">{{
+            $t("Contact")
+          }}</label>
           <small>
             {{ $t("Can be an email or a link, or just plain text.") }}
           </small>
-          <b-input v-model="adminSettings.contact" />
+          <b-input v-model="adminSettings.contact" id="instance-contact" />
         </div>
         <b-field :label="$t('Allow registrations')">
           <b-switch v-model="adminSettings.registrationsOpen">
@@ -66,7 +72,9 @@
           </b-switch>
         </b-field>
         <div class="field">
-          <label class="label has-help">{{ $t("Instance languages") }}</label>
+          <label class="label has-help" for="instance-languages">{{
+            $t("Instance languages")
+          }}</label>
           <small>
             {{ $t("Main languages you/your moderators speak") }}
           </small>
@@ -79,12 +87,13 @@
             icon="label"
             :placeholder="$t('Select languages')"
             @typing="getFilteredLanguages"
+            id="instance-languages"
           >
             <template slot="empty">{{ $t("No languages found") }}</template>
           </b-taginput>
         </div>
         <div class="field">
-          <label class="label has-help">{{
+          <label class="label has-help" for="instance-long-description">{{
             $t("Instance Long Description")
           }}</label>
           <small>
@@ -98,10 +107,13 @@
             type="textarea"
             v-model="adminSettings.instanceLongDescription"
             rows="4"
+            id="instance-long-description"
           />
         </div>
         <div class="field">
-          <label class="label has-help">{{ $t("Instance Rules") }}</label>
+          <label class="label has-help" for="instance-rules">{{
+            $t("Instance Rules")
+          }}</label>
           <small>
             {{
               $t(
@@ -109,35 +121,44 @@
               )
             }}
           </small>
-          <b-input type="textarea" v-model="adminSettings.instanceRules" />
+          <b-input
+            type="textarea"
+            v-model="adminSettings.instanceRules"
+            id="instance-rules"
+          />
         </div>
         <b-field :label="$t('Instance Terms Source')">
           <div class="columns">
             <div class="column is-one-third-desktop">
-              <b-field>
+              <fieldset>
-                <b-radio
+                <legend>
-                  v-model="adminSettings.instanceTermsType"
+                  {{ $t("Choose the source of the instance's Terms") }}
-                  name="instanceTermsType"
+                </legend>
-                  :native-value="InstanceTermsType.DEFAULT"
+                <b-field>
-                  >{{ $t("Default Mobilizon terms") }}</b-radio
+                  <b-radio
-                >
+                    v-model="adminSettings.instanceTermsType"
-              </b-field>
+                    name="instanceTermsType"
-              <b-field>
+                    :native-value="InstanceTermsType.DEFAULT"
-                <b-radio
+                    >{{ $t("Default Mobilizon terms") }}</b-radio
-                  v-model="adminSettings.instanceTermsType"
+                  >
-                  name="instanceTermsType"
+                </b-field>
-                  :native-value="InstanceTermsType.URL"
+                <b-field>
-                  >{{ $t("Custom URL") }}</b-radio
+                  <b-radio
-                >
+                    v-model="adminSettings.instanceTermsType"
-              </b-field>
+                    name="instanceTermsType"
-              <b-field>
+                    :native-value="InstanceTermsType.URL"
-                <b-radio
+                    >{{ $t("Custom URL") }}</b-radio
-                  v-model="adminSettings.instanceTermsType"
+                  >
-                  name="instanceTermsType"
+                </b-field>
-                  :native-value="InstanceTermsType.CUSTOM"
+                <b-field>
-                  >{{ $t("Custom text") }}</b-radio
+                  <b-radio
-                >
+                    v-model="adminSettings.instanceTermsType"
-              </b-field>
+                    name="instanceTermsType"
+                    :native-value="InstanceTermsType.CUSTOM"
+                    >{{ $t("Custom text") }}</b-radio
+                  >
+                </b-field>
+              </fieldset>
             </div>
             <div class="column">
               <div
@@ -215,30 +236,35 @@
         <b-field :label="$t('Instance Privacy Policy Source')">
           <div class="columns">
             <div class="column is-one-third-desktop">
-              <b-field>
+              <fieldset>
-                <b-radio
+                <legend>
-                  v-model="adminSettings.instancePrivacyPolicyType"
+                  {{ $t("Choose the source of the instance's Privacy Policy") }}
-                  name="instancePrivacyType"
+                </legend>
-                  :native-value="InstancePrivacyType.DEFAULT"
+                <b-field>
-                  >{{ $t("Default Mobilizon privacy policy") }}</b-radio
+                  <b-radio
-                >
+                    v-model="adminSettings.instancePrivacyPolicyType"
-              </b-field>
+                    name="instancePrivacyType"
-              <b-field>
+                    :native-value="InstancePrivacyType.DEFAULT"
-                <b-radio
+                    >{{ $t("Default Mobilizon privacy policy") }}</b-radio
-                  v-model="adminSettings.instancePrivacyPolicyType"
+                  >
-                  name="instancePrivacyType"
+                </b-field>
-                  :native-value="InstancePrivacyType.URL"
+                <b-field>
-                  >{{ $t("Custom URL") }}</b-radio
+                  <b-radio
-                >
+                    v-model="adminSettings.instancePrivacyPolicyType"
-              </b-field>
+                    name="instancePrivacyType"
-              <b-field>
+                    :native-value="InstancePrivacyType.URL"
-                <b-radio
+                    >{{ $t("Custom URL") }}</b-radio
-                  v-model="adminSettings.instancePrivacyPolicyType"
+                  >
-                  name="instancePrivacyType"
+                </b-field>
-                  :native-value="InstancePrivacyType.CUSTOM"
+                <b-field>
-                  >{{ $t("Custom text") }}</b-radio
+                  <b-radio
-                >
+                    v-model="adminSettings.instancePrivacyPolicyType"
-              </b-field>
+                    name="instancePrivacyType"
+                    :native-value="InstancePrivacyType.CUSTOM"
+                    >{{ $t("Custom text") }}</b-radio
+                  >
+                </b-field>
+              </fieldset>
             </div>
             <div class="column">
               <div
@@ -430,13 +456,6 @@ export default class Settings extends Vue {
 }
 </script>
 <style lang="scss" scoped>
-.notification a {
-  color: $primary !important;
-  text-decoration: underline !important;
-  text-decoration-color: #fea72b !important;
-  text-decoration-thickness: 2px !important;
-}
-
 label.label.has-help {
   margin-bottom: 0;
 }

js/src/views/Admin/Users.vue

@@ -41,9 +41,9 @@
           <template #searchable="props">
             <b-input
               v-model="props.filters.email"
-              :placeholder="$t('Search…')"
+              :aria-label="$t('Filter')"
+              :placeholder="$t('Filter')"
               icon="magnify"
-              size="is-small"
             />
           </template>
           <template v-slot:default="props">

js/src/views/Event/Edit.vue

@@ -18,6 +18,7 @@
 
         <b-field
           :label="$t('Title')"
+          label-for="title"
           :type="checkTitleLength[0]"
           :message="checkTitleLength[1]"
         >
@@ -26,12 +27,18 @@
             aria-required="true"
             required
             v-model="event.title"
+            id="title"
           />
         </b-field>
 
         <tag-input v-model="event.tags" :data="tags" path="title" />
 
-        <b-field horizontal :label="$t('Starts on…')" class="begins-on-field">
+        <b-field
+          horizontal
+          :label="$t('Starts on…')"
+          class="begins-on-field"
+          label-for="begins-on-field"
+        >
           <b-datetimepicker
             class="datepicker starts-on"
             :placeholder="$t('Type or select a date…')"
@@ -40,11 +47,16 @@
             v-model="event.beginsOn"
             horizontal-time-picker
             editable
+            :datepicker="{
+              id: 'begins-on-field',
+              'aria-next-label': $t('Next month'),
+              'aria-previous-label': $t('Previous month'),
+            }"
           >
           </b-datetimepicker>
         </b-field>
 
-        <b-field horizontal :label="$t('Ends on…')">
+        <b-field horizontal :label="$t('Ends on…')" label-for="ends-on-field">
           <b-datetimepicker
             class="datepicker ends-on"
             :placeholder="$t('Type or select a date…')"
@@ -54,6 +66,11 @@
             horizontal-time-picker
             :min-datetime="event.beginsOn"
             editable
+            :datepicker="{
+              id: 'ends-on-field',
+              'aria-next-label': $t('Next month'),
+              'aria-previous-label': $t('Previous month'),
+            }"
           >
           </b-datetimepicker>
         </b-field>
@@ -70,12 +87,13 @@
           <editor v-model="event.description" />
         </div>
 
-        <b-field :label="$t('Website / URL')">
+        <b-field :label="$t('Website / URL')" label-for="website-url">
           <b-input
             icon="link"
             type="url"
             v-model="event.onlineAddress"
             placeholder="URL"
+            id="website-url"
           />
         </b-field>
 
@@ -132,22 +150,31 @@
         </p>
         <event-metadata-list v-model="event.metadata" />
         <subtitle>{{ $t("Who can view this event and participate") }}</subtitle>
-        <div class="field">
+        <fieldset>
-          <b-radio
+          <legend>
-            v-model="event.visibility"
+            {{
-            name="eventVisibility"
+              $t(
-            :native-value="EventVisibility.PUBLIC"
+                "When the event is private, you'll need to share the link around."
-            >{{ $t("Visible everywhere on the web (public)") }}</b-radio
+              )
-          >
+            }}
-        </div>
+          </legend>
-        <div class="field">
+          <div class="field">
-          <b-radio
+            <b-radio
-            v-model="event.visibility"
+              v-model="event.visibility"
-            name="eventVisibility"
+              name="eventVisibility"
-            :native-value="EventVisibility.UNLISTED"
+              :native-value="EventVisibility.PUBLIC"
-            >{{ $t("Only accessible through link (private)") }}</b-radio
+              >{{ $t("Visible everywhere on the web (public)") }}</b-radio
-          >
+            >
-        </div>
+          </div>
+          <div class="field">
+            <b-radio
+              v-model="event.visibility"
+              name="eventVisibility"
+              :native-value="EventVisibility.UNLISTED"
+              >{{ $t("Only accessible through link (private)") }}</b-radio
+            >
+          </div>
+        </fieldset>
         <!-- <div class="field">
           <b-radio v-model="event.visibility"
                    name="eventVisibility"
@@ -196,11 +223,14 @@
         </div>
 
         <div class="box" v-if="limitedPlaces">
-          <b-field :label="$t('Number of places')">
+          <b-field :label="$t('Number of places')" label-for="number-of-places">
             <b-numberinput
               controls-position="compact"
+              :aria-minus-label="$t('Decrease')"
+              :aria-plus-label="$t('Increase')"
               min="1"
               v-model="eventOptions.maximumAttendeeCapacity"
+              id="number-of-places"
             />
           </b-field>
           <!--
@@ -219,63 +249,75 @@
 
         <subtitle>{{ $t("Public comment moderation") }}</subtitle>
 
-        <div class="field">
+        <fieldset>
-          <b-radio
+          <legend>{{ $t("Who can post a comment?") }}</legend>
-            v-model="eventOptions.commentModeration"
+          <div class="field">
-            name="commentModeration"
+            <b-radio
-            :native-value="CommentModeration.ALLOW_ALL"
+              v-model="eventOptions.commentModeration"
-            >{{ $t("Allow all comments from users with accounts") }}</b-radio
+              name="commentModeration"
-          >
+              :native-value="CommentModeration.ALLOW_ALL"
-        </div>
+              >{{ $t("Allow all comments from users with accounts") }}</b-radio
+            >
+          </div>
 
-        <!--          <div class="field">-->
+          <!--          <div class="field">-->
-        <!--            <b-radio v-model="eventOptions.commentModeration"-->
+          <!--            <b-radio v-model="eventOptions.commentModeration"-->
-        <!--                     name="commentModeration"-->
+          <!--                     name="commentModeration"-->
-        <!--                     :native-value="CommentModeration.MODERATED">-->
+          <!--                     :native-value="CommentModeration.MODERATED">-->
-        <!--              {{ $t('Moderated comments (shown after approval)') }}-->
+          <!--              {{ $t('Moderated comments (shown after approval)') }}-->
-        <!--            </b-radio>-->
+          <!--            </b-radio>-->
-        <!--          </div>-->
+          <!--          </div>-->
 
-        <div class="field">
+          <div class="field">
-          <b-radio
+            <b-radio
-            v-model="eventOptions.commentModeration"
+              v-model="eventOptions.commentModeration"
-            name="commentModeration"
+              name="commentModeration"
-            :native-value="CommentModeration.CLOSED"
+              :native-value="CommentModeration.CLOSED"
-            >{{ $t("Close comments for all (except for admins)") }}</b-radio
+              >{{ $t("Close comments for all (except for admins)") }}</b-radio
-          >
+            >
-        </div>
+          </div>
+        </fieldset>
 
         <subtitle>{{ $t("Status") }}</subtitle>
 
-        <b-field class="event__status__field">
+        <fieldset>
-          <b-radio-button
+          <legend>
-            v-model="event.status"
+            {{
-            name="status"
+              $t(
-            type="is-warning"
+                "Does the event needs to be confirmed later or is it cancelled?"
-            :native-value="EventStatus.TENTATIVE"
+              )
-          >
+            }}
-            <b-icon icon="calendar-question" />
+          </legend>
-            {{ $t("Tentative: Will be confirmed later") }}
+          <b-field class="event__status__field">
-          </b-radio-button>
+            <b-radio-button
-          <b-radio-button
+              v-model="event.status"
-            v-model="event.status"
+              name="status"
-            name="status"
+              type="is-warning"
-            type="is-success"
+              :native-value="EventStatus.TENTATIVE"
-            :native-value="EventStatus.CONFIRMED"
+            >
-          >
+              <b-icon icon="calendar-question" />
-            <b-icon icon="calendar-check" />
+              {{ $t("Tentative: Will be confirmed later") }}
-            {{ $t("Confirmed: Will happen") }}
+            </b-radio-button>
-          </b-radio-button>
+            <b-radio-button
-          <b-radio-button
+              v-model="event.status"
-            v-model="event.status"
+              name="status"
-            name="status"
+              type="is-success"
-            type="is-danger"
+              :native-value="EventStatus.CONFIRMED"
-            :native-value="EventStatus.CANCELLED"
+            >
-          >
+              <b-icon icon="calendar-check" />
-            <b-icon icon="calendar-remove" />
+              {{ $t("Confirmed: Will happen") }}
-            {{ $t("Cancelled: Won't happen") }}
+            </b-radio-button>
-          </b-radio-button>
+            <b-radio-button
-        </b-field>
+              v-model="event.status"
+              name="status"
+              type="is-danger"
+              :native-value="EventStatus.CANCELLED"
+            >
+              <b-icon icon="calendar-remove" />
+              {{ $t("Cancelled: Won't happen") }}
+            </b-radio-button>
+          </b-field>
+        </fieldset>
       </form>
     </div>
     <div class="container section" v-else>
@@ -370,6 +412,16 @@
 <style lang="scss" scoped>
 main section > .container {
   background: $white;
+
+  form {
+    h2 {
+      margin: 15px 0 7.5px;
+    }
+
+    legend {
+      margin-bottom: 0.75rem;
+    }
+  }
 }
 
 .save__navbar {
@@ -412,6 +464,9 @@ h2.subtitle {
 section {
   & > .container {
     padding: 2rem 1.5rem;
+    @media screen and (max-width: 768px) {
+      padding: 2rem 0.5rem;
+    }
   }
 
   .begins-on-field {

js/src/views/Group/Create.vue

@@ -7,12 +7,19 @@
     </b-message>
 
     <form @submit.prevent="createGroup">
-      <b-field :label="$t('Group display name')">
+      <b-field :label="$t('Group display name')" label-for="group-display-name">
-        <b-input aria-required="true" required v-model="group.name" />
+        <b-input
+          aria-required="true"
+          required
+          v-model="group.name"
+          id="group-display-name"
+        />
       </b-field>
 
       <div class="field">
-        <label class="label">{{ $t("Federated Group Name") }}</label>
+        <label class="label" for="group-preferred-username">{{
+          $t("Federated Group Name")
+        }}</label>
         <div class="field-body">
           <b-field
             :message="
@@ -28,6 +35,7 @@
               expanded
               v-model="group.preferredUsername"
               pattern="[a-z0-9_]+"
+              id="group-preferred-username"
               :useHtml5Validation="true"
               :validation-message="
                 group.preferredUsername
@@ -52,8 +60,8 @@
         />
       </div>
 
-      <b-field :label="$t('Description')">
+      <b-field :label="$t('Description')" label-for="group-summary">
-        <b-input v-model="group.summary" type="textarea" />
+        <b-input v-model="group.summary" type="textarea" id="group-summary" />
       </b-field>
 
       <div>

js/src/views/Group/GroupFollowers.vue

@@ -87,7 +87,7 @@
                   props.row.actor.name
                 }}</span
                 ><br />
-                <span class="is-size-7 has-text-grey"
+                <span class="is-size-7 has-text-grey-dark"
                   >@{{ usernameWithDomain(props.row.actor) }}</span
                 >
               </div>

js/src/views/Group/GroupMembers.vue

@@ -39,6 +39,7 @@
         <b-field
           :label="$t('Invite a new member')"
           custom-class="add-relay"
+          label-for="new-member-field"
           horizontal
         >
           <b-field
@@ -50,6 +51,7 @@
           >
             <p class="control">
               <b-input
+                id="new-member-field"
                 v-model="newMemberUsername"
                 :placeholder="$t('Ex: someone@mobilizon.org')"
               />
@@ -63,8 +65,12 @@
         </b-field>
       </form>
       <h1>{{ $t("Group Members") }} ({{ group.members.total }})</h1>
-      <b-field :label="$t('Status')" horizontal>
+      <b-field
-        <b-select v-model="roles">
+        :label="$t('Status')"
+        horizontal
+        label-for="group-members-status-filter"
+      >
+        <b-select v-model="roles" id="group-members-status-filter">
           <option value="">
             {{ $t("Everything") }}
           </option>
@@ -122,7 +128,7 @@
               <img
                 class="is-rounded"
                 :src="props.row.actor.avatar.url"
-                alt=""
+                :alt="props.row.actor.avatar.alt || ''"
               />
             </figure>
             <b-icon
@@ -137,7 +143,7 @@
                   props.row.actor.name
                 }}</span
                 ><br />
-                <span class="is-size-7 has-text-grey"
+                <span class="is-size-7 has-text-grey-dark"
                   >@{{ usernameWithDomain(props.row.actor) }}</span
                 >
               </div>

js/src/views/Group/GroupSettings.vue

@@ -37,8 +37,8 @@
       v-if="group && isCurrentActorAGroupAdmin"
     >
       <form @submit.prevent="updateGroup">
-        <b-field :label="$t('Group name')">
+        <b-field :label="$t('Group name')" label-for="group-settings-name">
-          <b-input v-model="editableGroup.name" />
+          <b-input v-model="editableGroup.name" id="group-settings-name" />
         </b-field>
         <b-field :label="$t('Group short description')">
           <editor mode="basic" v-model="editableGroup.summary" :maxSize="500"

js/src/views/Home.vue

@@ -278,13 +278,11 @@
               }
             )
           }}
-          <router-link :to="{ name: RouteName.PREFERENCES }">
+          <router-link
-            <b-icon
+            :to="{ name: RouteName.PREFERENCES }"
-              class="clickable"
+            :title="$t('Change')"
-              icon="pencil"
+          >
-              :title="$t('Change')"
+            <b-icon class="clickable" icon="pencil" size="is-small" />
-              size="is-small"
-            />
           </router-link>
           <b-loading :active.sync="$apollo.loading" />
         </p>

js/src/views/Moderation/Logs.vue

@@ -21,6 +21,7 @@
             <img
               class="image"
               :src="log.actor.avatar.url"
+              :alt="log.actor.avatar.alt || ''"
               v-if="log.actor.avatar"
             />
             <i18n

js/src/views/Posts/Edit.vue

@@ -54,6 +54,7 @@
 
         <b-field
           :label="$t('Title')"
+          label-for="post-title"
           :type="errors.title ? 'is-danger' : null"
           :message="errors.title"
         >
@@ -62,6 +63,7 @@
             aria-required="true"
             required
             v-model="editablePost.title"
+            id="post-title"
           />
         </b-field>
 
@@ -73,30 +75,39 @@
           <editor v-model="editablePost.body" />
         </div>
         <subtitle>{{ $t("Who can view this post") }}</subtitle>
-        <div class="field">
+        <fieldset>
-          <b-radio
+          <legend>
-            v-model="editablePost.visibility"
+            {{
-            name="postVisibility"
+              $t(
-            :native-value="PostVisibility.PUBLIC"
+                "When the post is private, you'll need to share the link around."
-            >{{ $t("Visible everywhere on the web") }}</b-radio
+              )
-          >
+            }}
-        </div>
+          </legend>
-        <div class="field">
+          <div class="field">
-          <b-radio
+            <b-radio
-            v-model="editablePost.visibility"
+              v-model="editablePost.visibility"
-            name="postVisibility"
+              name="postVisibility"
-            :native-value="PostVisibility.UNLISTED"
+              :native-value="PostVisibility.PUBLIC"
-            >{{ $t("Only accessible through link") }}</b-radio
+              >{{ $t("Visible everywhere on the web") }}</b-radio
-          >
+            >
-        </div>
+          </div>
-        <div class="field">
+          <div class="field">
-          <b-radio
+            <b-radio
-            v-model="editablePost.visibility"
+              v-model="editablePost.visibility"
-            name="postVisibility"
+              name="postVisibility"
-            :native-value="PostVisibility.PRIVATE"
+              :native-value="PostVisibility.UNLISTED"
-            >{{ $t("Only accessible to members of the group") }}</b-radio
+              >{{ $t("Only accessible through link") }}</b-radio
-          >
+            >
-        </div>
+          </div>
+          <div class="field">
+            <b-radio
+              v-model="editablePost.visibility"
+              name="postVisibility"
+              :native-value="PostVisibility.PRIVATE"
+              >{{ $t("Only accessible to members of the group") }}</b-radio
+            >
+          </div>
+        </fieldset>
       </div>
       <nav class="navbar">
         <div class="container">
@@ -414,6 +425,13 @@ form {
       }
     }
   }
+  h2 {
+    margin: 15px 0 7.5px;
+  }
+
+  legend {
+    margin-bottom: 0.75rem;
+  }
 }
 
 .breadcrumb li.is-active > span {

js/src/views/Resources/ResourceFolder.vue

@@ -187,8 +187,12 @@
       <div class="modal-card">
         <section class="modal-card-body">
           <form @submit.prevent="createResource">
-            <b-field :label="$t('Title')">
+            <b-field :label="$t('Title')" label-for="new-resource-title">
-              <b-input aria-required="true" v-model="newResource.title" />
+              <b-input
+                aria-required="true"
+                v-model="newResource.title"
+                id="new-resource-title"
+              />
             </b-field>
 
             <b-button native-type="submit">{{
@@ -202,6 +206,7 @@
       :active.sync="createLinkResourceModal"
       has-modal-card
       class="link-resource-modal"
+      aria-modal
     >
       <div class="modal-card">
         <section class="modal-card-body">
@@ -209,8 +214,9 @@
             {{ modalError }}
           </b-message>
           <form @submit.prevent="createResource">
-            <b-field :label="$t('URL')">
+            <b-field :label="$t('URL')" label-for="new-resource-url">
               <b-input
+                id="new-resource-url"
                 type="url"
                 required
                 v-model="newResource.resourceUrl"
@@ -222,12 +228,23 @@
               <resource-item :resource="newResource" :preview="true" />
             </div>
 
-            <b-field :label="$t('Title')">
+            <b-field :label="$t('Title')" label-for="new-resource-link-title">
-              <b-input aria-required="true" v-model="newResource.title" />
+              <b-input
+                aria-required="true"
+                v-model="newResource.title"
+                id="new-resource-link-title"
+              />
             </b-field>
 
-            <b-field :label="$t('Text')">
+            <b-field
-              <b-input type="textarea" v-model="newResource.summary" />
+              :label="$t('Description')"
+              label-for="new-resource-summary"
+            >
+              <b-input
+                type="textarea"
+                v-model="newResource.summary"
+                id="new-resource-summary"
+              />
             </b-field>
 
             <b-button native-type="submit">{{

js/src/views/Settings/Notifications.vue

@@ -86,6 +86,7 @@
 
       <b-field
         :label="$t('Send notification e-mails')"
+        label-for="groupNotifications"
         :message="
           $t(
             'Announcements and mentions notifications are always sent straight away.'
@@ -95,6 +96,7 @@
         <b-select
           v-model="groupNotifications"
           @input="updateSetting({ groupNotifications })"
+          id="groupNotifications"
         >
           <option
             v-for="(value, key) in groupNotificationsValues"
@@ -186,9 +188,13 @@
         <h2>{{ $t("Organizer notifications") }}</h2>
       </div>
       <div class="field is-primary">
-        <strong>{{
+        <label
-          $t("Notifications for manually approved participations to an event")
+          class="has-text-weight-bold"
-        }}</strong>
+          for="notificationPendingParticipation"
+          >{{
+            $t("Notifications for manually approved participations to an event")
+          }}</label
+        >
         <p>
           {{
             $t(
@@ -198,6 +204,7 @@
         </p>
         <b-select
           v-model="notificationPendingParticipation"
+          id="notificationPendingParticipation"
           @input="updateSetting({ notificationPendingParticipation })"
         >
           <option

js/src/views/Settings/Preferences.vue

@@ -15,22 +15,28 @@
       </ul>
     </nav>
     <div>
-      <b-field :label="$t('Language')">
+      <b-field :label="$t('Language')" label-for="setting-language">
         <b-select
           :loading="!config || !loggedUser"
           v-model="locale"
           :placeholder="$t('Select a language')"
+          id="setting-language"
         >
           <option v-for="(language, lang) in langs" :value="lang" :key="lang">
             {{ language }}
           </option>
         </b-select>
       </b-field>
-      <b-field :label="$t('Timezone')" v-if="selectedTimezone">
+      <b-field
+        :label="$t('Timezone')"
+        v-if="selectedTimezone"
+        label-for="setting-timezone"
+      >
         <b-select
           :placeholder="$t('Select a timezone')"
           :loading="!config || !loggedUser"
           v-model="selectedTimezone"
+          id="setting-timezone"
         >
           <optgroup
             :label="group"
@@ -57,19 +63,25 @@
       }}</b-message>
       <hr />
       <b-field grouped>
-        <b-field :label="$t('City or region')" expanded>
+        <b-field
+          :label="$t('City or region')"
+          expanded
+          label-for="setting-city"
+        >
           <address-auto-complete
             v-if="loggedUser && loggedUser.settings"
             :type="AddressSearchType.ADMINISTRATIVE"
             :doGeoLocation="false"
             v-model="address"
+            id="setting-city"
           >
           </address-auto-complete>
         </b-field>
-        <b-field :label="$t('Radius')">
+        <b-field :label="$t('Radius')" label-for="setting-radius">
           <b-select
             :placeholder="$t('Select a radius')"
             v-model="locationRange"
+            id="setting-radius"
           >
             <option
               v-for="index in [1, 5, 10, 25, 50, 100]"
@@ -85,6 +97,7 @@
           @click="resetArea"
           class="reset-area"
           icon-left="close"
+          :aria-label="$t('Reset')"
         />
       </b-field>
       <p>

js/tests/unit/specs/boot/routes.spec.ts

@@ -3,6 +3,7 @@ import { routes } from "@/router";
 import App from "@/App.vue";
 import VueRouter from "vue-router";
 import Buefy from "buefy";
+import flushPromises from "flush-promises";
 
 const localVue = createLocalVue();
 config.mocks.$t = (key: string): string => key;
@@ -36,8 +37,7 @@ describe("routing", () => {
     });
 
     router.push("/about");
-    await wrapper.vm.$nextTick();
+    await flushPromises();
-    await wrapper.vm.$nextTick();
     expect(wrapper.vm.$route.path).toBe("/about/instance");
     expect(wrapper.html()).toContain(
       '<a href="/about/instance" aria-current="page"'

js/tests/unit/specs/components/Post/__snapshots__/PostElementItem.spec.ts.snap

@@ -9,7 +9,7 @@ exports[`PostElementItem renders post with basic informations 1`] = `
         <p class="post-minimalist-title">My Blog Post</p>
         <div class="metadata">
           <!---->
-          <!----> <small class="has-text-grey">December 2, 2020</small>
+          <!----> <small class="has-text-grey-dark">December 2, 2020</small>
           <!---->
         </div>
       </div>
@@ -26,7 +26,7 @@ exports[`PostElementItem shows the author if actor is a group member 1`] = `
       <div class="media-content">
         <p class="post-minimalist-title">My Blog Post</p>
         <div class="metadata">
-          <!----> <small class="has-text-grey"><span class="icon is-small"><i class="mdi mdi-earth"></i></span>Public</small> <small class="has-text-grey">December 2, 2020</small> <small class="has-text-grey">Created by {username}</small>
+          <!----> <small class="has-text-grey-dark"><span class="icon is-small"><i class="mdi mdi-earth"></i></span>Public</small> <small class="has-text-grey-dark">December 2, 2020</small> <small class="has-text-grey-dark">Created by {username}</small>
         </div>
       </div>
     </div>
@@ -43,7 +43,7 @@ exports[`PostElementItem shows the draft tag if post is a draft 1`] = `
         <p class="post-minimalist-title">My Blog Post</p>
         <div class="metadata"><span class="tag is-warning is-small"><span class="">Draft</span>
           <!----></span>
-          <!----> <small class="has-text-grey">December 2, 2020</small>
+          <!----> <small class="has-text-grey-dark">December 2, 2020</small>
           <!---->
         </div>
       </div>
@@ -60,7 +60,7 @@ exports[`PostElementItem tells if the post is accessible only through link 1`] =
       <div class="media-content">
         <p class="post-minimalist-title">My Blog Post</p>
         <div class="metadata">
-          <!----> <small class="has-text-grey"><span class="icon is-small"><i class="mdi mdi-link"></i></span>Accessible through link</small> <small class="has-text-grey">December 2, 2020</small>
+          <!----> <small class="has-text-grey-dark"><span class="icon is-small"><i class="mdi mdi-link"></i></span>Accessible through link</small> <small class="has-text-grey-dark">December 2, 2020</small>
           <!---->
         </div>
       </div>
@@ -77,7 +77,7 @@ exports[`PostElementItem tells if the post is accessible only to members 1`] = `
       <div class="media-content">
         <p class="post-minimalist-title">My Blog Post</p>
         <div class="metadata">
-          <!----> <small class="has-text-grey"><span class="icon is-small"><i class="mdi mdi-lock"></i></span>Accessible only to members</small> <small class="has-text-grey">December 2, 2020</small>
+          <!----> <small class="has-text-grey-dark"><span class="icon is-small"><i class="mdi mdi-lock"></i></span>Accessible only to members</small> <small class="has-text-grey-dark">December 2, 2020</small>
           <!---->
         </div>
       </div>
@@ -94,7 +94,7 @@ exports[`PostElementItem tells if the post is public when the actor is a group m
       <div class="media-content">
         <p class="post-minimalist-title">My Blog Post</p>
         <div class="metadata">
-          <!----> <small class="has-text-grey"><span class="icon is-small"><i class="mdi mdi-earth"></i></span>Public</small> <small class="has-text-grey">December 2, 2020</small> <small class="has-text-grey">Created by {username}</small>
+          <!----> <small class="has-text-grey-dark"><span class="icon is-small"><i class="mdi mdi-earth"></i></span>Public</small> <small class="has-text-grey-dark">December 2, 2020</small> <small class="has-text-grey-dark">Created by {username}</small>
         </div>
       </div>
     </div>