Improve share modal accessibility
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
parent
d383d0ecff
commit
83eb746b5a
@ -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>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user