Merge pull request #2232 from patrickhlauke/patrickhlauke-issue2228

Add aria-pressed attribute to all toggleVisibility buttons
2025-02-28 03:21:40 +01:00 · 2021-12-19 12:25:04 +01:00 · 2021-12-19 12:25:04 +01:00 · fa9662e34a
commit fa9662e34a
parent df72485236 6e050349e4
12 changed files with 19 additions and 19 deletions
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>