[NG] fix a11y issue password input (#3135)

src/clr-angular/forms/password/password-container.spec.ts

@@ -82,18 +82,18 @@ export default function(): void {
       });
 
       it('toggles the visibility of the password', () => {
-        const button = containerEl.querySelector('clr-icon');
+        const button = containerEl.querySelector('button');
         expect(containerEl.querySelector('input').type).toEqual('password');
         button.click();
         fixture.detectChanges();
         expect(containerEl.querySelector('input').type).toEqual('text');
       });
 
       it('should disable toggling', () => {
-        expect(containerEl.querySelector('clr-icon')).toBeTruthy();
+        expect(containerEl.querySelector('button')).toBeTruthy();
         fixture.componentInstance.toggler = false;
         fixture.detectChanges();
-        expect(containerEl.querySelector('clr-icon')).toBeFalsy();
+        expect(containerEl.querySelector('button')).toBeFalsy();
       });
     });
   });

src/clr-angular/forms/password/password-container.ts

@@ -33,16 +33,16 @@ export const TOGGLE_SERVICE_PROVIDER = { provide: TOGGLE_SERVICE, useFactory: To
       <div class="clr-input-wrapper">
         <div class="clr-input-group" [class.clr-focus]="focus">
           <ng-content select="[clrPassword]"></ng-content>
-          <clr-icon *ngIf="!show && clrToggle"
-            shape="eye" 
+          <button
+            *ngIf="clrToggle"
+            (click)="toggle()"
+            [disabled]="control?.disabled"
             class="clr-input-group-icon-action"
-            [attr.title]="commonStrings.show"
-            (click)="toggle()"></clr-icon>
-          <clr-icon *ngIf="show && clrToggle" 
-            shape="eye-hide"
-            class="clr-input-group-icon-action"
-            [attr.title]="commonStrings.hide"
-            (click)="toggle()"></clr-icon>
+            type="button">
+            <clr-icon
+            [attr.shape]="show ? 'eye-hide' : 'eye'"
+            [attr.title]="show ? commonStrings.hide : commonStrings.show"></clr-icon>
+          </button>
         </div>
         <clr-icon *ngIf="invalid" class="clr-validate-icon" shape="exclamation-circle" aria-hidden="true"></clr-icon>
       </div>

src/clr-angular/forms/styles/_input-group.clarity.scss

@@ -27,8 +27,8 @@
     }
 
     .clr-input-group-icon-action {
+      @include clr-no-styles-button();
       color: $clr-forms-focused-color;
-      cursor: pointer;
       margin: 0 $clr-forms-baseline * 1.5;
     }
   }

src/dev/src/app/forms/input-group/input-group.html

@@ -45,11 +45,18 @@ <h2>Input Group</h2>
         <div class="clr-control-container">
             <div class="clr-input-wrapper">
                 <div class="clr-input-group" [ngClass]="{'clr-focus': focusPasswordGroup }">
-                    <input type="password" name="password" *ngIf="!showPassword" id="password-group" [(ngModel)]="password" placeholder="Enter value here" class="clr-input" (focus)="focusPasswordGroup = true" (blur)="focusPasswordGroup = false">
-                    <clr-icon shape="eye" *ngIf="!showPassword" class="clr-input-group-icon-action" (click)="showPassword = true"></clr-icon>
-
-                    <input type="text" name="password" *ngIf="showPassword" id="password-group" [(ngModel)]="password" placeholder="Enter value here" class="clr-input" (focus)="focusPasswordGroup = true" (blur)="focusPasswordGroup = false">
-                    <clr-icon shape="eye-hide" *ngIf="showPassword" class="clr-input-group-icon-action" (click)="showPassword = false"></clr-icon>
+                    <input
+                        name="password"
+                        id="password-group"
+                        class="clr-input"
+                        placeholder="Enter value here"
+                        [(ngModel)]="password"
+                        [type]="showPassword ? 'text' : 'password'"
+                        (focus)="focusPasswordGroup = true"
+                        (blur)="focusPasswordGroup = false">
+                    <button (click)="showPassword = !showPassword" class="clr-input-group-icon-action" type="button">
+                        <clr-icon [attr.shape]="showPassword ? 'eye-hide' : 'eye'" [attr.title]="showPassword ? commonStrings.hide : commonStrings.show"></clr-icon>
+                    </button>
                 </div>
                 <clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
             </div>

src/dev/src/app/forms/input-group/input-group.ts

@@ -7,6 +7,7 @@
 import '@clr/icons/shapes/social-shapes';
 import '@clr/icons/shapes/essential-shapes';
 import { Component } from '@angular/core';
+import { ClrCommonStrings } from '@clr/angular';
 
 @Component({
   templateUrl: './input-group.html',
@@ -20,4 +21,6 @@ export class FormsInputGroupDemo {
   focusPasswordGroup = false;
   focusPrefixSuffixGroup = false;
   focusSearchGroup = false;
+
+  constructor(public commonStrings: ClrCommonStrings) {}
 }