potsda.mn/mobilizon
10
4
Fork 1
Code Issues 22 Pull requests 1 Projects Releases Wiki Activity

Accessibility improvements in AccountSettings

Browse source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2021-08-23 10:20:55 +02:00
parent 426f85884b
commit c5d5758ece
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
2 changed files with 15 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
js/src/variables.scss
View file

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

18
js/src/views/Settings/AccountSettings.vue
View file

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