From 6e050349e42d12831d2e6654a3640548c6798c44 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Sat, 18 Dec 2021 20:22:11 +0000
Subject: [PATCH] Add aria-pressed attribute to all toggleVisibility buttons

Closes https://github.com/bitwarden/browser/issues/2228
---
 src/popup/accounts/lock.component.html                 | 2 +-
 src/popup/accounts/login.component.html                | 2 +-
 src/popup/accounts/register.component.html             | 4 ++--
 src/popup/accounts/set-password.component.html         | 4 ++--
 src/popup/accounts/update-temp-password.component.html | 4 ++--
 src/popup/components/password-reprompt.component.html  | 2 +-
 src/popup/components/set-pin.component.html            | 2 +-
 src/popup/send/send-add-edit.component.html            | 2 +-
 src/popup/vault/add-edit-custom-fields.component.html  | 2 +-
 src/popup/vault/add-edit.component.html                | 6 +++---
 src/popup/vault/view-custom-fields.component.html      | 2 +-
 src/popup/vault/view.component.html                    | 6 +++---
 12 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/popup/accounts/lock.component.html b/src/popup/accounts/lock.component.html
index c4de9ecc7a6..be92ca3211e 100644
--- a/src/popup/accounts/lock.component.html
+++ b/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>
diff --git a/src/popup/accounts/login.component.html b/src/popup/accounts/login.component.html
index 1a2f7e1e56f..68628ac3e7d 100644
--- a/src/popup/accounts/login.component.html
+++ b/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>
diff --git a/src/popup/accounts/register.component.html b/src/popup/accounts/register.component.html
index fcd913cfde2..0ab0090f57d 100644
--- a/src/popup/accounts/register.component.html
+++ b/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>
diff --git a/src/popup/accounts/set-password.component.html b/src/popup/accounts/set-password.component.html
index db6c70ba0f6..3452708e123 100644
--- a/src/popup/accounts/set-password.component.html
+++ b/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>
diff --git a/src/popup/accounts/update-temp-password.component.html b/src/popup/accounts/update-temp-password.component.html
index 57bb9a43e73..45785088a9f 100644
--- a/src/popup/accounts/update-temp-password.component.html
+++ b/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>
diff --git a/src/popup/components/password-reprompt.component.html b/src/popup/components/password-reprompt.component.html
index 59ec5bfab3d..da743202572 100644
--- a/src/popup/components/password-reprompt.component.html
+++ b/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>
diff --git a/src/popup/components/set-pin.component.html b/src/popup/components/set-pin.component.html
index 06f3a5808b5..60340a1d688 100644
--- a/src/popup/components/set-pin.component.html
+++ b/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>
diff --git a/src/popup/send/send-add-edit.component.html b/src/popup/send/send-add-edit.component.html
index af31e28c6e8..a297103efad 100644
--- a/src/popup/send/send-add-edit.component.html
+++ b/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>
diff --git a/src/popup/vault/add-edit-custom-fields.component.html b/src/popup/vault/add-edit-custom-fields.component.html
index edb77d14e82..fe36ab0a4b9 100644
--- a/src/popup/vault/add-edit-custom-fields.component.html
+++ b/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>
diff --git a/src/popup/vault/add-edit.component.html b/src/popup/vault/add-edit.component.html
index b4189283536..971413f80e8 100644
--- a/src/popup/vault/add-edit.component.html
+++ b/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>
diff --git a/src/popup/vault/view-custom-fields.component.html b/src/popup/vault/view-custom-fields.component.html
index 56aaa8da287..079eb8887a4 100644
--- a/src/popup/vault/view-custom-fields.component.html
+++ b/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>
diff --git a/src/popup/vault/view.component.html b/src/popup/vault/view.component.html
index bf77ca7e9c6..b32aa0b914c 100644
--- a/src/popup/vault/view.component.html
+++ b/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>