From 557dd8f68dd2789b5e2ab4aa2fa414be9295b958 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Thu, 16 Dec 2021 01:26:00 +0000
Subject: [PATCH] View entry: add labels to readonly fields, expand aria-label
 for repeated toggles

Closes https://github.com/bitwarden/browser/issues/1984
---
 .../vault/view-custom-fields.component.html   |  4 +--
 src/popup/vault/view.component.html           | 30 +++++++++----------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/popup/vault/view-custom-fields.component.html b/src/popup/vault/view-custom-fields.component.html
index a3ec154475..f6554b38ff 100644
--- a/src/popup/vault/view-custom-fields.component.html
+++ b/src/popup/vault/view-custom-fields.component.html
@@ -27,13 +27,13 @@
                 </div>
             </div>
             <div class="action-buttons">
-                <button type="button" class="row-btn" appStopClick appA11yTitle="{{'toggleVisibility' | i18n}}"
+                <button type="button" class="row-btn" appStopClick attr.aria-label="{{'toggleVisibility' | i18n}} {{field.name}}" appA11yTitle="{{'toggleVisibility' | i18n}}"
                     *ngIf="field.type === fieldType.Hidden && cipher.viewPassword"
                     (click)="toggleFieldValue(field)">
                     <i class="fa fa-lg" aria-hidden="true"
                         [ngClass]="{'fa-eye': !field.showValue, 'fa-eye-slash': field.showValue}"></i>
                 </button>
-                <button type="button" class="row-btn" appStopClick appA11yTitle="{{'copyValue' | i18n}}"
+                <button type="button" class="row-btn" appStopClick attr.aria-label="{{'copyValue' | i18n}} {{field.name}}" appA11yTitle="{{'copyValue' | i18n}}"
                     *ngIf="field.value && field.type !== fieldType.Boolean && field.type !== fieldType.Linked &&
                     !(field.type === fieldType.Hidden && !cipher.viewPassword)"
                     (click)="copy(field.value, 'value', field.type === fieldType.Hidden ? 'H_Field' : 'Field')">
diff --git a/src/popup/vault/view.component.html b/src/popup/vault/view.component.html
index 9603f8af4a..34514b09b7 100644
--- a/src/popup/vault/view.component.html
+++ b/src/popup/vault/view.component.html
@@ -16,17 +16,17 @@
         </div>
         <div class="box-content">
             <div class="box-content-row">
-                <span class="row-label">{{'name' | i18n}}</span>
-                <input type="text" [value]="cipher.name" readonly aria-readonly="true" />
+                <label for="name">{{'name' | i18n}}</label>
+                <input id="name" type="text" [value]="cipher.name" readonly aria-readonly="true" />
             </div>
             <!-- Login -->
             <div *ngIf="cipher.login">
                 <div class="box-content-row box-content-row-flex" *ngIf="cipher.login.username">
                     <div class="row-main">
-                        <span class="row-label draggable" draggable="true"
+                        <label for="loginUsername" class="row-label draggable" draggable="true"
                             (dragstart)="setTextDataOnDrag($event, cipher.login.username)">{{'username' | i18n}}
-                        </span>
-                        <input type="text" [value]="cipher.login.username" readonly aria-readonly="true" />
+                    </label>
+                        <input id="loginUsername" type="text" [value]="cipher.login.username" readonly aria-readonly="true" />
                     </div>
                     <div class="action-buttons">
                         <button type="button" class="row-btn" appStopClick appA11yTitle="{{'copyUsername' | i18n}}"
@@ -54,7 +54,7 @@
                             <i class="fa fa-lg fa-spinner fa-spin" [hidden]="!checkPasswordBtn.loading"
                                 aria-hidden="true"></i>
                         </button>
-                        <button type="button" class="row-btn" appStopClick appA11yTitle="{{'toggleVisibility' | i18n}}"
+                        <button type="button" class="row-btn" appStopClick attr.aria-label="{{'toggleVisibility' | i18n}} {{'password' | i18n}}" appA11yTitle="{{'toggleVisibility' | i18n}}"
                             (click)="togglePassword()" *ngIf="cipher.viewPassword">
                             <i class="fa fa-lg" aria-hidden="true"
                                 [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
@@ -103,7 +103,7 @@
                         <span [hidden]="!showCardNumber" class="monospaced">{{cipher.card.number}}</span>
                     </div>
                     <div class="action-buttons">
-                        <button type="button" class="row-btn" appStopClick appA11yTitle="{{'toggleVisibility' | i18n}}"
+                        <button type="button" class="row-btn" appStopClick attr.aria-label="{{'toggleVisibility' | i18n}} {{'number' | i18n}}" appA11yTitle="{{'toggleVisibility' | i18n}}"
                             (click)="toggleCardNumber()">
                             <i class="fa fa-lg" aria-hidden="true"
                                 [ngClass]="{'fa-eye': !showCardNumber, 'fa-eye-slash': showCardNumber}"></i>
@@ -129,7 +129,7 @@
                         <span [hidden]="!showCardCode" class="monospaced">{{cipher.card.code}}</span>
                     </div>
                     <div class="action-buttons">
-                        <button type="button" class="row-btn" appStopClick appA11yTitle="{{'toggleVisibility' | i18n}}"
+                        <button type="button" class="row-btn" appStopClick attr.aria-label="{{'toggleVisibility' | i18n}} {{'securityCode' | i18n}}" appA11yTitle="{{'toggleVisibility' | i18n}}"
                             (click)="toggleCardCode()">
                             <i class="fa fa-lg" aria-hidden="true"
                                 [ngClass]="{'fa-eye': !showCardCode, 'fa-eye-slash': showCardCode}"></i>
@@ -191,18 +191,18 @@
         <div class="box-content">
             <div class="box-content-row box-content-row-flex" *ngFor="let u of cipher.login.uris; let i = index">
                 <div class="row-main">
-                    <span class="row-label" *ngIf="!u.isWebsite">{{'uri' | i18n}}</span>
-                    <span class="row-label" *ngIf="u.isWebsite">{{'website' | i18n}}</span>
+                    <label for="hostOrUri{{i}}" class="row-label" *ngIf="!u.isWebsite">{{'uri' | i18n}}</label>
+                    <label for="hostOrUri{{i}}" class="row-label" *ngIf="u.isWebsite">{{'website' | i18n}}</label>
                     <span title="{{u.uri}}">
-                        <input type="text" [value]="u.hostOrUri" readonly aria-readonly="true" />
+                        <input id="hostOrUri{{i}}" type="text" [value]="u.hostOrUri" readonly aria-readonly="true" />
                     </span>
                 </div>
                 <div class="action-buttons">
-                    <button type="button" class="row-btn" appStopClick appA11yTitle="{{'launch' | i18n}}" *ngIf="u.canLaunch"
+                    <button type="button" class="row-btn" appStopClick attr.aria-label="{{'launch' | i18n}} {{u.uri}}" appA11yTitle="{{'launch' | i18n}}" *ngIf="u.canLaunch"
                         (click)="launch(u)">
                         <i class="fa fa-lg fa-share-square-o" aria-hidden="true"></i>
                     </button>
-                    <button type="button" class="row-btn"appStopClick appA11yTitle="{{'copyUri' | i18n}}"
+                    <button type="button" class="row-btn"appStopClick attr.aria-label="{{'copyUri' | i18n}} {{u.uri}}" appA11yTitle="{{'copyUri' | i18n}}"
                         (click)="copy(u.uri, u.isWebsite ? 'website' : 'uri', 'URI')">
                         <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
                     </button>
@@ -212,11 +212,11 @@
     </div>
     <div class="box" *ngIf="cipher.notes">
         <div class="box-header">
-            {{'notes' | i18n}}
+            <label for="notes">{{'notes' | i18n}}</label>
         </div>
         <div class="box-content">
             <div class="box-content-row">
-                <textarea [value]="cipher.notes" rows="6" readonly aria-readonly="true"></textarea>
+                <textarea  id="notes" [value]="cipher.notes" rows="6" readonly aria-readonly="true"></textarea>
             </div>
         </div>
     </div>