Various accessibility improvements

* Add announcement element with `aria-live`
* Add skip to main content element

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

js/src/views/Event/Edit.vue

@@ -84,7 +84,10 @@
 
         <div class="field">
           <label class="label">{{ $t("Description") }}</label>
-          <editor v-model="event.description" />
+          <editor
+            v-model="event.description"
+            :aria-label="$t('Event description body')"
+          />
         </div>
 
         <b-field :label="$t('Website / URL')" label-for="website-url">

js/src/views/Event/Event.vue

@@ -245,12 +245,14 @@
                     aria-role="listitem"
                     v-if="canManageEvent || event.draft"
                     @click="openDeleteEventModalWrapper"
+                    @keyup.enter="openDeleteEventModalWrapper"
                   >
                     {{ $t("Delete") }}
                     <b-icon icon="delete" />
                   </b-dropdown-item>
 
                   <hr
+                    role="presentation"
                     class="dropdown-divider"
                     aria-role="menuitem"
                     v-if="canManageEvent || event.draft"
@@ -259,6 +261,7 @@
                     aria-role="listitem"
                     v-if="!event.draft"
                     @click="triggerShare()"
+                    @keyup.enter="triggerShare()"
                   >
                     <span>
                       {{ $t("Share this event") }}
@@ -268,6 +271,7 @@
                   <b-dropdown-item
                     aria-role="listitem"
                     @click="downloadIcsEvent()"
+                    @keyup.enter="downloadIcsEvent()"
                     v-if="!event.draft"
                   >
                     <span>
@@ -279,6 +283,7 @@
                     aria-role="listitem"
                     v-if="ableToReport"
                     @click="isReportModalActive = true"
+                    @keyup.enter="isReportModalActive = true"
                   >
                     <span>
                       {{ $t("Report") }}
@@ -379,6 +384,7 @@
                 class="button"
                 ref="cancelButton"
                 @click="isJoinModalActive = false"
+                @keyup.enter="isJoinModalActive = false"
               >
                 {{ $t("Cancel") }}
               </button>
@@ -390,6 +396,11 @@
                     ? joinEventWithConfirmation(identity)
                     : joinEvent(identity)
                 "
+                @keyup.enter="
+                  event.joinOptions === EventJoinOptions.RESTRICTED
+                    ? joinEventWithConfirmation(identity)
+                    : joinEvent(identity)
+                "
               >
                 {{ $t("Confirm my particpation") }}
               </button>
@@ -436,6 +447,7 @@
                   class="button"
                   ref="cancelButton"
                   @click="isJoinConfirmationModalActive = false"
+                  @keyup.enter="isJoinConfirmationModalActive = false"
                   >{{ $t("Cancel") }}
                 </b-button>
                 <b-button type="is-primary" native-type="submit">

js/src/views/Event/Participants.vue

@@ -62,13 +62,17 @@
             </template>
 
             <b-dropdown-item
+              has-link
               v-for="format in exportFormats"
               :key="format"
-              @click="exportParticipants(format)"
               aria-role="listitem"
+              @click="exportParticipants(format)"
+              @keyup.enter="exportParticipants(format)"
             >
-              <b-icon :icon="formatToIcon(format)"></b-icon>
-              {{ format }}
+              <button class="dropdown-button">
+                <b-icon :icon="formatToIcon(format)"></b-icon>
+                {{ format }}
+              </button>
             </b-dropdown-item>
           </b-dropdown>
         </div>
@@ -566,4 +570,21 @@ nav.breadcrumb {
     text-decoration: none;
   }
 }
+
+button.dropdown-button {
+  &:hover {
+    background-color: #f5f5f5;
+    color: #0a0a0a;
+  }
+  width: 100%;
+  display: flex;
+  flex: 1;
+  background: white;
+  border: none;
+  cursor: pointer;
+  color: #4a4a4a;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  padding: 0.375rem 1rem;
+}
 </style>