inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-4802] Login accessibility (#4988)

Browse Source 
* login button aria label

* password toggle accessibility

* translation

* fix test

* fix automation if
This commit is contained in:
Cilibiu Bogdan
2019-08-12 18:41:32 +03:00
committed by Denys Vuika
parent b176a43fba
commit 3453cacaea
5 changed files with 42 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
lib/core/login/components/login.component.html
View File

@@ -58,14 +58,21 @@
[formControl]="form.controls['password']"
id="password"
data-automation-id="password">
<mat-icon *ngIf="isPasswordShow" matSuffix class="adf-login-password-icon"
data-automation-id="hide_password" (click)="toggleShowPassword()" (keyup.enter)="toggleShowPassword()">
visibility
</mat-icon>
<mat-icon *ngIf="!isPasswordShow" matSuffix class="adf-login-password-icon"
data-automation-id="show_password" (click)="toggleShowPassword()" (keyup.enter)="toggleShowPassword()">
visibility_off
</mat-icon>
<button
matSuffix
mat-icon-button
type="button"
[attr.aria-label]="(isPasswordShow ?
'LOGIN.ARIA-LABEL.HIDE-PASSWORD':
'LOGIN.ARIA-LABEL.SHOW-PASSWORD'
) | translate"
(click)="toggleShowPassword($event)"
(keyup.enter)="toggleShowPassword($event)"
[attr.data-automation-id]="isPasswordShow ? 'hide_password':'show_password'">
<mat-icon class="adf-login-password-icon">
{{ isPasswordShow ? 'visibility':'visibility_off' }}
</mat-icon>
</button>
</mat-form-field>
<span class="adf-login-validation" for="password" *ngIf="formError['password']">
<span id="password-required" class="adf-login-error"
@@ -82,7 +89,8 @@
mat-raised-button color="primary"
[class.adf-isChecking]="actualLoginStep === LoginSteps.Checking"
[class.adf-isWelcome]="actualLoginStep === LoginSteps.Welcome"
data-automation-id="login-button" [disabled]="!form.valid">
data-automation-id="login-button" [disabled]="!form.valid"
[attr.aria-label]="'LOGIN.BUTTON.LOGIN' | translate">
<span *ngIf="actualLoginStep === LoginSteps.Landing" class="adf-login-button-label">{{ 'LOGIN.BUTTON.LOGIN' | translate }}</span>
@@ -113,6 +121,7 @@
<div *ngIf="implicitFlow">
<button type="button" (click)="implicitLogin()" id="login-button-sso"
[attr.aria-label]="'LOGIN.BUTTON.SSO' | translate"
class="adf-login-button"
mat-raised-button color="primary"
data-automation-id="login-button-sso">

16
lib/core/login/components/login.component.spec.ts
View File

@@ -98,16 +98,22 @@ describe('LoginComponent', () => {
passwordInput.dispatchEvent(new Event('input'));
fixture.detectChanges();
element.querySelector('button').click();
element.querySelector('.adf-login-button').click();
fixture.detectChanges();
}
it('should be autocomplete off', () => {
expect(element.querySelector('#adf-login-form').getAttribute('autocomplete')).toBe('off');
expect(
element
.querySelector('#adf-login-form')
.getAttribute('autocomplete')
).toBe('off');
});
it('should redirect to route on successful login', () => {
spyOn(authService, 'login').and.returnValue(of({ type: 'type', ticket: 'ticket' }));
spyOn(authService, 'login').and.returnValue(
of({ type: 'type', ticket: 'ticket' })
);
const redirect = '/home';
component.successRoute = redirect;
spyOn(router, 'navigate');
@@ -572,7 +578,7 @@ describe('LoginComponent', () => {
it('should render the password in clear when the toggleShowPassword is call', () => {
component.isPasswordShow = false;
component.toggleShowPassword();
component.toggleShowPassword(new MouseEvent('click'));
fixture.detectChanges();
@@ -582,7 +588,7 @@ describe('LoginComponent', () => {
it('should render the hide password when the password is in clear and the toggleShowPassword is call', () => {
component.isPasswordShow = true;
component.toggleShowPassword();
component.toggleShowPassword(new MouseEvent('click'));
fixture.detectChanges();

3
lib/core/login/components/login.component.ts
View File

@@ -342,7 +342,8 @@ export class LoginComponent implements OnInit, OnDestroy {
/**
* Display and hide the password value.
*/
toggleShowPassword() {
toggleShowPassword(event: MouseEvent | KeyboardEvent) {
event.stopPropagation();
this.isPasswordShow = !this.isPasswordShow;
}