Chapril/mobilizon.chapril.org-mobilizon
Chapril
/
mobilizon.chapril.org-mobilizon
24
0
Fork 0
Code Issues Pull Requests Releases Activity

Improve share modal accessibility 

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2021-06-29 10:41:40 +02:00
parent d383d0ecff
commit 83eb746b5a
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
2 changed files with 80 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
js/src/components/Event/ShareEventModal.vue
View File

@ -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>

50
js/src/components/Group/ShareGroupModal.vue
View File

@ -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>