From 4d46338a4bc43a64131b501abf2425afb526d21a Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Mon, 1 Apr 2019 22:43:42 -0400
Subject: [PATCH] a11y titles

---
 jslib                                         |  2 +-
 src/app/accounts/environment.component.html   |  2 +-
 src/app/accounts/lock.component.html          | 11 +++----
 src/app/accounts/login.component.html         |  4 +--
 src/app/accounts/premium.component.html       |  2 +-
 src/app/accounts/register.component.html      |  8 ++---
 src/app/app.module.ts                         |  2 ++
 src/app/vault/add-edit.component.html         | 31 ++++++++++---------
 src/app/vault/attachments.component.html      |  5 +--
 src/app/vault/ciphers.component.html          |  2 +-
 src/app/vault/collections.component.html      |  3 +-
 src/app/vault/export.component.html           |  4 +--
 src/app/vault/folder-add-edit.component.html  |  5 +--
 src/app/vault/groupings.component.html        | 17 +++++-----
 .../password-generator-history.component.html |  5 +--
 .../vault/password-generator.component.html   |  2 +-
 src/app/vault/password-history.component.html |  2 +-
 src/app/vault/share.component.html            |  2 +-
 src/app/vault/view.component.html             | 29 ++++++++---------
 19 files changed, 73 insertions(+), 65 deletions(-)

diff --git a/jslib b/jslib
index 2ef1b7d65c..6ac679355d 160000
--- a/jslib
+++ b/jslib
@@ -1 +1 @@
-Subproject commit 2ef1b7d65c02f7f204a0bb5a46c28aa093be274d
+Subproject commit 6ac679355ddfe045e2aca9bb469d5b7e82811371
diff --git a/src/app/accounts/environment.component.html b/src/app/accounts/environment.component.html
index b653e1e0e6..370ef3a29c 100644
--- a/src/app/accounts/environment.component.html
+++ b/src/app/accounts/environment.component.html
@@ -54,7 +54,7 @@
                 </div>
             </div>
             <div class="modal-footer">
-                <button appBlurClick type="submit" class="primary" title="{{'save' | i18n}}">
+                <button appBlurClick type="submit" class="primary" appA11yTitle="{{'save' | i18n}}">
                     <i class="fa fa-save fa-lg fa-fw"></i>
                 </button>
                 <button type="button" data-dismiss="modal">{{'close' | i18n}}</button>
diff --git a/src/app/accounts/lock.component.html b/src/app/accounts/lock.component.html
index 6e2b2aea7d..35b7ac168a 100644
--- a/src/app/accounts/lock.component.html
+++ b/src/app/accounts/lock.component.html
@@ -7,19 +7,18 @@
                 <div class="box-content-row box-content-row-flex" appBoxRow>
                     <div class="row-main" *ngIf="pinLock">
                         <label for="pin">{{'pin' | i18n}}</label>
-                        <input id="pin" type="{{showPassword ? 'text' : 'password'}}" name="PIN"
-                               class="monospaced" [(ngModel)]="pin" required appAutofocus>
+                        <input id="pin" type="{{showPassword ? 'text' : 'password'}}" name="PIN" class="monospaced"
+                            [(ngModel)]="pin" required appAutofocus>
                     </div>
                     <div class="row-main" *ngIf="!pinLock">
                         <label for="masterPassword">{{'masterPass' | i18n}}</label>
                         <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}" name="MasterPassword"
-                               class="monospaced" [(ngModel)]="masterPassword" required appAutofocus>
+                            class="monospaced" [(ngModel)]="masterPassword" required appAutofocus>
                     </div>
                     <div class="action-buttons">
                         <a class="row-btn" href="#" appStopClick appBlurClick
-                           title="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
-                            <i class="fa fa-lg"
-                               [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                            appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
+                            <i class="fa fa-lg" [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                         </a>
                     </div>
                 </div>
diff --git a/src/app/accounts/login.component.html b/src/app/accounts/login.component.html
index 6f6cd02886..06dfa0d7d9 100644
--- a/src/app/accounts/login.component.html
+++ b/src/app/accounts/login.component.html
@@ -15,8 +15,8 @@
                             class="monospaced" [(ngModel)]="masterPassword" required>
                     </div>
                     <div class="action-buttons">
-                        <a class="row-btn" href="#" appStopClick appBlurClick title="{{'toggleVisibility' | i18n}}"
-                            (click)="togglePassword()">
+                        <a class="row-btn" href="#" appStopClick appBlurClick
+                            appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
                             <i class="fa fa-lg" [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                         </a>
                     </div>
diff --git a/src/app/accounts/premium.component.html b/src/app/accounts/premium.component.html
index 9ec4c65ea2..1046cffc1c 100644
--- a/src/app/accounts/premium.component.html
+++ b/src/app/accounts/premium.component.html
@@ -57,7 +57,7 @@
                 <button type="button" data-dismiss="modal">{{'close' | i18n}}</button>
                 <div class="right" *ngIf="!isPremium">
                     <button #refreshBtn type="button" appBlurClick (click)="refresh()" [disabled]="refreshBtn.loading"
-                        title="{{'premiumRefresh' | i18n}}" [appApiAction]="refreshPromise">
+                        appA11yTitle="{{'premiumRefresh' | i18n}}" [appApiAction]="refreshPromise">
                         <i class="fa fa-refresh fa-lg fa-fw" [hidden]="refreshBtn.loading"></i>
                         <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!refreshBtn.loading"></i>
                     </button>
diff --git a/src/app/accounts/register.component.html b/src/app/accounts/register.component.html
index d45abf44e0..02444787c4 100644
--- a/src/app/accounts/register.component.html
+++ b/src/app/accounts/register.component.html
@@ -23,8 +23,8 @@
                                 [appAutofocus]="email !== ''" (input)="updatePasswordStrength()">
                         </div>
                         <div class="action-buttons">
-                            <a class="row-btn" href="#" appStopClick appBlurClick title="{{'toggleVisibility' | i18n}}"
-                                (click)="togglePassword(false)">
+                            <a class="row-btn" href="#" appStopClick appBlurClick
+                                appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(false)">
                                 <i class="fa fa-lg"
                                     [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                             </a>
@@ -50,8 +50,8 @@
                             name="MasterPasswordRetype" class="monospaced" [(ngModel)]="confirmMasterPassword" required>
                     </div>
                     <div class="action-buttons">
-                        <a class="row-btn" href="#" appStopClick appBlurClick title="{{'toggleVisibility' | i18n}}"
-                            (click)="togglePassword(true)">
+                        <a class="row-btn" href="#" appStopClick appBlurClick
+                            appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(true)">
                             <i class="fa fa-lg" [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                         </a>
                     </div>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index d9e6c1af8e..a1f3f2f6ac 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -30,6 +30,7 @@ import { TwoFactorComponent } from './accounts/two-factor.component';
 import { IconComponent } from 'jslib/angular/components/icon.component';
 import { ModalComponent } from 'jslib/angular/components/modal.component';
 
+import { A11yTitleDirective } from 'jslib/angular/directives/a11y-title.directive';
 import { ApiActionDirective } from 'jslib/angular/directives/api-action.directive';
 import { AutofocusDirective } from 'jslib/angular/directives/autofocus.directive';
 import { BlurClickDirective } from 'jslib/angular/directives/blur-click.directive';
@@ -142,6 +143,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
         DragDropModule,
     ],
     declarations: [
+        A11yTitleDirective,
         AddEditComponent,
         ApiActionDirective,
         AppComponent,
diff --git a/src/app/vault/add-edit.component.html b/src/app/vault/add-edit.component.html
index 30f56be49e..064e0e83f9 100644
--- a/src/app/vault/add-edit.component.html
+++ b/src/app/vault/add-edit.component.html
@@ -32,18 +32,18 @@
                             </div>
                             <div class="action-buttons">
                                 <button type="button" #checkPasswordBtn class="row-btn btn" appBlurClick
-                                    title="{{'checkPassword' | i18n}}" (click)="checkPassword()"
+                                    appA11yTitle="{{'checkPassword' | i18n}}" (click)="checkPassword()"
                                     [appApiAction]="checkPasswordPromise" [disabled]="checkPasswordBtn.loading">
                                     <i class="fa fa-lg fa-check-circle" [hidden]="checkPasswordBtn.loading"></i>
                                     <i class="fa fa-lg fa-spinner fa-spin" [hidden]="!checkPasswordBtn.loading"></i>
                                 </button>
                                 <a class="row-btn" href="#" appStopClick appBlurClick
-                                    title="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
+                                    appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
                                     <i class="fa fa-lg"
                                         [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                                 </a>
                                 <a class="row-btn" href="#" appStopClick appBlurClick
-                                    title="{{'generatePassword' | i18n}}" (click)="generatePassword()">
+                                    appA11yTitle="{{'generatePassword' | i18n}}" (click)="generatePassword()">
                                     <i class="fa fa-lg fa-refresh"></i>
                                 </a>
                             </div>
@@ -90,7 +90,7 @@
                             </div>
                             <div class="action-buttons">
                                 <a class="row-btn" href="#" appStopClick appBlurClick
-                                    title="{{'toggleVisibility' | i18n}}" (click)="toggleCardCode()">
+                                    appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleCardCode()">
                                     <i class="fa fa-lg"
                                         [ngClass]="{'fa-eye': !showCardCode, 'fa-eye-slash': showCardCode}"></i>
                                 </a>
@@ -193,7 +193,7 @@
                     <ng-container *ngIf="cipher.login.hasUris">
                         <div class="box-content-row box-content-row-multi" appBoxRow
                             *ngFor="let u of cipher.login.uris; let i = index; trackBy:trackByFunction">
-                            <a href="#" appStopClick (click)="removeUri(u)" title="{{'remove' | i18n}}">
+                            <a href="#" appStopClick (click)="removeUri(u)" appA11yTitle="{{'remove' | i18n}}">
                                 <i class="fa fa-minus-circle fa-lg"></i>
                             </a>
                             <div class="row-main">
@@ -210,8 +210,8 @@
                                 </select>
                             </div>
                             <div class="action-buttons">
-                                <a class="row-btn" href="#" appStopClick appBlurClick title="{{'toggleOptions' | i18n}}"
-                                    (click)="toggleUriOptions(u)">
+                                <a class="row-btn" href="#" appStopClick appBlurClick
+                                    appA11yTitle="{{'toggleOptions' | i18n}}" (click)="toggleUriOptions(u)">
                                     <i class="fa fa-lg fa-cog"></i>
                                 </a>
                             </div>
@@ -265,7 +265,7 @@
                         <div class="box-content-row box-content-row-multi box-draggable-row" cdkDrag
                             *ngFor="let f of cipher.fields; let i = index; trackBy:trackByFunction"
                             [ngClass]="{'box-content-row-checkbox': f.type === fieldType.Boolean}">
-                            <a href="#" appStopClick (click)="removeField(f)" title="{{'remove' | i18n}}">
+                            <a href="#" appStopClick (click)="removeField(f)" appA11yTitle="{{'remove' | i18n}}">
                                 <i class="fa fa-minus-circle fa-lg"></i>
                             </a>
                             <label for="fieldName{{i}}" class="sr-only">{{'name' | i18n}}</label>
@@ -284,12 +284,12 @@
                                 falseValue="false">
                             <div class="action-buttons" *ngIf="f.type === fieldType.Hidden">
                                 <a class="row-btn" href="#" appStopClick appBlurClick
-                                    title="{{'toggleVisibility' | i18n}}" (click)="toggleFieldValue(f)">
+                                    appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleFieldValue(f)">
                                     <i class="fa fa-lg"
                                         [ngClass]="{'fa-eye': !f.showValue, 'fa-eye-slash': f.showValue}"></i>
                                 </a>
                             </div>
-                            <div class="drag-handle" title="{{'dragToSort' | i18n}}" cdkDragHandle>
+                            <div class="drag-handle" appA11yTitle="{{'dragToSort' | i18n}}" cdkDragHandle>
                                 <i class="fa fa-bars"></i>
                             </div>
                         </div>
@@ -338,20 +338,21 @@
         </div>
     </div>
     <div class="footer">
-        <button appBlurClick type="submit" class="primary" title="{{'save' | i18n}}" [disabled]="form.loading">
+        <button appBlurClick type="submit" class="primary" appA11yTitle="{{'save' | i18n}}" [disabled]="form.loading">
             <i class="fa fa-save fa-lg fa-fw" [hidden]="form.loading"></i>
             <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading"></i>
         </button>
-        <button appBlurClick type="button" (click)="cancel()" title="{{'cancel' | i18n}}">
+        <button appBlurClick type="button" (click)="cancel()">
             {{'cancel' | i18n}}
         </button>
         <div class="right">
-            <button appBlurClick type="button" (click)="share()" title="{{'shareItem' | i18n}}"
+            <button appBlurClick type="button" (click)="share()" appA11yTitle="{{'shareItem' | i18n}}"
                 *ngIf="editMode && cipher && !cipher.organizationId">
                 <i class="fa fa-share-alt fa-lg fa-fw"></i>
             </button>
-            <button #deleteBtn appBlurClick type="button" (click)="delete()" class="danger" title="{{'delete' | i18n}}"
-                *ngIf="editMode" [disabled]="deleteBtn.loading" [appApiAction]="deletePromise">
+            <button #deleteBtn appBlurClick type="button" (click)="delete()" class="danger"
+                appA11yTitle="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"
+                [appApiAction]="deletePromise">
                 <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading"></i>
                 <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading"></i>
             </button>
diff --git a/src/app/vault/attachments.component.html b/src/app/vault/attachments.component.html
index 2181abcf68..1d3573dda8 100644
--- a/src/app/vault/attachments.component.html
+++ b/src/app/vault/attachments.component.html
@@ -14,7 +14,7 @@
                             <small class="row-sub-label">{{a.sizeName}}</small>
                             <div class="action-buttons no-pad">
                                 <button class="row-btn btn" type="button" appStopClick appBlurClick
-                                    title="{{'delete' | i18n}}" (click)="delete(a)" #deleteBtn
+                                    appA11yTitle="{{'delete' | i18n}}" (click)="delete(a)" #deleteBtn
                                     [appApiAction]="deletePromises[a.id]" [disabled]="deleteBtn.loading">
                                     <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading"></i>
                                     <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading"></i>
@@ -39,7 +39,8 @@
                 </div>
             </div>
             <div class="modal-footer">
-                <button appBlurClick type="submit" class="primary" title="{{'save' | i18n}}" [disabled]="form.loading">
+                <button appBlurClick type="submit" class="primary" appA11yTitle="{{'save' | i18n}}"
+                    [disabled]="form.loading">
                     <i class="fa fa-save fa-lg fa-fw" [hidden]="form.loading"></i>
                     <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading"></i>
                 </button>
diff --git a/src/app/vault/ciphers.component.html b/src/app/vault/ciphers.component.html
index 95b4978459..65ce7b8442 100644
--- a/src/app/vault/ciphers.component.html
+++ b/src/app/vault/ciphers.component.html
@@ -34,7 +34,7 @@
 </div>
 <div class="footer">
     <button appBlurClick (click)="addCipher()" (contextmenu)="addCipherOptions()" class="block primary"
-        title="{{'addItem' | i18n}}">
+        appA11yTitle="{{'addItem' | i18n}}">
         <i class="fa fa-plus fa-lg"></i>
     </button>
 </div>
diff --git a/src/app/vault/collections.component.html b/src/app/vault/collections.component.html
index b85fa618bd..94cd35adbe 100644
--- a/src/app/vault/collections.component.html
+++ b/src/app/vault/collections.component.html
@@ -20,7 +20,8 @@
                 </div>
             </div>
             <div class="modal-footer">
-                <button appBlurClick type="submit" class="primary" title="{{'save' | i18n}}" [disabled]="form.loading">
+                <button appBlurClick type="submit" class="primary" appA11yTitle="{{'save' | i18n}}"
+                    [disabled]="form.loading">
                     <i class="fa fa-save fa-lg fa-fw" [hidden]="form.loading"></i>
                     <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading"></i>
                 </button>
diff --git a/src/app/vault/export.component.html b/src/app/vault/export.component.html
index 7529465577..b8288d3887 100644
--- a/src/app/vault/export.component.html
+++ b/src/app/vault/export.component.html
@@ -23,7 +23,7 @@
                             </div>
                             <div class="action-buttons">
                                 <a class="row-btn" href="#" appStopClick appBlurClick
-                                    title="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
+                                    appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
                                     <i class="fa fa-lg"
                                         [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                                 </a>
@@ -37,7 +37,7 @@
                 </div>
             </div>
             <div class="modal-footer">
-                <button appBlurClick type="submit" class="primary" title="{{'submit' | i18n}}">
+                <button appBlurClick type="submit" class="primary" appA11yTitle="{{'submit' | i18n}}">
                     <i class="fa fa-download fa-lg fa-fw"></i>
                 </button>
                 <button type="button" data-dismiss="modal">{{'cancel' | i18n}}</button>
diff --git a/src/app/vault/folder-add-edit.component.html b/src/app/vault/folder-add-edit.component.html
index 7d69e39795..5b4f664d16 100644
--- a/src/app/vault/folder-add-edit.component.html
+++ b/src/app/vault/folder-add-edit.component.html
@@ -16,14 +16,15 @@
                 </div>
             </div>
             <div class="modal-footer">
-                <button appBlurClick type="submit" class="primary" title="{{'save' | i18n}}" [disabled]="form.loading">
+                <button appBlurClick type="submit" class="primary" appA11yTitle="{{'save' | i18n}}"
+                    [disabled]="form.loading">
                     <i class="fa fa-save fa-lg fa-fw" [hidden]="form.loading"></i>
                     <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading"></i>
                 </button>
                 <button type="button" data-dismiss="modal">{{'cancel' | i18n}}</button>
                 <div class="right">
                     <button #deleteBtn appBlurClick type="button" (click)="delete()" class="danger"
-                        title="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"
+                        appA11yTitle="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"
                         [appApiAction]="deletePromise">
                         <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading"></i>
                         <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading"></i>
diff --git a/src/app/vault/groupings.component.html b/src/app/vault/groupings.component.html
index c9ff1f91e0..76e1aaa6ac 100644
--- a/src/app/vault/groupings.component.html
+++ b/src/app/vault/groupings.component.html
@@ -39,7 +39,7 @@
         <ng-container *ngIf="loaded">
             <h2>
                 {{'folders' | i18n}}
-                <button appBlurClick (click)="addFolder()" title="{{'addFolder' | i18n}}">
+                <button appBlurClick (click)="addFolder()" appA11yTitle="{{'addFolder' | i18n}}">
                     <i class="fa fa-plus fa-fw"></i>
                 </button>
             </h2>
@@ -48,11 +48,12 @@
                     <li *ngFor="let f of folders"
                         [ngClass]="{active: selectedFolder && f.node.id === selectedFolderId}">
                         <a href="#" appStopClick appBlurClick (click)="selectFolder(f.node)">
-                            <i class="fa-li fa" title="{{'toggleCollapse' | i18n}}" [ngClass]="{'fa-caret-right': isCollapsed(f.node),
-                                    'fa-caret-down': !isCollapsed(f.node)}" (click)="collapse(f.node)" appStopProp></i>
+                            <i class="fa-li fa" appA11yTitle="{{'toggleCollapse' | i18n}}"
+                                [ngClass]="{'fa-caret-right': isCollapsed(f.node), 'fa-caret-down': !isCollapsed(f.node)}"
+                                (click)="collapse(f.node)" appStopProp></i>
                             {{f.node.name}}
-                            <span appStopProp appStopClick (click)="editFolder(f.node)" title="{{'editFolder' | i18n}}"
-                                *ngIf="f.node.id">
+                            <span appStopProp appStopClick (click)="editFolder(f.node)"
+                                appA11yTitle="{{'editFolder' | i18n}}" *ngIf="f.node.id">
                                 <i class="fa fa-pencil fa-fw"></i>
                             </span>
                         </a>
@@ -70,9 +71,9 @@
                     <ng-template #recursiveCollections let-collections>
                         <li *ngFor="let c of collections" [ngClass]="{active: c.node.id === selectedCollectionId}">
                             <a href="#" appStopClick appBlurClick (click)="selectCollection(c.node)">
-                                <i class="fa-li fa" title="{{'toggleCollapse' | i18n}}" [ngClass]="{'fa-caret-right': isCollapsed(c.node),
-                                        'fa-caret-down': !isCollapsed(c.node)}" (click)="collapse(c.node)"
-                                    appStopProp></i>
+                                <i class="fa-li fa" appA11yTitle="{{'toggleCollapse' | i18n}}"
+                                    [ngClass]="{'fa-caret-right': isCollapsed(c.node), 'fa-caret-down': !isCollapsed(c.node)}"
+                                    (click)="collapse(c.node)" appStopProp></i>
                                 {{c.node.name}}
                             </a>
                             <ul class="fa-ul" *ngIf="c.children.length && !isCollapsed(c.node)">
diff --git a/src/app/vault/password-generator-history.component.html b/src/app/vault/password-generator-history.component.html
index 7a6c28de51..5c5c15e7c4 100644
--- a/src/app/vault/password-generator-history.component.html
+++ b/src/app/vault/password-generator-history.component.html
@@ -14,7 +14,7 @@
                                 <span class="detail">{{h.date | date:'medium'}}</span>
                             </div>
                             <div class="action-buttons">
-                                <a class="row-btn" href="#" appStopClick title="{{'copyPassword' | i18n}}"
+                                <a class="row-btn" href="#" appStopClick appA11yTitle="{{'copyPassword' | i18n}}"
                                     (click)="copy(h.password)">
                                     <i class="fa fa-lg fa-clipboard"></i>
                                 </a>
@@ -29,7 +29,8 @@
             <div class="modal-footer">
                 <button type="button" data-dismiss="modal">{{'close' | i18n}}</button>
                 <div class="right">
-                    <button appBlurClick type="button" (click)="clear()" class="danger" title="{{'clear' | i18n}}">
+                    <button appBlurClick type="button" (click)="clear()" class="danger"
+                        appA11yTitle="{{'clear' | i18n}}">
                         <i class="fa fa-trash-o fa-lg fa-fw"></i>
                     </button>
                 </div>
diff --git a/src/app/vault/password-generator.component.html b/src/app/vault/password-generator.component.html
index 61297d5168..a644f268e8 100644
--- a/src/app/vault/password-generator.component.html
+++ b/src/app/vault/password-generator.component.html
@@ -102,7 +102,7 @@
             </div>
             <div class="modal-footer">
                 <button type="button" class="primary" appBlurClick *ngIf="showSelect" (click)="select()"
-                    title="{{'select' | i18n}}">
+                    appA11yTitle="{{'select' | i18n}}">
                     <i class="fa fa-lg fa-fw fa-check"></i>
                 </button>
                 <button type="button" data-dismiss="modal">{{(showSelect ? 'cancel' : 'close') | i18n}}</button>
diff --git a/src/app/vault/password-history.component.html b/src/app/vault/password-history.component.html
index b67318496e..f20263736e 100644
--- a/src/app/vault/password-history.component.html
+++ b/src/app/vault/password-history.component.html
@@ -15,7 +15,7 @@
                                 <span class="detail">{{h.lastUsedDate | date:'medium'}}</span>
                             </div>
                             <div class="action-buttons">
-                                <a class="row-btn" href="#" appStopClick title="{{'copyPassword' | i18n}}"
+                                <a class="row-btn" href="#" appStopClick appA11yTitle="{{'copyPassword' | i18n}}"
                                     (click)="copy(h.password)">
                                     <i class="fa fa-lg fa-clipboard"></i>
                                 </a>
diff --git a/src/app/vault/share.component.html b/src/app/vault/share.component.html
index acbb6309c1..a84e81dac3 100644
--- a/src/app/vault/share.component.html
+++ b/src/app/vault/share.component.html
@@ -42,7 +42,7 @@
                 </div>
             </div>
             <div class="modal-footer">
-                <button appBlurClick type="submit" class="primary" title="{{'save' | i18n}}"
+                <button appBlurClick type="submit" class="primary" appA11yTitle="{{'save' | i18n}}"
                     [disabled]="form.loading || !canSave" *ngIf="organizations && organizations.length">
                     <i class="fa fa-save fa-lg fa-fw" [hidden]="form.loading"></i>
                     <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading"></i>
diff --git a/src/app/vault/view.component.html b/src/app/vault/view.component.html
index 45ef5fdae1..7f8e62352d 100644
--- a/src/app/vault/view.component.html
+++ b/src/app/vault/view.component.html
@@ -17,7 +17,7 @@
                             {{cipher.login.username}}
                         </div>
                         <div class="action-buttons">
-                            <a class="row-btn" href="#" appStopClick title="{{'copyUsername' | i18n}}"
+                            <a class="row-btn" href="#" appStopClick appA11yTitle="{{'copyUsername' | i18n}}"
                                 (click)="copy(cipher.login.username, 'username', 'Username')">
                                 <i class="fa fa-lg fa-clipboard"></i>
                             </a>
@@ -33,17 +33,17 @@
                         </div>
                         <div class="action-buttons">
                             <button type="button" #checkPasswordBtn class="row-btn btn" appBlurClick
-                                title="{{'checkPassword' | i18n}}" (click)="checkPassword()"
+                                appA11yTitle="{{'checkPassword' | i18n}}" (click)="checkPassword()"
                                 [appApiAction]="checkPasswordPromise" [disabled]="checkPasswordBtn.loading">
                                 <i class="fa fa-lg fa-check-circle" [hidden]="checkPasswordBtn.loading"></i>
                                 <i class="fa fa-lg fa-spinner fa-spin" [hidden]="!checkPasswordBtn.loading"></i>
                             </button>
-                            <a class="row-btn" href="#" appStopClick title="{{'toggleVisibility' | i18n}}"
+                            <a class="row-btn" href="#" appStopClick appA11yTitle="{{'toggleVisibility' | i18n}}"
                                 (click)="togglePassword()">
                                 <i class="fa fa-lg"
                                     [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                             </a>
-                            <a class="row-btn" href="#" appStopClick title="{{'copyPassword' | i18n}}"
+                            <a class="row-btn" href="#" appStopClick appA11yTitle="{{'copyPassword' | i18n}}"
                                 (click)="copy(cipher.login.password, 'password', 'Password')">
                                 <i class="fa fa-lg fa-clipboard"></i>
                             </a>
@@ -66,7 +66,7 @@
                             </svg>
                         </span>
                         <div class="action-buttons">
-                            <a class="row-btn" href="#" appStopClick title="{{'copyValue' | i18n}}"
+                            <a class="row-btn" href="#" appStopClick appA11yTitle="{{'copyValue' | i18n}}"
                                 (click)="copy(totpCode, 'verificationCodeTotp', 'TOTP')">
                                 <i class="fa fa-lg fa-clipboard"></i>
                             </a>
@@ -85,7 +85,7 @@
                             {{cipher.card.number}}
                         </div>
                         <div class="action-buttons">
-                            <a class="row-btn" href="#" appStopClick title="{{'copyNumber' | i18n}}"
+                            <a class="row-btn" href="#" appStopClick appA11yTitle="{{'copyNumber' | i18n}}"
                                 (click)="copy(cipher.card.number, 'number', 'Number')">
                                 <i class="fa fa-lg fa-clipboard"></i>
                             </a>
@@ -106,12 +106,12 @@
                             <span [hidden]="!showCardCode" class="monospaced">{{cipher.card.code}}</span>
                         </div>
                         <div class="action-buttons">
-                            <a class="row-btn" href="#" appStopClick title="{{'toggleVisibility' | i18n}}"
+                            <a class="row-btn" href="#" appStopClick appA11yTitle="{{'toggleVisibility' | i18n}}"
                                 (click)="toggleCardCode()">
                                 <i class="fa fa-lg"
                                     [ngClass]="{'fa-eye': !showCardCode, 'fa-eye-slash': showCardCode}"></i>
                             </a>
-                            <a class="row-btn" href="#" appStopClick title="{{'copySecurityCode' | i18n}}"
+                            <a class="row-btn" href="#" appStopClick appA11yTitle="{{'copySecurityCode' | i18n}}"
                                 (click)="copy(cipher.card.code, 'securityCode', 'Security Code')">
                                 <i class="fa fa-lg fa-clipboard"></i>
                             </a>
@@ -177,11 +177,11 @@
                         <span title="{{u.uri}}">{{u.hostnameOrUri}}</span>
                     </div>
                     <div class="action-buttons">
-                        <a class="row-btn" href="#" appStopClick title="{{'launch' | i18n}}" *ngIf="u.canLaunch"
+                        <a class="row-btn" href="#" appStopClick appA11yTitle="{{'launch' | i18n}}" *ngIf="u.canLaunch"
                             (click)="launch(u)">
                             <i class="fa fa-lg fa-share-square-o"></i>
                         </a>
-                        <a class="row-btn" href="#" appStopClick title="{{'copyUri' | i18n}}"
+                        <a class="row-btn" href="#" appStopClick appA11yTitle="{{'copyUri' | i18n}}"
                             (click)="copy(u.uri, u.isWebsite ? 'website' : 'uri', 'URI')">
                             <i class="fa fa-lg fa-clipboard"></i>
                         </a>
@@ -218,12 +218,12 @@
                         </div>
                     </div>
                     <div class="action-buttons">
-                        <a class="row-btn" href="#" appStopClick title="{{'toggleVisibility' | i18n}}"
+                        <a class="row-btn" href="#" appStopClick appA11yTitle="{{'toggleVisibility' | i18n}}"
                             *ngIf="field.type === fieldType.Hidden" (click)="toggleFieldValue(field)">
                             <i class="fa fa-lg"
                                 [ngClass]="{'fa-eye': !field.showValue, 'fa-eye-slash': field.showValue}"></i>
                         </a>
-                        <a class="row-btn" href="#" appStopClick title="{{'copyValue' | i18n}}"
+                        <a class="row-btn" href="#" appStopClick appA11yTitle="{{'copyValue' | i18n}}"
                             *ngIf="field.value && field.type !== fieldType.Boolean"
                             (click)="copy(field.value, 'value', 'Field')">
                             <i class="fa fa-lg fa-clipboard"></i>
@@ -259,7 +259,8 @@
                 </div>
                 <div *ngIf="cipher.hasPasswordHistory">
                     <b class="font-weight-semibold">{{'passwordHistory' | i18n}}:</b>
-                    <a href="#" (click)="viewHistory()" appStopClick title="{{'passwordHistory' | i18n}}">
+                    <a href="#" (click)="viewHistory()" appStopClick
+                        appA11yTitle="{{'passwordHistory' | i18n}}, {{cipher.passwordHistory.length}}">
                         {{cipher.passwordHistory.length}}
                     </a>
                 </div>
@@ -268,7 +269,7 @@
     </div>
 </div>
 <div class="footer">
-    <button appBlurClick class="primary" (click)="edit()" title="{{'edit' | i18n}}">
+    <button appBlurClick class="primary" (click)="edit()" appA11yTitle="{{'edit' | i18n}}">
         <i class="fa fa-pencil fa-fw fa-lg"></i>
     </button>
 </div>