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/components/Event/AddressAutoComplete.vue

@@ -31,6 +31,7 @@
         v-if="!gettingLocation"
         icon-right="target"
         @click="locateMe"
+        @keyup.enter="locateMe"
         >{{ $t("Use my location") }}</b-button
       >
       <span v-else>{{ $t("Getting location") }}</span>

js/src/components/Event/EventMetadataSidebar.vue

@@ -7,25 +7,15 @@
       <div class="address-wrapper">
         <span v-if="!physicalAddress">{{ $t("No address defined") }}</span>
         <div class="address" v-if="physicalAddress">
-          <div>
-            <address>
-              <p
-                class="addressDescription"
-                :title="physicalAddress.poiInfos.name"
-              >
-                {{ physicalAddress.poiInfos.name }}
-              </p>
-              <p class="has-text-grey-dark">
-                {{ physicalAddress.poiInfos.alternativeName }}
-              </p>
-            </address>
-          </div>
-          <span
+          <address-info :address="physicalAddress" />
+          <b-button
+            type="is-text"
             class="map-show-button"
             @click="showMap = !showMap"
             v-if="physicalAddress.geom"
-            >{{ $t("Show map") }}</span
           >
+            {{ $t("Show map") }}
+          </b-button>
         </div>
       </div>
     </event-metadata-block>

js/src/components/Event/ParticipationButton.vue

@@ -30,18 +30,22 @@ A button to set your participation
       position="is-bottom-left"
       v-if="participation && participation.role === ParticipantRole.PARTICIPANT"
     >
-      <button class="button is-success is-large" type="button" slot="trigger">
-        <b-icon icon="check" />
-        <template>
-          <span>{{ $t("I participate") }}</span>
-        </template>
-        <b-icon icon="menu-down" />
-      </button>
+      <template #trigger="{ active }">
+        <b-button
+          type="is-success"
+          size="is-large"
+          icon-left="check"
+          :icon-right="active ? 'menu-up' : 'menu-down'"
+        >
+          {{ $t("I participate") }}
+        </b-button>
+      </template>
 
       <b-dropdown-item
         :value="false"
         aria-role="listitem"
         @click="confirmLeave"
+        @keyup.enter="confirmLeave"
         class="has-text-danger"
         >{{ $t("Cancel my participation…") }}</b-dropdown-item
       >
@@ -73,6 +77,7 @@ A button to set your participation
           :value="false"
           aria-role="listitem"
           @click="confirmLeave"
+          @keyup.enter="confirmLeave"
           class="has-text-danger"
           >{{ $t("Cancel my participation request…") }}</b-dropdown-item
         >
@@ -101,17 +106,21 @@ A button to set your participation
       position="is-bottom-left"
       v-else-if="!participation && currentActor.id"
     >
-      <button class="button is-primary is-large" type="button" slot="trigger">
-        <template>
-          <span>{{ $t("Participate") }}</span>
-        </template>
-        <b-icon icon="menu-down" />
-      </button>
+      <template #trigger="{ active }">
+        <b-button
+          type="is-primary"
+          size="is-large"
+          :icon-right="active ? 'menu-up' : 'menu-down'"
+        >
+          {{ $t("Participate") }}
+        </b-button>
+      </template>
 
       <b-dropdown-item
         :value="true"
         aria-role="listitem"
         @click="joinEvent(currentActor)"
+        @keyup.enter="joinEvent(currentActor)"
       >
         <div class="media">
           <div class="media-left">
@@ -136,6 +145,7 @@ A button to set your participation
         :value="false"
         aria-role="listitem"
         @click="joinModal"
+        @keyup.enter="joinModal"
         v-if="identities.length > 1"
         >{{ $t("with another identity…") }}</b-dropdown-item
       >