Various accessibility improvements

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

js/src/views/Group/Create.vue

@@ -7,12 +7,19 @@
     </b-message>
 
     <form @submit.prevent="createGroup">
-      <b-field :label="$t('Group display name')">
-        <b-input aria-required="true" required v-model="group.name" />
+      <b-field :label="$t('Group display name')" label-for="group-display-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-input v-model="group.summary" type="textarea" />
+      <b-field :label="$t('Description')" label-for="group-summary">
+        <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-select v-model="roles">
+      <b-field
+        :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-input v-model="editableGroup.name" />
+        <b-field :label="$t('Group name')" label-for="group-settings-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"