tommy/mobilizon
1
0
Fork 0
forked from potsda.mn/mobilizon
Code Pull requests Activity

Improve share modal accessibility

Browse source 
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"> <small class="maximumNumberOfPlacesWarning" v-if="!eventCapacityOK">
{{ $t("All the places have already been taken") }} {{ $t("All the places have already been taken") }}
</small> </small>
<b-field> <b-field :label="$t('Event URL')" label-for="event-url-text">
<b-input ref="eventURLInput" :value="event.url" expanded /> <b-input
id="event-url-text"
ref="eventURLInput"
:value="event.url"
expanded
/>
<p class="control"> <p class="control">
<b-tooltip <b-tooltip
:label="$t('URL copied to clipboard')" :label="$t('URL copied to clipboard')"
@ -43,14 +48,17 @@
native-type="button" native-type="button"
@click="copyURL" @click="copyURL"
@keyup.enter="copyURL" @keyup.enter="copyURL"
:title="$t('Copy URL to clipboard')"
/> />
</b-tooltip> </b-tooltip>
</p> </p>
</b-field> </b-field>
<div> <div>
<!-- <b-icon icon="mastodon" size="is-large" type="is-primary" />--> <a
:href="twitterShareUrl"
<a :href="twitterShareUrl" target="_blank" rel="nofollow noopener" target="_blank"
rel="nofollow noopener"
title="Twitter"
><b-icon icon="twitter" size="is-large" type="is-primary" ><b-icon icon="twitter" size="is-large" type="is-primary"
/></a> /></a>
<a <a
@ -58,19 +66,36 @@
class="mastodon" class="mastodon"
target="_blank" target="_blank"
rel="nofollow noopener" rel="nofollow noopener"
title="Mastodon"
> >
<mastodon-logo /> <mastodon-logo />
</a> </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" ><b-icon icon="facebook" size="is-large" type="is-primary"
/></a> /></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" ><b-icon icon="whatsapp" size="is-large" type="is-primary"
/></a> /></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" ><b-icon icon="telegram" size="is-large" type="is-primary"
/></a> /></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" ><b-icon icon="linkedin" size="is-large" type="is-primary"
/></a> /></a>
<a <a
@ -78,10 +103,15 @@
class="diaspora" class="diaspora"
target="_blank" target="_blank"
rel="nofollow noopener" rel="nofollow noopener"
title="Diaspora"
> >
<diaspora-logo /> <diaspora-logo />
</a> </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" ><b-icon icon="email" size="is-large" type="is-primary"
/></a> /></a>
</div> </div>

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

@ -17,8 +17,13 @@
) )
}} }}
</b-notification> </b-notification>
<b-field> <b-field :label="$t('Group URL')" label-for="group-url-text">
<b-input ref="groupURLInput" :value="group.url" expanded /> <b-input
id="group-url-text"
ref="groupURLInput"
:value="group.url"
expanded
/>
<p class="control"> <p class="control">
<b-tooltip <b-tooltip
:label="$t('URL copied to clipboard')" :label="$t('URL copied to clipboard')"
@ -33,14 +38,17 @@
native-type="button" native-type="button"
@click="copyURL" @click="copyURL"
@keyup.enter="copyURL" @keyup.enter="copyURL"
:title="$t('Copy URL to clipboard')"
/> />
</b-tooltip> </b-tooltip>
</p> </p>
</b-field> </b-field>
<div> <div>
<!-- <b-icon icon="mastodon" size="is-large" type="is-primary" />--> <a
:href="twitterShareUrl"
<a :href="twitterShareUrl" target="_blank" rel="nofollow noopener" target="_blank"
rel="nofollow noopener"
title="Twitter"
><b-icon icon="twitter" size="is-large" type="is-primary" ><b-icon icon="twitter" size="is-large" type="is-primary"
/></a> /></a>
<a <a
@ -48,22 +56,40 @@
class="mastodon" class="mastodon"
target="_blank" target="_blank"
rel="nofollow noopener" rel="nofollow noopener"
title="Mastodon"
> >
<mastodon-logo /> <mastodon-logo />
</a> </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" ><b-icon icon="facebook" size="is-large" type="is-primary"
/></a> /></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" ><b-icon icon="linkedin" size="is-large" type="is-primary"
/></a> /></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" ><b-icon icon="whatsapp" size="is-large" type="is-primary"
/></a> /></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" ><b-icon icon="telegram" size="is-large" type="is-primary"
/></a> /></a>
<a <a
title="Diaspora"
:href="diasporaShareUrl" :href="diasporaShareUrl"
class="diaspora" class="diaspora"
target="_blank" target="_blank"
@ -71,7 +97,11 @@
> >
<diaspora-logo /> <diaspora-logo />
</a> </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" ><b-icon icon="email" size="is-large" type="is-primary"
/></a> /></a>
</div> </div>