Merge pull request #2232 from patrickhlauke/patrickhlauke-issue2228

Add aria-pressed attribute to all toggleVisibility buttons

src/popup/accounts/lock.component.html

@@ -24,7 +24,7 @@
                     </div>
                     <div class="action-buttons">
                         <button type="button" class="row-btn" appStopClick appBlurClick
-                            appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
+                            appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword()" [attr.aria-pressed]="showPassword">
                             <i class="fa fa-lg" [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"
                                 aria-hidden="true"></i>
                         </button>

src/popup/accounts/login.component.html

@@ -29,7 +29,7 @@
                     </div>
                     <div class="action-buttons">
                         <button type="button" class="row-btn" appStopClick appBlurClick
-                            appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
+                            appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword()" [attr.aria-pressed]="showPassword">
                             <i class="fa fa-lg" [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"
                                 aria-hidden="true"></i>
                         </button>

src/popup/accounts/register.component.html

@@ -37,7 +37,7 @@
                         </div>
                         <div class="action-buttons">
                             <button type="button" class="row-btn" appStopClick appBlurClick
-                                appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(false)">
+                                appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(false)" [attr.aria-pressed]="showPassword">
                                 <i class="fa fa-lg" aria-hidden="true"
                                     [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                             </button>
@@ -65,7 +65,7 @@
                     </div>
                     <div class="action-buttons">
                         <button type="button" class="row-btn" appStopClick appBlurClick
-                            appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(true)">
+                            appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(true)" [attr.aria-pressed]="showPassword">
                             <i class="fa fa-lg" aria-hidden="true"
                                 [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                         </button>

src/popup/accounts/set-password.component.html

@@ -44,7 +44,7 @@
                             </div>
                             <div class="action-buttons">
                                 <button type="button" class="row-btn" appStopClick appBlurClick role="button"
-                                    appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(false)">
+                                    appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(false)" [attr.aria-pressed]="showPassword">
                                     <i class="fa fa-lg" aria-hidden="true"
                                         [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                                 </button>
@@ -75,7 +75,7 @@
                             </div>
                             <div class="action-buttons">
                                 <button type="button" class="row-btn" appStopClick appBlurClick role="button"
-                                    appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(true)">
+                                    appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(true)" [attr.aria-pressed]="showPassword">
                                     <i class="fa fa-lg" aria-hidden="true"
                                         [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                                 </button>

src/popup/accounts/update-temp-password.component.html

@@ -37,7 +37,7 @@
                         </div>
                         <div class="action-buttons">
                             <button type="button" class="row-btn" appStopClick appBlurClick
-                                appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(false)">
+                                appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(false)" [attr.aria-pressed]="showPassword">
                                 <i class="fa fa-lg" aria-hidden="true"
                                     [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                             </button>
@@ -63,7 +63,7 @@
                     </div>
                     <div class="action-buttons">
                         <button type="button" class="row-btn" appStopClick appBlurClick
-                            appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(true)">
+                            appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(true)" [attr.aria-pressed]="showPassword">
                             <i class="fa fa-lg" aria-hidden="true"
                                 [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                         </button>

src/popup/components/password-reprompt.component.html

@@ -13,7 +13,7 @@
                             </div>
                             <div class="action-buttons">
                                 <button type="button" class="row-btn" appStopClick appBlurClick role="button"
-                                    appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
+                                    appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword()" [attr.aria-pressed]="showPassword">
                                     <i class="fa fa-lg" aria-hidden="true"
                                         [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                                 </button>

src/popup/components/set-pin.component.html

@@ -15,7 +15,7 @@
                             </div>
                             <div class="action-buttons">
                                 <button type="button" class="row-btn" appStopClick appBlurClick appA11yTitle="{{'toggleVisibility' | i18n}}"
-                                    (click)="toggleVisibility()">
+                                    (click)="toggleVisibility()" [attr.aria-pressed]="showPin">
                                     <i class="fa fa-lg" aria-hidden="true"
                                         [ngClass]="{'fa-eye': !showPin, 'fa-eye-slash': showPin}"></i>
                                 </button>

src/popup/send/send-add-edit.component.html

@@ -156,7 +156,7 @@
                         </div>
                         <div class="action-buttons" *ngIf="!disableSend">
                             <button type="button" class="row-btn" appStopClick appBlurClick
-                                appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePasswordVisible()">
+                                appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePasswordVisible()" [attr.aria-pressed]="showPassword">
                                 <i class="fa fa-lg" [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"
                                     aria-hidden="true"></i>
                             </button>

src/popup/vault/add-edit-custom-fields.component.html

@@ -34,7 +34,7 @@
                     *ngIf="f.type === fieldType.Boolean" appTrueFalseValue trueValue="true" falseValue="false">
                 <div class="action-buttons" *ngIf="f.type === fieldType.Hidden && (cipher.viewPassword || f.newField)">
                     <button type="button" class="row-btn" appStopClick appBlurClick appA11yTitle="{{'toggleVisibility' | i18n}}"
-                        (click)="toggleFieldValue(f)">
+                        (click)="toggleFieldValue(f)" [attr.aria-pressed]="f.showValue">
                         <i class="fa fa-lg" aria-hidden="true"
                             [ngClass]="{'fa-eye': !f.showValue, 'fa-eye-slash': f.showValue}"></i>
                     </button>

src/popup/vault/add-edit.component.html

@@ -58,7 +58,7 @@
                             </button>
                             <button type="button" class="row-btn" appStopClick appBlurClick
                                 appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword()"
-                                *ngIf="cipher.viewPassword">
+                                *ngIf="cipher.viewPassword" [attr.aria-pressed]="showPassword">
                                 <i class="fa fa-lg" aria-hidden="true"
                                     [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                             </button>
@@ -91,7 +91,7 @@
                         </div>
                         <div class="action-buttons">
                             <button type="button" class="row-btn" appStopClick appBlurClick
-                                appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleCardNumber()">
+                                appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleCardNumber()" [attr.aria-pressed]="showCardNumber">
                                 <i class="fa fa-lg" aria-hidden="true"
                                     [ngClass]="{'fa-eye': !showCardNumber, 'fa-eye-slash': showCardNumber}"></i>
                             </button>
@@ -122,7 +122,7 @@
                         </div>
                         <div class="action-buttons">
                             <button type="button" class="row-btn" appStopClick appBlurClick
-                                appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleCardCode()">
+                                appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleCardCode()" [attr.aria-pressed]="showCardCode">
                                 <i class="fa fa-lg" aria-hidden="true"
                                     [ngClass]="{'fa-eye': !showCardCode, 'fa-eye-slash': showCardCode}"></i>
                             </button>

src/popup/vault/view-custom-fields.component.html

@@ -29,7 +29,7 @@
             <div class="action-buttons">
                 <button type="button" class="row-btn" appStopClick appA11yTitle="{{'toggleVisibility' | i18n}}"
                     *ngIf="field.type === fieldType.Hidden && cipher.viewPassword"
-                    (click)="toggleFieldValue(field)">
+                    (click)="toggleFieldValue(field)" [attr.aria-pressed]="field.showValue">
                     <i class="fa fa-lg" aria-hidden="true"
                         [ngClass]="{'fa-eye': !field.showValue, 'fa-eye-slash': field.showValue}"></i>
                 </button>

src/popup/vault/view.component.html

@@ -55,7 +55,7 @@
                                 aria-hidden="true"></i>
                         </button>
                         <button type="button" class="row-btn" appStopClick appA11yTitle="{{'toggleVisibility' | i18n}}"
-                            (click)="togglePassword()" *ngIf="cipher.viewPassword">
+                            (click)="togglePassword()" *ngIf="cipher.viewPassword" [attr.aria-pressed]="showPassword">
                             <i class="fa fa-lg" aria-hidden="true"
                                 [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                         </button>
@@ -104,7 +104,7 @@
                     </div>
                     <div class="action-buttons">
                         <button type="button" class="row-btn" appStopClick appA11yTitle="{{'toggleVisibility' | i18n}}"
-                            (click)="toggleCardNumber()">
+                            (click)="toggleCardNumber()" [attr.aria-pressed]="showCardNumber">
                             <i class="fa fa-lg" aria-hidden="true"
                                 [ngClass]="{'fa-eye': !showCardNumber, 'fa-eye-slash': showCardNumber}"></i>
                         </button>
@@ -130,7 +130,7 @@
                     </div>
                     <div class="action-buttons">
                         <button type="button" class="row-btn" appStopClick appA11yTitle="{{'toggleVisibility' | i18n}}"
-                            (click)="toggleCardCode()">
+                            (click)="toggleCardCode()" [attr.aria-pressed]="showCardCode">
                             <i class="fa fa-lg" aria-hidden="true"
                                 [ngClass]="{'fa-eye': !showCardCode, 'fa-eye-slash': showCardCode}"></i>
                         </button>