accessibility: align labels left [REDMINE_ISSUE-20977]

src/app.less

@@ -73,6 +73,11 @@ label {
   margin-bottom: 0.1em; 
 }
 
+label.left-aligned {
+  width: 100%;
+  text-align: end;
+}
+
 label.required:after {
 	content: ' *';
 	color: rgb(209, 0, 0);

src/views/SignUp.vue

@@ -36,7 +36,7 @@
               <div class="col-3">
                 <label
                   :class="isFieldRequired('first_name', formConfig.requiredFields)"
-                  class="col-form-label"
+                  class="col-form-label left-aligned"
                   for="signUp-firstname"
                 >
                   {{ $t('words.firstname') }}
@@ -71,7 +71,7 @@
               <div class="col-3">
                 <label
                   :class="isFieldRequired('last_name', formConfig.requiredFields)"
-                  class="col-form-label"
+                  class="col-form-label left-aligned"
                   for="signUp-lastname"
                 >
                   {{ $t('words.lastname') }}
@@ -105,7 +105,7 @@
               <div class="col-3">
                 <label
                   :class="isFieldRequired('email', formConfig.requiredFields)"
-                  class="col-form-label"
+                  class="col-form-label left-aligned"
                   for="signUp-email"
                 >
                   {{ $t('words.email') }}
@@ -140,7 +140,7 @@
               <div class="col-3">
                 <label
                   :class="isFieldRequired('phone_number', formConfig.requiredFields)"
-                  class="col-form-label"
+                  class="col-form-label left-aligned"
                   for="signUp-phone"
                 >
                   {{ $t('words.phone') }}
@@ -174,7 +174,7 @@
             >
               <div class="col-3">
                 <label
-                  class="col-form-label"
+                  class="col-form-label left-aligned"
                   for="signUp-comments"
                 >
                   {{ $t('signup.form.personalDetails.reason') }}
@@ -197,7 +197,7 @@
             <div class="row g-2 align-items-center">
               <div class="col-3">
                 <label
-                  class="col-form-label"
+                  class="col-form-label left-aligned"
                   for="signUp-username"
                 >
                   {{ $t('words.username') }}
@@ -238,7 +238,7 @@
             <div class="row g-2 align-items-center">
               <div class="col-3">
                 <label
-                  class="col-form-label required"
+                  class="col-form-label left-aligned required"
                   style="padding: 0;"
                   for="signUp-password1"
                 >

src/views/UserProfile.vue

@@ -33,7 +33,7 @@
               <div class="row g-2 align-items-center">
                 <div class="col-3">
                   <label
-                    class="col-form-label"
+                    class="col-form-label left-aligned"
                     for="userProfile-username"
                   >
                     {{ $t('words.username') }}
@@ -56,7 +56,7 @@
               <div class="row g-2 align-items-center">
                 <div class="col-3">
                   <label
-                    class="col-form-label required"
+                    class="col-form-label left-aligned required"
                     for="userProfile-firstname"
                   >
                     {{ $t('words.firstname') }}
@@ -81,7 +81,7 @@
               <div class="row g-2 align-items-center">
                 <div class="col-3">
                   <label
-                    class="col-form-label required"
+                    class="col-form-label left-aligned required"
                     for="userProfile-lastname"
                   >
                     {{ $t('words.lastname') }}
@@ -106,7 +106,7 @@
               <div class="row g-2 align-items-center">
                 <div class="col-3">
                   <label
-                    class="col-form-label"
+                    class="col-form-label left-aligned"
                     for="userProfile-email"
                   >
                     {{ $t('words.email') }}
@@ -132,7 +132,7 @@
               <div class="row g-2 align-items-center">
                 <div class="col-3">
                   <label
-                    class="col-form-label"
+                    class="col-form-label left-aligned"
                     for="userProfile-phone"
                   >
                     {{ $t('words.phone') }}
@@ -157,7 +157,7 @@
               <div class="row g-2 align-items-center">
                 <div class="col-3">
                   <label
-                    class="col-form-label"
+                    class="col-form-label left-aligned"
                     for="userProfile-comments"
                   >
                     {{ $t('profile.form.personalDetails.reason') }}
@@ -175,7 +175,7 @@
               <div class="row g-2 align-items-center" style="margin-bottom: 0.5em;">
                 <div class="col-3">
                   <label
-                    class="col-form-label"
+                    class="col-form-label left-aligned"
                     style="font-size: 0.87em;"
                     for="userProfile-organisations"
                   >
@@ -246,7 +246,7 @@
               <div class="row g-2 align-items-center">
                 <div class="col-3" style="padding-right: 0;">
                   <label
-                    class="col-form-label required"
+                    class="col-form-label left-aligned required"
                     style="font-size: 0.9em;"
                     for="userProfile-newEmail"
                   >
@@ -308,7 +308,7 @@
               <div class="row g-2 align-items-center">
                 <div class="col-3" style="padding-right: 0;">
                   <label
-                    class="col-form-label required"
+                    class="col-form-label left-aligned required"
                     style="font-size: 0.9em;"
                     for="userProfile-password"
                   >
@@ -344,7 +344,7 @@
               <div class="row g-2 align-items-center">
                 <div class="col-3" style="padding-right: 0;">
                   <label
-                    class="col-form-label required"
+                    class="col-form-label left-aligned required"
                     style="font-size: 0.9em;"
                     for="userProfile-newPassword1"
                   >
@@ -380,7 +380,7 @@
               <div class="row g-2 align-items-center">
                 <div class="col-3" style="padding-right: 0;">
                   <label
-                    class="col-form-label"
+                    class="col-form-label left-aligned"
                     style="font-size: 0.9em;"
                   />
                 </div>