Various accessibility improvements

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2021-09-07 17:52:34 +02:00
parent d36f1d4b5e
commit 291a788438
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
28 changed files with 437 additions and 242 deletions

View File

@ -16,6 +16,7 @@
:class="{ 'is-active': editor.isActive('bold') }" :class="{ 'is-active': editor.isActive('bold') }"
@click="editor.chain().focus().toggleBold().run()" @click="editor.chain().focus().toggleBold().run()"
type="button" type="button"
:title="$t('Bold')"
> >
<b-icon icon="format-bold" /> <b-icon icon="format-bold" />
</button> </button>
@ -25,6 +26,7 @@
:class="{ 'is-active': editor.isActive('italic') }" :class="{ 'is-active': editor.isActive('italic') }"
@click="editor.chain().focus().toggleItalic().run()" @click="editor.chain().focus().toggleItalic().run()"
type="button" type="button"
:title="$t('Italic')"
> >
<b-icon icon="format-italic" /> <b-icon icon="format-italic" />
</button> </button>
@ -34,6 +36,7 @@
:class="{ 'is-active': editor.isActive('underline') }" :class="{ 'is-active': editor.isActive('underline') }"
@click="editor.chain().focus().toggleUnderline().run()" @click="editor.chain().focus().toggleUnderline().run()"
type="button" type="button"
:title="$t('Underline')"
> >
<b-icon icon="format-underline" /> <b-icon icon="format-underline" />
</button> </button>
@ -44,6 +47,7 @@
:class="{ 'is-active': editor.isActive('heading', { level: 1 }) }" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
@click="editor.chain().focus().toggleHeading({ level: 1 }).run()" @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
type="button" type="button"
:title="$t('Heading Level 1')"
> >
<b-icon icon="format-header-1" /> <b-icon icon="format-header-1" />
</button> </button>
@ -54,6 +58,7 @@
:class="{ 'is-active': editor.isActive('heading', { level: 2 }) }" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
@click="editor.chain().focus().toggleHeading({ level: 2 }).run()" @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
type="button" type="button"
:title="$t('Heading Level 2')"
> >
<b-icon icon="format-header-2" /> <b-icon icon="format-header-2" />
</button> </button>
@ -64,6 +69,7 @@
:class="{ 'is-active': editor.isActive('heading', { level: 3 }) }" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
@click="editor.chain().focus().toggleHeading({ level: 3 }).run()" @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
type="button" type="button"
:title="$t('Heading Level 3')"
> >
<b-icon icon="format-header-3" /> <b-icon icon="format-header-3" />
</button> </button>
@ -73,6 +79,7 @@
@click="showLinkMenu()" @click="showLinkMenu()"
:class="{ 'is-active': editor.isActive('link') }" :class="{ 'is-active': editor.isActive('link') }"
type="button" type="button"
:title="$t('Add link')"
> >
<b-icon icon="link" /> <b-icon icon="link" />
</button> </button>
@ -82,6 +89,7 @@
class="menubar__button" class="menubar__button"
@click="editor.chain().focus().unsetLink().run()" @click="editor.chain().focus().unsetLink().run()"
type="button" type="button"
:title="$t('Remove link')"
> >
<b-icon icon="link-off" /> <b-icon icon="link-off" />
</button> </button>
@ -91,6 +99,7 @@
v-if="!isBasicMode" v-if="!isBasicMode"
@click="showImagePrompt()" @click="showImagePrompt()"
type="button" type="button"
:title="$t('Add picture')"
> >
<b-icon icon="image" /> <b-icon icon="image" />
</button> </button>
@ -101,6 +110,7 @@
:class="{ 'is-active': editor.isActive('bulletList') }" :class="{ 'is-active': editor.isActive('bulletList') }"
@click="editor.chain().focus().toggleBulletList().run()" @click="editor.chain().focus().toggleBulletList().run()"
type="button" type="button"
:title="$t('Bullet list')"
> >
<b-icon icon="format-list-bulleted" /> <b-icon icon="format-list-bulleted" />
</button> </button>
@ -111,6 +121,7 @@
:class="{ 'is-active': editor.isActive('orderedList') }" :class="{ 'is-active': editor.isActive('orderedList') }"
@click="editor.chain().focus().toggleOrderedList().run()" @click="editor.chain().focus().toggleOrderedList().run()"
type="button" type="button"
:title="$t('Ordered list')"
> >
<b-icon icon="format-list-numbered" /> <b-icon icon="format-list-numbered" />
</button> </button>
@ -121,6 +132,7 @@
:class="{ 'is-active': editor.isActive('blockquote') }" :class="{ 'is-active': editor.isActive('blockquote') }"
@click="editor.chain().focus().toggleBlockquote().run()" @click="editor.chain().focus().toggleBlockquote().run()"
type="button" type="button"
:title="$t('Quote')"
> >
<b-icon icon="format-quote-close" /> <b-icon icon="format-quote-close" />
</button> </button>
@ -130,6 +142,7 @@
class="menubar__button" class="menubar__button"
@click="editor.chain().focus().undo().run()" @click="editor.chain().focus().undo().run()"
type="button" type="button"
:title="$t('Undo')"
> >
<b-icon icon="undo" /> <b-icon icon="undo" />
</button> </button>
@ -139,6 +152,7 @@
class="menubar__button" class="menubar__button"
@click="editor.chain().focus().redo().run()" @click="editor.chain().focus().redo().run()"
type="button" type="button"
:title="$t('Redo')"
> >
<b-icon icon="redo" /> <b-icon icon="redo" />
</button> </button>
@ -155,6 +169,7 @@
:class="{ 'is-active': editor.isActive('bold') }" :class="{ 'is-active': editor.isActive('bold') }"
@click="editor.chain().focus().toggleBold().run()" @click="editor.chain().focus().toggleBold().run()"
type="button" type="button"
:title="$t('Bold')"
> >
<b-icon icon="format-bold" /> <b-icon icon="format-bold" />
<span class="visually-hidden">{{ $t("Bold") }}</span> <span class="visually-hidden">{{ $t("Bold") }}</span>
@ -165,6 +180,7 @@
:class="{ 'is-active': editor.isActive('italic') }" :class="{ 'is-active': editor.isActive('italic') }"
@click="editor.chain().focus().toggleItalic().run()" @click="editor.chain().focus().toggleItalic().run()"
type="button" type="button"
:title="$t('Italic')"
> >
<b-icon icon="format-italic" /> <b-icon icon="format-italic" />
<span class="visually-hidden">{{ $t("Italic") }}</span> <span class="visually-hidden">{{ $t("Italic") }}</span>

View File

@ -12,7 +12,7 @@
<h2 class="title">{{ event.title }}</h2> <h2 class="title">{{ event.title }}</h2>
</router-link> </router-link>
</div> </div>
<div class="participation-actor has-text-grey"> <div class="participation-actor has-text-grey-dark">
<span v-if="event.physicalAddress && event.physicalAddress.locality"> <span v-if="event.physicalAddress && event.physicalAddress.locality">
{{ event.physicalAddress.locality }} {{ event.physicalAddress.locality }}
</span> </span>

View File

@ -9,6 +9,7 @@
:src="`/img/${metadataItem.icon.substring(8)}_monochrome.svg`" :src="`/img/${metadataItem.icon.substring(8)}_monochrome.svg`"
width="24" width="24"
height="24" height="24"
alt=""
/> />
<b-icon v-else-if="metadataItem.icon" :icon="metadataItem.icon" /> <b-icon v-else-if="metadataItem.icon" :icon="metadataItem.icon" />

View File

@ -9,7 +9,11 @@
/> />
</div> </div>
</div> </div>
<b-field grouped :label="$t('Find or add an element')"> <b-field
grouped
:label="$t('Find or add an element')"
label-for="event-metadata-autocomplete"
>
<b-autocomplete <b-autocomplete
expanded expanded
v-model="search" v-model="search"
@ -19,6 +23,7 @@
group-options="items" group-options="items"
open-on-focus open-on-focus
:placeholder="$t('e.g. Accessibility, Twitch, PeerTube')" :placeholder="$t('e.g. Accessibility, Twitch, PeerTube')"
id="event-metadata-autocomplete"
@select="(option) => addElement(option)" @select="(option) => addElement(option)"
> >
<template slot-scope="props"> <template slot-scope="props">
@ -32,6 +37,7 @@
:src="`/img/${props.option.icon.substring(8)}_monochrome.svg`" :src="`/img/${props.option.icon.substring(8)}_monochrome.svg`"
width="24" width="24"
height="24" height="24"
alt=""
/> />
<b-icon v-else-if="props.option.icon" :icon="props.option.icon" /> <b-icon v-else-if="props.option.icon" :icon="props.option.icon" />
<b-icon v-else icon="help-circle" /> <b-icon v-else icon="help-circle" />

View File

@ -12,14 +12,14 @@
<img <img
class="image is-rounded" class="image is-rounded"
:src="selectedActor.avatar.url" :src="selectedActor.avatar.url"
:alt="selectedActor.avatar.alt" :alt="selectedActor.avatar.alt || ''"
/> />
</figure> </figure>
<b-icon v-else size="is-large" icon="account-circle" /> <b-icon v-else size="is-large" icon="account-circle" />
</div> </div>
<div class="media-content" v-if="selectedActor.name"> <div class="media-content" v-if="selectedActor.name">
<p class="is-4">{{ selectedActor.name }}</p> <p class="is-4">{{ selectedActor.name }}</p>
<p class="is-6 has-text-grey"> <p class="is-6 has-text-grey-dark">
{{ `@${selectedActor.preferredUsername}` }} {{ `@${selectedActor.preferredUsername}` }}
</p> </p>
</div> </div>

View File

@ -1,5 +1,5 @@
<template> <template>
<b-field> <b-field :label-for="id">
<template slot="label"> <template slot="label">
{{ $t("Add some tags") }} {{ $t("Add some tags") }}
<b-tooltip <b-tooltip
@ -22,6 +22,7 @@
maxtags="10" maxtags="10"
:placeholder="$t('Eg: Stockholm, Dance, Chess…')" :placeholder="$t('Eg: Stockholm, Dance, Chess…')"
@typing="getFilteredTags" @typing="getFilteredTags"
:id="id"
> >
</b-taginput> </b-taginput>
</b-field> </b-field>
@ -59,6 +60,16 @@ export default class TagInput extends Vue {
filteredTags: ITag[] = []; filteredTags: ITag[] = [];
private static componentId = 0;
created(): void {
TagInput.componentId += 1;
}
get id(): string {
return `tag-input-${TagInput.componentId}`;
}
getFilteredTags(text: string): void { getFilteredTags(text: string): void {
this.filteredTags = differenceBy(this.data, this.value, "id").filter( this.filteredTags = differenceBy(this.data, this.value, "id").filter(
(option) => (option) =>

View File

@ -20,6 +20,7 @@
<ul> <ul>
<li> <li>
<b-select <b-select
:aria-label="$t('Language')"
v-if="$i18n" v-if="$i18n"
v-model="locale" v-model="locale"
:placeholder="$t('Select a language')" :placeholder="$t('Select a language')"

View File

@ -24,8 +24,8 @@
}, },
}" }"
> >
<h3>{{ member.parent.name }}</h3> <h2>{{ member.parent.name }}</h2>
<p class="is-6 has-text-grey"> <p class="is-6 has-text-grey-dark">
<span v-if="member.parent.domain">{{ <span v-if="member.parent.domain">{{
`@${member.parent.preferredUsername}@${member.parent.domain}` `@${member.parent.preferredUsername}@${member.parent.domain}`
}}</span> }}</span>

View File

@ -22,13 +22,13 @@
post.visibility === PostVisibility.PUBLIC && post.visibility === PostVisibility.PUBLIC &&
isCurrentActorMember isCurrentActorMember
" "
class="has-text-grey" class="has-text-grey-dark"
> >
<b-icon icon="earth" size="is-small" />{{ $t("Public") }}</small <b-icon icon="earth" size="is-small" />{{ $t("Public") }}</small
> >
<small <small
v-else-if="post.visibility === PostVisibility.UNLISTED" v-else-if="post.visibility === PostVisibility.UNLISTED"
class="has-text-grey" class="has-text-grey-dark"
> >
<b-icon icon="link" size="is-small" />{{ <b-icon icon="link" size="is-small" />{{
$t("Accessible through link") $t("Accessible through link")
@ -36,7 +36,7 @@
> >
<small <small
v-else-if="post.visibility === PostVisibility.PRIVATE" v-else-if="post.visibility === PostVisibility.PRIVATE"
class="has-text-grey" class="has-text-grey-dark"
> >
<b-icon icon="lock" size="is-small" />{{ <b-icon icon="lock" size="is-small" />{{
$t("Accessible only to members", { $t("Accessible only to members", {
@ -44,13 +44,13 @@
}) })
}}</small }}</small
> >
<small class="has-text-grey">{{ <small class="has-text-grey-dark">{{
$options.filters.formatDateTimeString( $options.filters.formatDateTimeString(
new Date(post.insertedAt), new Date(post.insertedAt),
false false
) )
}}</small> }}</small>
<small class="has-text-grey" v-if="isCurrentActorMember">{{ <small class="has-text-grey-dark" v-if="isCurrentActorMember">{{
$t("Created by {username}", { $t("Created by {username}", {
username: `@${usernameWithDomain(post.author)}`, username: `@${usernameWithDomain(post.author)}`,
}) })

View File

@ -31,7 +31,7 @@
$t("About this instance") $t("About this instance")
}}</router-link> }}</router-link>
</p> </p>
<p class="menu-label"> <p class="menu-label has-text-grey-dark">
{{ $t("Legal") }} {{ $t("Legal") }}
</p> </p>
<ul class="menu-list"> <ul class="menu-list">
@ -64,8 +64,10 @@
</div> </div>
</main> </main>
<!-- We hide the "Find an instance button until https://joinmobilizon.org gets a instance picker --> <div
<div class="hero register is-primary is-medium"> class="hero register is-primary is-medium"
v-if="!currentUser || !currentUser.id"
>
<div class="hero-body"> <div class="hero-body">
<div class="container has-text-centered"> <div class="container has-text-centered">
<div class="columns"> <div class="columns">

View File

@ -36,12 +36,17 @@
class="picture-upload" class="picture-upload"
/> />
<b-field horizontal :label="$t('Display name')"> <b-field
horizontal
:label="$t('Display name')"
label-for="identity-display-name"
>
<b-input <b-input
aria-required="true" aria-required="true"
required required
v-model="identity.name" v-model="identity.name"
@input="autoUpdateUsername($event)" @input="autoUpdateUsername($event)"
id="identity-display-name"
/> />
</b-field> </b-field>
@ -50,6 +55,7 @@
custom-class="username-field" custom-class="username-field"
expanded expanded
:label="$t('Username')" :label="$t('Username')"
label-for="identity-username"
:message="message" :message="message"
> >
<b-field expanded> <b-field expanded>
@ -60,6 +66,7 @@
:disabled="isUpdate" :disabled="isUpdate"
:use-html5-validation="!isUpdate" :use-html5-validation="!isUpdate"
pattern="[a-z0-9_]+" pattern="[a-z0-9_]+"
id="identity-username"
/> />
<p class="control"> <p class="control">
@ -68,11 +75,16 @@
</b-field> </b-field>
</b-field> </b-field>
<b-field horizontal :label="$t('Description')"> <b-field
horizontal
:label="$t('Description')"
label-for="identity-summary"
>
<b-input <b-input
type="textarea" type="textarea"
aria-required="false" aria-required="false"
v-model="identity.summary" v-model="identity.summary"
id="identity-summary"
/> />
</b-field> </b-field>
@ -94,11 +106,15 @@
</div> </div>
</b-field> </b-field>
<div class="delete-identity" v-if="isUpdate"> <b-field class="delete-identity">
<span @click="openDeleteIdentityConfirmation()">{{ <b-button
$t("Delete this identity") v-if="isUpdate"
}}</span> @click="openDeleteIdentityConfirmation()"
</div> type="is-text"
>
{{ $t("Delete this identity") }}
</b-button>
</b-field>
<section v-if="isUpdate"> <section v-if="isUpdate">
<div class="setting-title"> <div class="setting-title">
@ -194,12 +210,6 @@ h1 {
margin: 30px 0; margin: 30px 0;
} }
.delete-identity {
text-decoration: underline;
cursor: pointer;
margin-top: 15px;
}
.username-field + .field { .username-field + .field {
margin-bottom: 0; margin-bottom: 0;
} }

View File

@ -41,10 +41,10 @@
> >
<template #searchable="props"> <template #searchable="props">
<b-input <b-input
:aria-label="$t('Filter')"
v-model="props.filters.preferredUsername" v-model="props.filters.preferredUsername"
placeholder="Search..." :placeholder="$t('Filter')"
icon="magnify" icon="magnify"
size="is-small"
/> />
</template> </template>
<template v-slot:default="props"> <template v-slot:default="props">
@ -58,7 +58,10 @@
<article class="media"> <article class="media">
<figure class="media-left" v-if="props.row.avatar"> <figure class="media-left" v-if="props.row.avatar">
<p class="image is-48x48"> <p class="image is-48x48">
<img :src="props.row.avatar.url" /> <img
:src="props.row.avatar.url"
:alt="props.row.avatar.alt || ''"
/>
</p> </p>
</figure> </figure>
<div class="media-content"> <div class="media-content">
@ -76,10 +79,10 @@
<b-table-column field="domain" :label="$t('Domain')" searchable> <b-table-column field="domain" :label="$t('Domain')" searchable>
<template #searchable="props"> <template #searchable="props">
<b-input <b-input
:aria-label="$t('Filter')"
v-model="props.filters.domain" v-model="props.filters.domain"
placeholder="Search..." :placeholder="$t('Filter')"
icon="magnify" icon="magnify"
size="is-small"
/> />
</template> </template>
<template v-slot:default="props"> <template v-slot:default="props">

View File

@ -42,9 +42,9 @@
<template #searchable="props"> <template #searchable="props">
<b-input <b-input
v-model="props.filters.preferredUsername" v-model="props.filters.preferredUsername"
placeholder="Search..." :aria-label="$t('Filter')"
:placeholder="$t('Filter')"
icon="magnify" icon="magnify"
size="is-small"
/> />
</template> </template>
<template v-slot:default="props"> <template v-slot:default="props">
@ -58,7 +58,10 @@
<article class="media"> <article class="media">
<figure class="media-left" v-if="props.row.avatar"> <figure class="media-left" v-if="props.row.avatar">
<p class="image is-48x48"> <p class="image is-48x48">
<img :src="props.row.avatar.url" /> <img
:src="props.row.avatar.url"
:alt="props.row.avatar.alt || ''"
/>
</p> </p>
</figure> </figure>
<div class="media-content"> <div class="media-content">
@ -77,9 +80,9 @@
<template #searchable="props"> <template #searchable="props">
<b-input <b-input
v-model="props.filters.domain" v-model="props.filters.domain"
placeholder="Search..." :aria-label="$t('Filter')"
:placeholder="$t('Filter')"
icon="magnify" icon="magnify"
size="is-small"
/> />
</template> </template>
<template v-slot:default="props"> <template v-slot:default="props">

View File

@ -16,11 +16,11 @@
</nav> </nav>
<section v-if="adminSettings"> <section v-if="adminSettings">
<form @submit.prevent="updateSettings"> <form @submit.prevent="updateSettings">
<b-field :label="$t('Instance Name')"> <b-field :label="$t('Instance Name')" label-for="instance-name">
<b-input v-model="adminSettings.instanceName" /> <b-input v-model="adminSettings.instanceName" id="instance-name" />
</b-field> </b-field>
<div class="field"> <div class="field">
<label class="label has-help">{{ <label class="label has-help" for="instance-description">{{
$t("Instance Short Description") $t("Instance Short Description")
}}</label> }}</label>
<small> <small>
@ -34,10 +34,13 @@
type="textarea" type="textarea"
v-model="adminSettings.instanceDescription" v-model="adminSettings.instanceDescription"
rows="2" rows="2"
id="instance-name"
/> />
</div> </div>
<div class="field"> <div class="field">
<label class="label has-help">{{ $t("Instance Slogan") }}</label> <label class="label has-help" for="instance-slogan">{{
$t("Instance Slogan")
}}</label>
<small> <small>
{{ {{
$t( $t(
@ -48,14 +51,17 @@
<b-input <b-input
v-model="adminSettings.instanceSlogan" v-model="adminSettings.instanceSlogan"
:placeholder="$t('Gather ⋅ Organize ⋅ Mobilize')" :placeholder="$t('Gather ⋅ Organize ⋅ Mobilize')"
id="instance-slogan"
/> />
</div> </div>
<div class="field"> <div class="field">
<label class="label has-help">{{ $t("Contact") }}</label> <label class="label has-help" for="instance-contact">{{
$t("Contact")
}}</label>
<small> <small>
{{ $t("Can be an email or a link, or just plain text.") }} {{ $t("Can be an email or a link, or just plain text.") }}
</small> </small>
<b-input v-model="adminSettings.contact" /> <b-input v-model="adminSettings.contact" id="instance-contact" />
</div> </div>
<b-field :label="$t('Allow registrations')"> <b-field :label="$t('Allow registrations')">
<b-switch v-model="adminSettings.registrationsOpen"> <b-switch v-model="adminSettings.registrationsOpen">
@ -66,7 +72,9 @@
</b-switch> </b-switch>
</b-field> </b-field>
<div class="field"> <div class="field">
<label class="label has-help">{{ $t("Instance languages") }}</label> <label class="label has-help" for="instance-languages">{{
$t("Instance languages")
}}</label>
<small> <small>
{{ $t("Main languages you/your moderators speak") }} {{ $t("Main languages you/your moderators speak") }}
</small> </small>
@ -79,12 +87,13 @@
icon="label" icon="label"
:placeholder="$t('Select languages')" :placeholder="$t('Select languages')"
@typing="getFilteredLanguages" @typing="getFilteredLanguages"
id="instance-languages"
> >
<template slot="empty">{{ $t("No languages found") }}</template> <template slot="empty">{{ $t("No languages found") }}</template>
</b-taginput> </b-taginput>
</div> </div>
<div class="field"> <div class="field">
<label class="label has-help">{{ <label class="label has-help" for="instance-long-description">{{
$t("Instance Long Description") $t("Instance Long Description")
}}</label> }}</label>
<small> <small>
@ -98,10 +107,13 @@
type="textarea" type="textarea"
v-model="adminSettings.instanceLongDescription" v-model="adminSettings.instanceLongDescription"
rows="4" rows="4"
id="instance-long-description"
/> />
</div> </div>
<div class="field"> <div class="field">
<label class="label has-help">{{ $t("Instance Rules") }}</label> <label class="label has-help" for="instance-rules">{{
$t("Instance Rules")
}}</label>
<small> <small>
{{ {{
$t( $t(
@ -109,11 +121,19 @@
) )
}} }}
</small> </small>
<b-input type="textarea" v-model="adminSettings.instanceRules" /> <b-input
type="textarea"
v-model="adminSettings.instanceRules"
id="instance-rules"
/>
</div> </div>
<b-field :label="$t('Instance Terms Source')"> <b-field :label="$t('Instance Terms Source')">
<div class="columns"> <div class="columns">
<div class="column is-one-third-desktop"> <div class="column is-one-third-desktop">
<fieldset>
<legend>
{{ $t("Choose the source of the instance's Terms") }}
</legend>
<b-field> <b-field>
<b-radio <b-radio
v-model="adminSettings.instanceTermsType" v-model="adminSettings.instanceTermsType"
@ -138,6 +158,7 @@
>{{ $t("Custom text") }}</b-radio >{{ $t("Custom text") }}</b-radio
> >
</b-field> </b-field>
</fieldset>
</div> </div>
<div class="column"> <div class="column">
<div <div
@ -215,6 +236,10 @@
<b-field :label="$t('Instance Privacy Policy Source')"> <b-field :label="$t('Instance Privacy Policy Source')">
<div class="columns"> <div class="columns">
<div class="column is-one-third-desktop"> <div class="column is-one-third-desktop">
<fieldset>
<legend>
{{ $t("Choose the source of the instance's Privacy Policy") }}
</legend>
<b-field> <b-field>
<b-radio <b-radio
v-model="adminSettings.instancePrivacyPolicyType" v-model="adminSettings.instancePrivacyPolicyType"
@ -239,6 +264,7 @@
>{{ $t("Custom text") }}</b-radio >{{ $t("Custom text") }}</b-radio
> >
</b-field> </b-field>
</fieldset>
</div> </div>
<div class="column"> <div class="column">
<div <div
@ -430,13 +456,6 @@ export default class Settings extends Vue {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.notification a {
color: $primary !important;
text-decoration: underline !important;
text-decoration-color: #fea72b !important;
text-decoration-thickness: 2px !important;
}
label.label.has-help { label.label.has-help {
margin-bottom: 0; margin-bottom: 0;
} }

View File

@ -41,9 +41,9 @@
<template #searchable="props"> <template #searchable="props">
<b-input <b-input
v-model="props.filters.email" v-model="props.filters.email"
:placeholder="$t('Search…')" :aria-label="$t('Filter')"
:placeholder="$t('Filter')"
icon="magnify" icon="magnify"
size="is-small"
/> />
</template> </template>
<template v-slot:default="props"> <template v-slot:default="props">

View File

@ -18,6 +18,7 @@
<b-field <b-field
:label="$t('Title')" :label="$t('Title')"
label-for="title"
:type="checkTitleLength[0]" :type="checkTitleLength[0]"
:message="checkTitleLength[1]" :message="checkTitleLength[1]"
> >
@ -26,12 +27,18 @@
aria-required="true" aria-required="true"
required required
v-model="event.title" v-model="event.title"
id="title"
/> />
</b-field> </b-field>
<tag-input v-model="event.tags" :data="tags" path="title" /> <tag-input v-model="event.tags" :data="tags" path="title" />
<b-field horizontal :label="$t('Starts on…')" class="begins-on-field"> <b-field
horizontal
:label="$t('Starts on…')"
class="begins-on-field"
label-for="begins-on-field"
>
<b-datetimepicker <b-datetimepicker
class="datepicker starts-on" class="datepicker starts-on"
:placeholder="$t('Type or select a date…')" :placeholder="$t('Type or select a date…')"
@ -40,11 +47,16 @@
v-model="event.beginsOn" v-model="event.beginsOn"
horizontal-time-picker horizontal-time-picker
editable editable
:datepicker="{
id: 'begins-on-field',
'aria-next-label': $t('Next month'),
'aria-previous-label': $t('Previous month'),
}"
> >
</b-datetimepicker> </b-datetimepicker>
</b-field> </b-field>
<b-field horizontal :label="$t('Ends on…')"> <b-field horizontal :label="$t('Ends on…')" label-for="ends-on-field">
<b-datetimepicker <b-datetimepicker
class="datepicker ends-on" class="datepicker ends-on"
:placeholder="$t('Type or select a date…')" :placeholder="$t('Type or select a date…')"
@ -54,6 +66,11 @@
horizontal-time-picker horizontal-time-picker
:min-datetime="event.beginsOn" :min-datetime="event.beginsOn"
editable editable
:datepicker="{
id: 'ends-on-field',
'aria-next-label': $t('Next month'),
'aria-previous-label': $t('Previous month'),
}"
> >
</b-datetimepicker> </b-datetimepicker>
</b-field> </b-field>
@ -70,12 +87,13 @@
<editor v-model="event.description" /> <editor v-model="event.description" />
</div> </div>
<b-field :label="$t('Website / URL')"> <b-field :label="$t('Website / URL')" label-for="website-url">
<b-input <b-input
icon="link" icon="link"
type="url" type="url"
v-model="event.onlineAddress" v-model="event.onlineAddress"
placeholder="URL" placeholder="URL"
id="website-url"
/> />
</b-field> </b-field>
@ -132,6 +150,14 @@
</p> </p>
<event-metadata-list v-model="event.metadata" /> <event-metadata-list v-model="event.metadata" />
<subtitle>{{ $t("Who can view this event and participate") }}</subtitle> <subtitle>{{ $t("Who can view this event and participate") }}</subtitle>
<fieldset>
<legend>
{{
$t(
"When the event is private, you'll need to share the link around."
)
}}
</legend>
<div class="field"> <div class="field">
<b-radio <b-radio
v-model="event.visibility" v-model="event.visibility"
@ -148,6 +174,7 @@
>{{ $t("Only accessible through link (private)") }}</b-radio >{{ $t("Only accessible through link (private)") }}</b-radio
> >
</div> </div>
</fieldset>
<!-- <div class="field"> <!-- <div class="field">
<b-radio v-model="event.visibility" <b-radio v-model="event.visibility"
name="eventVisibility" name="eventVisibility"
@ -196,11 +223,14 @@
</div> </div>
<div class="box" v-if="limitedPlaces"> <div class="box" v-if="limitedPlaces">
<b-field :label="$t('Number of places')"> <b-field :label="$t('Number of places')" label-for="number-of-places">
<b-numberinput <b-numberinput
controls-position="compact" controls-position="compact"
:aria-minus-label="$t('Decrease')"
:aria-plus-label="$t('Increase')"
min="1" min="1"
v-model="eventOptions.maximumAttendeeCapacity" v-model="eventOptions.maximumAttendeeCapacity"
id="number-of-places"
/> />
</b-field> </b-field>
<!-- <!--
@ -219,6 +249,8 @@
<subtitle>{{ $t("Public comment moderation") }}</subtitle> <subtitle>{{ $t("Public comment moderation") }}</subtitle>
<fieldset>
<legend>{{ $t("Who can post a comment?") }}</legend>
<div class="field"> <div class="field">
<b-radio <b-radio
v-model="eventOptions.commentModeration" v-model="eventOptions.commentModeration"
@ -244,9 +276,18 @@
>{{ $t("Close comments for all (except for admins)") }}</b-radio >{{ $t("Close comments for all (except for admins)") }}</b-radio
> >
</div> </div>
</fieldset>
<subtitle>{{ $t("Status") }}</subtitle> <subtitle>{{ $t("Status") }}</subtitle>
<fieldset>
<legend>
{{
$t(
"Does the event needs to be confirmed later or is it cancelled?"
)
}}
</legend>
<b-field class="event__status__field"> <b-field class="event__status__field">
<b-radio-button <b-radio-button
v-model="event.status" v-model="event.status"
@ -276,6 +317,7 @@
{{ $t("Cancelled: Won't happen") }} {{ $t("Cancelled: Won't happen") }}
</b-radio-button> </b-radio-button>
</b-field> </b-field>
</fieldset>
</form> </form>
</div> </div>
<div class="container section" v-else> <div class="container section" v-else>
@ -370,6 +412,16 @@
<style lang="scss" scoped> <style lang="scss" scoped>
main section > .container { main section > .container {
background: $white; background: $white;
form {
h2 {
margin: 15px 0 7.5px;
}
legend {
margin-bottom: 0.75rem;
}
}
} }
.save__navbar { .save__navbar {
@ -412,6 +464,9 @@ h2.subtitle {
section { section {
& > .container { & > .container {
padding: 2rem 1.5rem; padding: 2rem 1.5rem;
@media screen and (max-width: 768px) {
padding: 2rem 0.5rem;
}
} }
.begins-on-field { .begins-on-field {

View File

@ -7,12 +7,19 @@
</b-message> </b-message>
<form @submit.prevent="createGroup"> <form @submit.prevent="createGroup">
<b-field :label="$t('Group display name')"> <b-field :label="$t('Group display name')" label-for="group-display-name">
<b-input aria-required="true" required v-model="group.name" /> <b-input
aria-required="true"
required
v-model="group.name"
id="group-display-name"
/>
</b-field> </b-field>
<div class="field"> <div class="field">
<label class="label">{{ $t("Federated Group Name") }}</label> <label class="label" for="group-preferred-username">{{
$t("Federated Group Name")
}}</label>
<div class="field-body"> <div class="field-body">
<b-field <b-field
:message=" :message="
@ -28,6 +35,7 @@
expanded expanded
v-model="group.preferredUsername" v-model="group.preferredUsername"
pattern="[a-z0-9_]+" pattern="[a-z0-9_]+"
id="group-preferred-username"
:useHtml5Validation="true" :useHtml5Validation="true"
:validation-message=" :validation-message="
group.preferredUsername group.preferredUsername
@ -52,8 +60,8 @@
/> />
</div> </div>
<b-field :label="$t('Description')"> <b-field :label="$t('Description')" label-for="group-summary">
<b-input v-model="group.summary" type="textarea" /> <b-input v-model="group.summary" type="textarea" id="group-summary" />
</b-field> </b-field>
<div> <div>

View File

@ -87,7 +87,7 @@
props.row.actor.name props.row.actor.name
}}</span }}</span
><br /> ><br />
<span class="is-size-7 has-text-grey" <span class="is-size-7 has-text-grey-dark"
>@{{ usernameWithDomain(props.row.actor) }}</span >@{{ usernameWithDomain(props.row.actor) }}</span
> >
</div> </div>

View File

@ -39,6 +39,7 @@
<b-field <b-field
:label="$t('Invite a new member')" :label="$t('Invite a new member')"
custom-class="add-relay" custom-class="add-relay"
label-for="new-member-field"
horizontal horizontal
> >
<b-field <b-field
@ -50,6 +51,7 @@
> >
<p class="control"> <p class="control">
<b-input <b-input
id="new-member-field"
v-model="newMemberUsername" v-model="newMemberUsername"
:placeholder="$t('Ex: someone@mobilizon.org')" :placeholder="$t('Ex: someone@mobilizon.org')"
/> />
@ -63,8 +65,12 @@
</b-field> </b-field>
</form> </form>
<h1>{{ $t("Group Members") }} ({{ group.members.total }})</h1> <h1>{{ $t("Group Members") }} ({{ group.members.total }})</h1>
<b-field :label="$t('Status')" horizontal> <b-field
<b-select v-model="roles"> :label="$t('Status')"
horizontal
label-for="group-members-status-filter"
>
<b-select v-model="roles" id="group-members-status-filter">
<option value=""> <option value="">
{{ $t("Everything") }} {{ $t("Everything") }}
</option> </option>
@ -122,7 +128,7 @@
<img <img
class="is-rounded" class="is-rounded"
:src="props.row.actor.avatar.url" :src="props.row.actor.avatar.url"
alt="" :alt="props.row.actor.avatar.alt || ''"
/> />
</figure> </figure>
<b-icon <b-icon
@ -137,7 +143,7 @@
props.row.actor.name props.row.actor.name
}}</span }}</span
><br /> ><br />
<span class="is-size-7 has-text-grey" <span class="is-size-7 has-text-grey-dark"
>@{{ usernameWithDomain(props.row.actor) }}</span >@{{ usernameWithDomain(props.row.actor) }}</span
> >
</div> </div>

View File

@ -37,8 +37,8 @@
v-if="group && isCurrentActorAGroupAdmin" v-if="group && isCurrentActorAGroupAdmin"
> >
<form @submit.prevent="updateGroup"> <form @submit.prevent="updateGroup">
<b-field :label="$t('Group name')"> <b-field :label="$t('Group name')" label-for="group-settings-name">
<b-input v-model="editableGroup.name" /> <b-input v-model="editableGroup.name" id="group-settings-name" />
</b-field> </b-field>
<b-field :label="$t('Group short description')"> <b-field :label="$t('Group short description')">
<editor mode="basic" v-model="editableGroup.summary" :maxSize="500" <editor mode="basic" v-model="editableGroup.summary" :maxSize="500"

View File

@ -278,13 +278,11 @@
} }
) )
}} }}
<router-link :to="{ name: RouteName.PREFERENCES }"> <router-link
<b-icon :to="{ name: RouteName.PREFERENCES }"
class="clickable"
icon="pencil"
:title="$t('Change')" :title="$t('Change')"
size="is-small" >
/> <b-icon class="clickable" icon="pencil" size="is-small" />
</router-link> </router-link>
<b-loading :active.sync="$apollo.loading" /> <b-loading :active.sync="$apollo.loading" />
</p> </p>

View File

@ -21,6 +21,7 @@
<img <img
class="image" class="image"
:src="log.actor.avatar.url" :src="log.actor.avatar.url"
:alt="log.actor.avatar.alt || ''"
v-if="log.actor.avatar" v-if="log.actor.avatar"
/> />
<i18n <i18n

View File

@ -54,6 +54,7 @@
<b-field <b-field
:label="$t('Title')" :label="$t('Title')"
label-for="post-title"
:type="errors.title ? 'is-danger' : null" :type="errors.title ? 'is-danger' : null"
:message="errors.title" :message="errors.title"
> >
@ -62,6 +63,7 @@
aria-required="true" aria-required="true"
required required
v-model="editablePost.title" v-model="editablePost.title"
id="post-title"
/> />
</b-field> </b-field>
@ -73,6 +75,14 @@
<editor v-model="editablePost.body" /> <editor v-model="editablePost.body" />
</div> </div>
<subtitle>{{ $t("Who can view this post") }}</subtitle> <subtitle>{{ $t("Who can view this post") }}</subtitle>
<fieldset>
<legend>
{{
$t(
"When the post is private, you'll need to share the link around."
)
}}
</legend>
<div class="field"> <div class="field">
<b-radio <b-radio
v-model="editablePost.visibility" v-model="editablePost.visibility"
@ -97,6 +107,7 @@
>{{ $t("Only accessible to members of the group") }}</b-radio >{{ $t("Only accessible to members of the group") }}</b-radio
> >
</div> </div>
</fieldset>
</div> </div>
<nav class="navbar"> <nav class="navbar">
<div class="container"> <div class="container">
@ -414,6 +425,13 @@ form {
} }
} }
} }
h2 {
margin: 15px 0 7.5px;
}
legend {
margin-bottom: 0.75rem;
}
} }
.breadcrumb li.is-active > span { .breadcrumb li.is-active > span {

View File

@ -187,8 +187,12 @@
<div class="modal-card"> <div class="modal-card">
<section class="modal-card-body"> <section class="modal-card-body">
<form @submit.prevent="createResource"> <form @submit.prevent="createResource">
<b-field :label="$t('Title')"> <b-field :label="$t('Title')" label-for="new-resource-title">
<b-input aria-required="true" v-model="newResource.title" /> <b-input
aria-required="true"
v-model="newResource.title"
id="new-resource-title"
/>
</b-field> </b-field>
<b-button native-type="submit">{{ <b-button native-type="submit">{{
@ -202,6 +206,7 @@
:active.sync="createLinkResourceModal" :active.sync="createLinkResourceModal"
has-modal-card has-modal-card
class="link-resource-modal" class="link-resource-modal"
aria-modal
> >
<div class="modal-card"> <div class="modal-card">
<section class="modal-card-body"> <section class="modal-card-body">
@ -209,8 +214,9 @@
{{ modalError }} {{ modalError }}
</b-message> </b-message>
<form @submit.prevent="createResource"> <form @submit.prevent="createResource">
<b-field :label="$t('URL')"> <b-field :label="$t('URL')" label-for="new-resource-url">
<b-input <b-input
id="new-resource-url"
type="url" type="url"
required required
v-model="newResource.resourceUrl" v-model="newResource.resourceUrl"
@ -222,12 +228,23 @@
<resource-item :resource="newResource" :preview="true" /> <resource-item :resource="newResource" :preview="true" />
</div> </div>
<b-field :label="$t('Title')"> <b-field :label="$t('Title')" label-for="new-resource-link-title">
<b-input aria-required="true" v-model="newResource.title" /> <b-input
aria-required="true"
v-model="newResource.title"
id="new-resource-link-title"
/>
</b-field> </b-field>
<b-field :label="$t('Text')"> <b-field
<b-input type="textarea" v-model="newResource.summary" /> :label="$t('Description')"
label-for="new-resource-summary"
>
<b-input
type="textarea"
v-model="newResource.summary"
id="new-resource-summary"
/>
</b-field> </b-field>
<b-button native-type="submit">{{ <b-button native-type="submit">{{

View File

@ -86,6 +86,7 @@
<b-field <b-field
:label="$t('Send notification e-mails')" :label="$t('Send notification e-mails')"
label-for="groupNotifications"
:message=" :message="
$t( $t(
'Announcements and mentions notifications are always sent straight away.' 'Announcements and mentions notifications are always sent straight away.'
@ -95,6 +96,7 @@
<b-select <b-select
v-model="groupNotifications" v-model="groupNotifications"
@input="updateSetting({ groupNotifications })" @input="updateSetting({ groupNotifications })"
id="groupNotifications"
> >
<option <option
v-for="(value, key) in groupNotificationsValues" v-for="(value, key) in groupNotificationsValues"
@ -186,9 +188,13 @@
<h2>{{ $t("Organizer notifications") }}</h2> <h2>{{ $t("Organizer notifications") }}</h2>
</div> </div>
<div class="field is-primary"> <div class="field is-primary">
<strong>{{ <label
class="has-text-weight-bold"
for="notificationPendingParticipation"
>{{
$t("Notifications for manually approved participations to an event") $t("Notifications for manually approved participations to an event")
}}</strong> }}</label
>
<p> <p>
{{ {{
$t( $t(
@ -198,6 +204,7 @@
</p> </p>
<b-select <b-select
v-model="notificationPendingParticipation" v-model="notificationPendingParticipation"
id="notificationPendingParticipation"
@input="updateSetting({ notificationPendingParticipation })" @input="updateSetting({ notificationPendingParticipation })"
> >
<option <option

View File

@ -15,22 +15,28 @@
</ul> </ul>
</nav> </nav>
<div> <div>
<b-field :label="$t('Language')"> <b-field :label="$t('Language')" label-for="setting-language">
<b-select <b-select
:loading="!config || !loggedUser" :loading="!config || !loggedUser"
v-model="locale" v-model="locale"
:placeholder="$t('Select a language')" :placeholder="$t('Select a language')"
id="setting-language"
> >
<option v-for="(language, lang) in langs" :value="lang" :key="lang"> <option v-for="(language, lang) in langs" :value="lang" :key="lang">
{{ language }} {{ language }}
</option> </option>
</b-select> </b-select>
</b-field> </b-field>
<b-field :label="$t('Timezone')" v-if="selectedTimezone"> <b-field
:label="$t('Timezone')"
v-if="selectedTimezone"
label-for="setting-timezone"
>
<b-select <b-select
:placeholder="$t('Select a timezone')" :placeholder="$t('Select a timezone')"
:loading="!config || !loggedUser" :loading="!config || !loggedUser"
v-model="selectedTimezone" v-model="selectedTimezone"
id="setting-timezone"
> >
<optgroup <optgroup
:label="group" :label="group"
@ -57,19 +63,25 @@
}}</b-message> }}</b-message>
<hr /> <hr />
<b-field grouped> <b-field grouped>
<b-field :label="$t('City or region')" expanded> <b-field
:label="$t('City or region')"
expanded
label-for="setting-city"
>
<address-auto-complete <address-auto-complete
v-if="loggedUser && loggedUser.settings" v-if="loggedUser && loggedUser.settings"
:type="AddressSearchType.ADMINISTRATIVE" :type="AddressSearchType.ADMINISTRATIVE"
:doGeoLocation="false" :doGeoLocation="false"
v-model="address" v-model="address"
id="setting-city"
> >
</address-auto-complete> </address-auto-complete>
</b-field> </b-field>
<b-field :label="$t('Radius')"> <b-field :label="$t('Radius')" label-for="setting-radius">
<b-select <b-select
:placeholder="$t('Select a radius')" :placeholder="$t('Select a radius')"
v-model="locationRange" v-model="locationRange"
id="setting-radius"
> >
<option <option
v-for="index in [1, 5, 10, 25, 50, 100]" v-for="index in [1, 5, 10, 25, 50, 100]"
@ -85,6 +97,7 @@
@click="resetArea" @click="resetArea"
class="reset-area" class="reset-area"
icon-left="close" icon-left="close"
:aria-label="$t('Reset')"
/> />
</b-field> </b-field>
<p> <p>

View File

@ -3,6 +3,7 @@ import { routes } from "@/router";
import App from "@/App.vue"; import App from "@/App.vue";
import VueRouter from "vue-router"; import VueRouter from "vue-router";
import Buefy from "buefy"; import Buefy from "buefy";
import flushPromises from "flush-promises";
const localVue = createLocalVue(); const localVue = createLocalVue();
config.mocks.$t = (key: string): string => key; config.mocks.$t = (key: string): string => key;
@ -36,8 +37,7 @@ describe("routing", () => {
}); });
router.push("/about"); router.push("/about");
await wrapper.vm.$nextTick(); await flushPromises();
await wrapper.vm.$nextTick();
expect(wrapper.vm.$route.path).toBe("/about/instance"); expect(wrapper.vm.$route.path).toBe("/about/instance");
expect(wrapper.html()).toContain( expect(wrapper.html()).toContain(
'<a href="/about/instance" aria-current="page"' '<a href="/about/instance" aria-current="page"'

View File

@ -9,7 +9,7 @@ exports[`PostElementItem renders post with basic informations 1`] = `
<p class="post-minimalist-title">My Blog Post</p> <p class="post-minimalist-title">My Blog Post</p>
<div class="metadata"> <div class="metadata">
<!----> <!---->
<!----> <small class="has-text-grey">December 2, 2020</small> <!----> <small class="has-text-grey-dark">December 2, 2020</small>
<!----> <!---->
</div> </div>
</div> </div>
@ -26,7 +26,7 @@ exports[`PostElementItem shows the author if actor is a group member 1`] = `
<div class="media-content"> <div class="media-content">
<p class="post-minimalist-title">My Blog Post</p> <p class="post-minimalist-title">My Blog Post</p>
<div class="metadata"> <div class="metadata">
<!----> <small class="has-text-grey"><span class="icon is-small"><i class="mdi mdi-earth"></i></span>Public</small> <small class="has-text-grey">December 2, 2020</small> <small class="has-text-grey">Created by {username}</small> <!----> <small class="has-text-grey-dark"><span class="icon is-small"><i class="mdi mdi-earth"></i></span>Public</small> <small class="has-text-grey-dark">December 2, 2020</small> <small class="has-text-grey-dark">Created by {username}</small>
</div> </div>
</div> </div>
</div> </div>
@ -43,7 +43,7 @@ exports[`PostElementItem shows the draft tag if post is a draft 1`] = `
<p class="post-minimalist-title">My Blog Post</p> <p class="post-minimalist-title">My Blog Post</p>
<div class="metadata"><span class="tag is-warning is-small"><span class="">Draft</span> <div class="metadata"><span class="tag is-warning is-small"><span class="">Draft</span>
<!----></span> <!----></span>
<!----> <small class="has-text-grey">December 2, 2020</small> <!----> <small class="has-text-grey-dark">December 2, 2020</small>
<!----> <!---->
</div> </div>
</div> </div>
@ -60,7 +60,7 @@ exports[`PostElementItem tells if the post is accessible only through link 1`] =
<div class="media-content"> <div class="media-content">
<p class="post-minimalist-title">My Blog Post</p> <p class="post-minimalist-title">My Blog Post</p>
<div class="metadata"> <div class="metadata">
<!----> <small class="has-text-grey"><span class="icon is-small"><i class="mdi mdi-link"></i></span>Accessible through link</small> <small class="has-text-grey">December 2, 2020</small> <!----> <small class="has-text-grey-dark"><span class="icon is-small"><i class="mdi mdi-link"></i></span>Accessible through link</small> <small class="has-text-grey-dark">December 2, 2020</small>
<!----> <!---->
</div> </div>
</div> </div>
@ -77,7 +77,7 @@ exports[`PostElementItem tells if the post is accessible only to members 1`] = `
<div class="media-content"> <div class="media-content">
<p class="post-minimalist-title">My Blog Post</p> <p class="post-minimalist-title">My Blog Post</p>
<div class="metadata"> <div class="metadata">
<!----> <small class="has-text-grey"><span class="icon is-small"><i class="mdi mdi-lock"></i></span>Accessible only to members</small> <small class="has-text-grey">December 2, 2020</small> <!----> <small class="has-text-grey-dark"><span class="icon is-small"><i class="mdi mdi-lock"></i></span>Accessible only to members</small> <small class="has-text-grey-dark">December 2, 2020</small>
<!----> <!---->
</div> </div>
</div> </div>
@ -94,7 +94,7 @@ exports[`PostElementItem tells if the post is public when the actor is a group m
<div class="media-content"> <div class="media-content">
<p class="post-minimalist-title">My Blog Post</p> <p class="post-minimalist-title">My Blog Post</p>
<div class="metadata"> <div class="metadata">
<!----> <small class="has-text-grey"><span class="icon is-small"><i class="mdi mdi-earth"></i></span>Public</small> <small class="has-text-grey">December 2, 2020</small> <small class="has-text-grey">Created by {username}</small> <!----> <small class="has-text-grey-dark"><span class="icon is-small"><i class="mdi mdi-earth"></i></span>Public</small> <small class="has-text-grey-dark">December 2, 2020</small> <small class="has-text-grey-dark">Created by {username}</small>
</div> </div>
</div> </div>
</div> </div>