From 3a79806c0f024efdd382fb91f0b5333ffa04eb83 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Mon, 23 Aug 2021 10:20:55 +0200
Subject: [PATCH] Accessibility improvements in AccountSettings

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/variables.scss                     |  2 +-
 js/src/views/Settings/AccountSettings.vue | 18 ++++++++++++++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/js/src/variables.scss b/js/src/variables.scss
index 02942a8c..f402b5bf 100644
--- a/js/src/variables.scss
+++ b/js/src/variables.scss
@@ -54,7 +54,7 @@ $success-invert: findColorInvert($success);
 $info: #36bcd4;
 $info-invert: findColorInvert($info);
 $danger: #ff2e54;
-$danger-invert: findColorInvert($danger);
+$danger-invert: #000;
 $link: $primary;
 $link-invert: $primary-invert;
 $text: $violet-1;
diff --git a/js/src/views/Settings/AccountSettings.vue b/js/src/views/Settings/AccountSettings.vue
index 317b2490..9c5a9e03 100644
--- a/js/src/views/Settings/AccountSettings.vue
+++ b/js/src/views/Settings/AccountSettings.vue
@@ -51,20 +51,22 @@
         class="form"
         v-if="canChangeEmail"
       >
-        <b-field :label="$t('New email')">
+        <b-field :label="$t('New email')" label-for="account-email">
           <b-input
             aria-required="true"
             required
             type="email"
+            id="account-email"
             v-model="newEmail"
           />
         </b-field>
         <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
             aria-required="true"
             required
             type="password"
+            id="account-password"
             password-reveal
             minlength="6"
             v-model="passwordForEmailChange"
@@ -105,23 +107,25 @@
         class="form"
         v-if="canChangePassword"
       >
-        <b-field :label="$t('Old password')">
+        <b-field :label="$t('Old password')" label-for="account-old-password">
           <b-input
             aria-required="true"
             required
             type="password"
             password-reveal
             minlength="6"
+            id="account-old-password"
             v-model="oldPassword"
           />
         </b-field>
-        <b-field :label="$t('New password')">
+        <b-field :label="$t('New password')" label-for="account-new-password">
           <b-input
             aria-required="true"
             required
             type="password"
             password-reveal
             minlength="6"
+            id="account-new-password"
             v-model="newPassword"
           />
         </b-field>
@@ -409,6 +413,12 @@ export default class AccountSettings extends Vue {
 </script>
 
 <style lang="scss" scoped>
+.modal.is-active.is-full-screen {
+  .help.is-danger {
+    font-size: 1rem;
+  }
+}
+
 .cancel-button {
   margin-top: 2rem;
 }