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

14
lib/core/i18n/en.json
View File

@@ -5,8 +5,8 @@
"CLAIM": "CLAIM",
"UNCLAIM": "RELEASE",
"START PROCESS": "START PROCESS",
"NOTIFICATION_HISTORY":{
"NO_MESSAGE" : "No messages",
"NOTIFICATION_HISTORY": {
"NO_MESSAGE": "No messages",
"NOTIFICATIONS": "Notifications",
"MARK_AS_READ": "Mark all as read"
},
@@ -208,13 +208,17 @@
}
},
"LOGIN": {
"LOGO": "Alfresco",
"LOGO": "Alfresco, make business flow",
"LABEL": {
"LOGIN": "Sign in",
"USERNAME": "Username",
"PASSWORD": "Password",
"REMEMBER": "Remember me"
},
"ARIA-LABEL": {
"SHOW-PASSWORD": "Show password",
"HIDE-PASSWORD": "Hide password"
},
"MESSAGES": {
"USERNAME-REQUIRED": "Required",
"USERNAME-MIN": "Your username needs to be at least {{ minLength }} characters.",
@@ -253,8 +257,8 @@
"TOOLTIP": "Content actions"
},
"ACCESSIBILITY": {
"SELECT_ALL": "Select all",
"SELECT_FILE": "Select file"
"SELECT_ALL": "Select all",
"SELECT_FILE": "Select file"
}
},
"USER_PROFILE": {

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;
}

5
lib/testing/src/lib/core/pages/login.page.ts
View File

@@ -22,7 +22,6 @@ import { LocalStorageUtil } from '../utils/local-storage.util';
import { BrowserActions } from '../utils/browser-actions';
export class LoginPage {
loginURL = browser.baseUrl + '/login';
formControllersPage = new FormControllersPage();
@@ -55,10 +54,10 @@ export class LoginPage {
);
signInButton = element(by.id('login-button'));
showPasswordElement = element(
by.css('mat-icon[data-automation-id="show_password"]')
by.css('button[data-automation-id="show_password"]')
);
hidePasswordElement = element(
by.css('mat-icon[data-automation-id="hide_password"]')
by.css('button[data-automation-id="hide_password"]')
);
rememberMe = element(by.css('mat-checkbox[id="adf-login-remember"]'));
needHelp = element(by.css('div[id="adf-login-action-left"]'));