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
diff --git a/src/store/modules/Authentication/AuthenticanStore.js b/src/store/modules/Authentication/AuthenticanStore.js
index 975f258..d64c730 100644
--- a/src/store/modules/Authentication/AuthenticanStore.js
+++ b/src/store/modules/Authentication/AuthenticanStore.js
@@ -17,8 +17,8 @@
state.authError = false;
state.cookie = Cookies.get('XSRF-TOKEN');
},
- authError(state) {
- state.authError = true;
+ authError(state, authError = true) {
+ state.authError = authError;
},
logout() {
Cookies.remove('XSRF-TOKEN');
@@ -26,6 +26,7 @@
},
actions: {
login({ commit }, auth) {
+ commit('authError', false);
return api
.post('/login', { data: auth })
.then(() => commit('authSuccess'))
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index 2018720..da96844 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>