From a06fe4695e7e4c09ea07540d3353cb05c36f1e37 Mon Sep 17 00:00:00 2001
From: Derick Montague <derick.montague@ibm.com>
Date: Wed, 11 Mar 2020 13:48:42 -0500
Subject: Fix accessibility violations and use b-form-group

- Update authError to be set to false in order to hide the error
message when the user logs in. This is needed if the user name
or password are incorrect multiple times. If it is not hidden
between login attempts, the user will only be notified on the
first attempt.
- Use the b-form-group component for consistency.
- Add id attributes to the required field error messages so that
the error can be added to the input field's aria-describedby attribute

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I86902cc2c85b3bbf156c2920ec2031ee4dccd2ef
---
 src/views/Login/Login.vue | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

(limited to 'src/views/Login/Login.vue')

diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index 2018720c..da96844a 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -21,44 +21,48 @@
                 <span>{{ $t('pageLogin.alert.action') }}</span>
               </p>
             </b-alert>
-            <div class="login-form__section">
-              <label for="language">{{ $t('pageLogin.language') }}</label>
+            <b-form-group
+              label-for="language"
+              :label="$t('pageLogin.language')"
+            >
               <b-form-select
                 id="language"
                 v-model="$i18n.locale"
                 :options="languages"
               ></b-form-select>
-            </div>
-            <div class="login-form__section">
-              <label for="username">{{ $t('pageLogin.username') }}</label>
+            </b-form-group>
+            <b-form-group
+              label-for="username"
+              :label="$t('pageLogin.username')"
+            >
               <b-form-input
                 id="username"
                 v-model="userInfo.username"
-                :aria-describedby="authError ? 'login-error-alert' : ''"
+                aria-describedby="login-error-alert username-required"
                 :state="getValidationState($v.userInfo.username)"
                 type="text"
                 autofocus="autofocus"
                 @input="$v.userInfo.username.$touch()"
               >
               </b-form-input>
-              <b-form-invalid-feedback role="alert">
+              <b-form-invalid-feedback id="username-required" role="alert">
                 <template v-if="!$v.userInfo.username.required">
                   {{ $t('global.form.fieldRequired') }}
                 </template>
               </b-form-invalid-feedback>
-            </div>
+            </b-form-group>
             <div class="login-form__section">
               <label for="password">{{ $t('pageLogin.password') }}</label>
               <b-form-input
                 id="password"
                 v-model="userInfo.password"
-                :aria-describedby="authError ? 'login-error-alert' : ''"
+                aria-describedby="login-error-alert password-required"
                 :state="getValidationState($v.userInfo.password)"
                 type="password"
                 @input="$v.userInfo.password.$touch()"
               >
               </b-form-input>
-              <b-form-invalid-feedback role="alert">
+              <b-form-invalid-feedback id="password-required" role="alert">
                 <template v-if="!$v.userInfo.password.required">
                   {{ $t('global.form.fieldRequired') }}
                 </template>
-- 
cgit v1.2.3