From 3453cacaea6f668a6d20bda5c13774816c6c762f Mon Sep 17 00:00:00 2001
From: Cilibiu Bogdan <pionnegru@users.noreply.github.com>
Date: Mon, 12 Aug 2019 18:41:32 +0300
Subject: [PATCH] [ADF-4802] Login accessibility	 (#4988)

* login button aria label

* password toggle accessibility

* translation

* fix test

* fix automation if
---
 lib/core/i18n/en.json                         | 14 ++++++----
 .../login/components/login.component.html     | 27 ++++++++++++-------
 .../login/components/login.component.spec.ts  | 16 +++++++----
 lib/core/login/components/login.component.ts  |  3 ++-
 lib/testing/src/lib/core/pages/login.page.ts  |  5 ++--
 5 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/lib/core/i18n/en.json b/lib/core/i18n/en.json
index 46d6b0cc29..74153f1629 100644
--- a/lib/core/i18n/en.json
+++ b/lib/core/i18n/en.json
@@ -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": {
diff --git a/lib/core/login/components/login.component.html b/lib/core/login/components/login.component.html
index 2fe61bba22..bed6724a4b 100644
--- a/lib/core/login/components/login.component.html
+++ b/lib/core/login/components/login.component.html
@@ -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">
diff --git a/lib/core/login/components/login.component.spec.ts b/lib/core/login/components/login.component.spec.ts
index f1e530ebdd..cc70453939 100644
--- a/lib/core/login/components/login.component.spec.ts
+++ b/lib/core/login/components/login.component.spec.ts
@@ -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();
 
diff --git a/lib/core/login/components/login.component.ts b/lib/core/login/components/login.component.ts
index 7fe06a4d9b..ac270a3a0b 100644
--- a/lib/core/login/components/login.component.ts
+++ b/lib/core/login/components/login.component.ts
@@ -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;
     }
 
diff --git a/lib/testing/src/lib/core/pages/login.page.ts b/lib/testing/src/lib/core/pages/login.page.ts
index d38e758ee2..a7c8b97440 100644
--- a/lib/testing/src/lib/core/pages/login.page.ts
+++ b/lib/testing/src/lib/core/pages/login.page.ts
@@ -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"]'));