Accessibility improvements in AccountSettings
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
parent
426f85884b
commit
c5d5758ece
@ -54,7 +54,7 @@ $success-invert: findColorInvert($success);
|
|||||||
$info: #36bcd4;
|
$info: #36bcd4;
|
||||||
$info-invert: findColorInvert($info);
|
$info-invert: findColorInvert($info);
|
||||||
$danger: #ff2e54;
|
$danger: #ff2e54;
|
||||||
$danger-invert: findColorInvert($danger);
|
$danger-invert: #000;
|
||||||
$link: $primary;
|
$link: $primary;
|
||||||
$link-invert: $primary-invert;
|
$link-invert: $primary-invert;
|
||||||
$text: $violet-1;
|
$text: $violet-1;
|
||||||
|
@ -51,20 +51,22 @@
|
|||||||
class="form"
|
class="form"
|
||||||
v-if="canChangeEmail"
|
v-if="canChangeEmail"
|
||||||
>
|
>
|
||||||
<b-field :label="$t('New email')">
|
<b-field :label="$t('New email')" label-for="account-email">
|
||||||
<b-input
|
<b-input
|
||||||
aria-required="true"
|
aria-required="true"
|
||||||
required
|
required
|
||||||
type="email"
|
type="email"
|
||||||
|
id="account-email"
|
||||||
v-model="newEmail"
|
v-model="newEmail"
|
||||||
/>
|
/>
|
||||||
</b-field>
|
</b-field>
|
||||||
<p class="help">{{ $t("You'll receive a confirmation email.") }}</p>
|
<p class="help">{{ $t("You'll receive a confirmation email.") }}</p>
|
||||||
<b-field :label="$t('Password')">
|
<b-field :label="$t('Password')" label-for="account-password">
|
||||||
<b-input
|
<b-input
|
||||||
aria-required="true"
|
aria-required="true"
|
||||||
required
|
required
|
||||||
type="password"
|
type="password"
|
||||||
|
id="account-password"
|
||||||
password-reveal
|
password-reveal
|
||||||
minlength="6"
|
minlength="6"
|
||||||
v-model="passwordForEmailChange"
|
v-model="passwordForEmailChange"
|
||||||
@ -105,23 +107,25 @@
|
|||||||
class="form"
|
class="form"
|
||||||
v-if="canChangePassword"
|
v-if="canChangePassword"
|
||||||
>
|
>
|
||||||
<b-field :label="$t('Old password')">
|
<b-field :label="$t('Old password')" label-for="account-old-password">
|
||||||
<b-input
|
<b-input
|
||||||
aria-required="true"
|
aria-required="true"
|
||||||
required
|
required
|
||||||
type="password"
|
type="password"
|
||||||
password-reveal
|
password-reveal
|
||||||
minlength="6"
|
minlength="6"
|
||||||
|
id="account-old-password"
|
||||||
v-model="oldPassword"
|
v-model="oldPassword"
|
||||||
/>
|
/>
|
||||||
</b-field>
|
</b-field>
|
||||||
<b-field :label="$t('New password')">
|
<b-field :label="$t('New password')" label-for="account-new-password">
|
||||||
<b-input
|
<b-input
|
||||||
aria-required="true"
|
aria-required="true"
|
||||||
required
|
required
|
||||||
type="password"
|
type="password"
|
||||||
password-reveal
|
password-reveal
|
||||||
minlength="6"
|
minlength="6"
|
||||||
|
id="account-new-password"
|
||||||
v-model="newPassword"
|
v-model="newPassword"
|
||||||
/>
|
/>
|
||||||
</b-field>
|
</b-field>
|
||||||
@ -409,6 +413,12 @@ export default class AccountSettings extends Vue {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.modal.is-active.is-full-screen {
|
||||||
|
.help.is-danger {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.cancel-button {
|
.cancel-button {
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user