From 83eb746b5a1dcdd6214743cdcaf2e61b0853e14d Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Tue, 29 Jun 2021 10:41:40 +0200
Subject: [PATCH] Improve share modal accessibility

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/components/Event/ShareEventModal.vue | 50 ++++++++++++++++-----
 js/src/components/Group/ShareGroupModal.vue | 50 ++++++++++++++++-----
 2 files changed, 80 insertions(+), 20 deletions(-)

diff --git a/js/src/components/Event/ShareEventModal.vue b/js/src/components/Event/ShareEventModal.vue
index 82319ef7..83ddf3b9 100644
--- a/js/src/components/Event/ShareEventModal.vue
+++ b/js/src/components/Event/ShareEventModal.vue
@@ -27,8 +27,13 @@
         <small class="maximumNumberOfPlacesWarning" v-if="!eventCapacityOK">
           {{ $t("All the places have already been taken") }}
         </small>
-        <b-field>
-          <b-input ref="eventURLInput" :value="event.url" expanded />
+        <b-field :label="$t('Event URL')" label-for="event-url-text">
+          <b-input
+            id="event-url-text"
+            ref="eventURLInput"
+            :value="event.url"
+            expanded
+          />
           <p class="control">
             <b-tooltip
               :label="$t('URL copied to clipboard')"
@@ -43,14 +48,17 @@
                 native-type="button"
                 @click="copyURL"
                 @keyup.enter="copyURL"
+                :title="$t('Copy URL to clipboard')"
               />
             </b-tooltip>
           </p>
         </b-field>
         <div>
-          <!--                  <b-icon icon="mastodon" size="is-large" type="is-primary" />-->
-
-          <a :href="twitterShareUrl" target="_blank" rel="nofollow noopener"
+          <a
+            :href="twitterShareUrl"
+            target="_blank"
+            rel="nofollow noopener"
+            title="Twitter"
             ><b-icon icon="twitter" size="is-large" type="is-primary"
           /></a>
           <a
@@ -58,19 +66,36 @@
             class="mastodon"
             target="_blank"
             rel="nofollow noopener"
+            title="Mastodon"
           >
             <mastodon-logo />
           </a>
-          <a :href="facebookShareUrl" target="_blank" rel="nofollow noopener"
+          <a
+            :href="facebookShareUrl"
+            target="_blank"
+            rel="nofollow noopener"
+            title="Facebook"
             ><b-icon icon="facebook" size="is-large" type="is-primary"
           /></a>
-          <a :href="whatsAppShareUrl" target="_blank" rel="nofollow noopener"
+          <a
+            :href="whatsAppShareUrl"
+            target="_blank"
+            rel="nofollow noopener"
+            title="WhatsApp"
             ><b-icon icon="whatsapp" size="is-large" type="is-primary"
           /></a>
-          <a :href="telegramShareUrl" target="_blank" rel="nofollow noopener"
+          <a
+            :href="telegramShareUrl"
+            target="_blank"
+            rel="nofollow noopener"
+            title="Telegram"
             ><b-icon icon="telegram" size="is-large" type="is-primary"
           /></a>
-          <a :href="linkedInShareUrl" target="_blank" rel="nofollow noopener"
+          <a
+            :href="linkedInShareUrl"
+            target="_blank"
+            rel="nofollow noopener"
+            title="LinkedIn"
             ><b-icon icon="linkedin" size="is-large" type="is-primary"
           /></a>
           <a
@@ -78,10 +103,15 @@
             class="diaspora"
             target="_blank"
             rel="nofollow noopener"
+            title="Diaspora"
           >
             <diaspora-logo />
           </a>
-          <a :href="emailShareUrl" target="_blank" rel="nofollow noopener"
+          <a
+            :href="emailShareUrl"
+            target="_blank"
+            rel="nofollow noopener"
+            title="Email"
             ><b-icon icon="email" size="is-large" type="is-primary"
           /></a>
         </div>
diff --git a/js/src/components/Group/ShareGroupModal.vue b/js/src/components/Group/ShareGroupModal.vue
index 5dc5527a..257b666e 100644
--- a/js/src/components/Group/ShareGroupModal.vue
+++ b/js/src/components/Group/ShareGroupModal.vue
@@ -17,8 +17,13 @@
             )
           }}
         </b-notification>
-        <b-field>
-          <b-input ref="groupURLInput" :value="group.url" expanded />
+        <b-field :label="$t('Group URL')" label-for="group-url-text">
+          <b-input
+            id="group-url-text"
+            ref="groupURLInput"
+            :value="group.url"
+            expanded
+          />
           <p class="control">
             <b-tooltip
               :label="$t('URL copied to clipboard')"
@@ -33,14 +38,17 @@
                 native-type="button"
                 @click="copyURL"
                 @keyup.enter="copyURL"
+                :title="$t('Copy URL to clipboard')"
               />
             </b-tooltip>
           </p>
         </b-field>
         <div>
-          <!--                  <b-icon icon="mastodon" size="is-large" type="is-primary" />-->
-
-          <a :href="twitterShareUrl" target="_blank" rel="nofollow noopener"
+          <a
+            :href="twitterShareUrl"
+            target="_blank"
+            rel="nofollow noopener"
+            title="Twitter"
             ><b-icon icon="twitter" size="is-large" type="is-primary"
           /></a>
           <a
@@ -48,22 +56,40 @@
             class="mastodon"
             target="_blank"
             rel="nofollow noopener"
+            title="Mastodon"
           >
             <mastodon-logo />
           </a>
-          <a :href="facebookShareUrl" target="_blank" rel="nofollow noopener"
+          <a
+            :href="facebookShareUrl"
+            target="_blank"
+            rel="nofollow noopener"
+            title="Facebook"
             ><b-icon icon="facebook" size="is-large" type="is-primary"
           /></a>
-          <a :href="linkedInShareUrl" target="_blank" rel="nofollow noopener"
+          <a
+            :href="linkedInShareUrl"
+            target="_blank"
+            rel="nofollow noopener"
+            title="LinkedIn"
             ><b-icon icon="linkedin" size="is-large" type="is-primary"
           /></a>
-          <a :href="whatsAppShareUrl" target="_blank" rel="nofollow noopener"
+          <a
+            :href="whatsAppShareUrl"
+            target="_blank"
+            rel="nofollow noopener"
+            title="WhatsApp"
             ><b-icon icon="whatsapp" size="is-large" type="is-primary"
           /></a>
-          <a :href="telegramShareUrl" target="_blank" rel="nofollow noopener"
+          <a
+            :href="telegramShareUrl"
+            target="_blank"
+            rel="nofollow noopener"
+            title="Telegram"
             ><b-icon icon="telegram" size="is-large" type="is-primary"
           /></a>
           <a
+            title="Diaspora"
             :href="diasporaShareUrl"
             class="diaspora"
             target="_blank"
@@ -71,7 +97,11 @@
           >
             <diaspora-logo />
           </a>
-          <a :href="emailShareUrl" target="_blank" rel="nofollow noopener"
+          <a
+            :href="emailShareUrl"
+            target="_blank"
+            rel="nofollow noopener"
+            title="Email"
             ><b-icon icon="email" size="is-large" type="is-primary"
           /></a>
         </div>