From b296dbb6de6d0522dc030bf9ad4b3255093f4ab6 Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Mon, 1 Apr 2019 23:08:54 -0400
Subject: [PATCH] mark icons as hidden from a11y

---
 src/app/accounts/environment.component.html     | 10 +++++-----
 src/app/accounts/hint.component.html            |  2 +-
 src/app/accounts/lock.component.html            |  4 ++--
 src/app/accounts/login.component.html           |  8 ++++----
 src/app/accounts/premium.component.html         | 12 ++++++------
 src/app/accounts/register.component.html        |  2 +-
 src/app/accounts/two-factor.component.html      |  5 +++--
 src/app/vault/add-edit.component.html           |  8 ++++----
 src/app/vault/ciphers.component.html            | 16 +++++++++++-----
 src/app/vault/groupings.component.html          | 12 ++++++------
 src/app/vault/password-generator.component.html | 10 +++++-----
 src/app/vault/view.component.html               | 10 ++++++----
 src/index.html                                  |  2 +-
 13 files changed, 55 insertions(+), 46 deletions(-)

diff --git a/src/app/accounts/environment.component.html b/src/app/accounts/environment.component.html
index e3cc40c003d..f1edef09693 100644
--- a/src/app/accounts/environment.component.html
+++ b/src/app/accounts/environment.component.html
@@ -10,7 +10,7 @@
                         <div class="box-content-row" appBoxRow>
                             <label for="baseUrl">{{'baseUrl' | i18n}}</label>
                             <input id="baseUrl" type="text" name="BaseUrl" [(ngModel)]="baseUrl"
-                                   placeholder="{{'ex' | i18n}} https://bitwarden.company.com">
+                                placeholder="{{'ex' | i18n}} https://bitwarden.company.com">
                         </div>
                     </div>
                     <div class="box-footer">
@@ -19,9 +19,9 @@
                 </div>
                 <div class="box">
                     <div class="box-header">
-                        <button type="button" (click)="toggleCustom()">
-                            <i class="fa fa-plus-square-o" [hidden]="showCustom"></i>
-                            <i class="fa fa-minus-square-o" [hidden]="!showCustom"></i>
+                        <button type="button" (click)="toggleCustom()" appA11yTitle="{{'toggleVisibility' | i18n}}">
+                            <i class="fa fa-plus-square-o" [hidden]="showCustom" aria-hidden="true"></i>
+                            <i class="fa fa-minus-square-o" [hidden]="!showCustom" aria-hidden="true"></i>
                             {{'customEnvironment' | i18n}}
                         </button>
                     </div>
@@ -41,7 +41,7 @@
                         <div class="box-content-row" appBoxRow>
                             <label for="notificationsUrl">{{'notificationsUrl' | i18n}}</label>
                             <input id="notificationsUrl" type="text" name="NotificationsUrl"
-                                   [(ngModel)]="notificationsUrl">
+                                [(ngModel)]="notificationsUrl">
                         </div>
                         <div class="box-content-row" appBoxRow>
                             <label for="iconsUrl">{{'iconsUrl' | i18n}}</label>
diff --git a/src/app/accounts/hint.component.html b/src/app/accounts/hint.component.html
index fa1c0c47f07..f714020e9d2 100644
--- a/src/app/accounts/hint.component.html
+++ b/src/app/accounts/hint.component.html
@@ -15,7 +15,7 @@
         <div class="buttons">
             <button type="submit" class="btn primary block" [disabled]="form.loading" appBlurClick>
                 <b [hidden]="form.loading">{{'submit' | i18n}}</b>
-                <i class="fa fa-spinner fa-spin" [hidden]="!form.loading"></i>
+                <i class="fa fa-spinner fa-spin" [hidden]="!form.loading" aria-hidden="true"></i>
             </button>
             <a routerLink="/login" class="btn block">{{'cancel' | i18n}}</a>
         </div>
diff --git a/src/app/accounts/lock.component.html b/src/app/accounts/lock.component.html
index 4f3334a74c9..4008c9505a0 100644
--- a/src/app/accounts/lock.component.html
+++ b/src/app/accounts/lock.component.html
@@ -1,6 +1,6 @@
 <form id="lock-page" (ngSubmit)="submit()">
     <div class="content">
-        <p><i class="fa fa-lock fa-4x text-muted"></i></p>
+        <p aria-hidden="true"><i class="fa fa-lock fa-4x text-muted"></i></p>
         <p>{{(pinLock ? 'yourVaultIsLockedPinCode' : 'yourVaultIsLocked') | i18n}}</p>
         <div class="box last">
             <div class="box-content">
@@ -30,7 +30,7 @@
         </div>
         <div class="buttons">
             <button type="submit" class="btn primary block" appBlurClick>
-                <i class="fa fa-unlock-alt"></i> <b>{{'unlock' | i18n}}</b>
+                <i class="fa fa-unlock-alt" aria-hidden="true"></i> <b>{{'unlock' | i18n}}</b>
             </button>
             <button type="button" class="btn block" appBlurClick (click)="logOut()">
                 {{'logOut' | i18n}}
diff --git a/src/app/accounts/login.component.html b/src/app/accounts/login.component.html
index 5921737b41a..ae85b1d3c83 100644
--- a/src/app/accounts/login.component.html
+++ b/src/app/accounts/login.component.html
@@ -26,18 +26,18 @@
         </div>
         <div class="buttons">
             <button type="submit" class="btn primary block" [disabled]="form.loading" appBlurClick>
-                <b [hidden]="form.loading"><i class="fa fa-sign-in"></i> {{'logIn' | i18n}}</b>
-                <i class="fa fa-spinner fa-spin" [hidden]="!form.loading"></i>
+                <b [hidden]="form.loading"><i class="fa fa-sign-in" aria-hidden="true"></i> {{'logIn' | i18n}}</b>
+                <i class="fa fa-spinner fa-spin" [hidden]="!form.loading" aria-hidden="true"></i>
             </button>
             <a routerLink="/register" class="btn block">
-                <i class="fa fa-pencil-square-o"></i> {{'createAccount' | i18n}}
+                <i class="fa fa-pencil-square-o" aria-hidden="true"></i> {{'createAccount' | i18n}}
             </a>
         </div>
         <div class="sub-options">
             <a routerLink="/hint">{{'getMasterPasswordHint' | i18n}}</a>
         </div>
         <a href="#" appStopClick (click)="settings()" class="settings-icon">
-            <i class="fa fa-cog fa-lg"></i><span>&nbsp;{{'settings' | i18n}}</span>
+            <i class="fa fa-cog fa-lg" aria-hidden="true"></i><span>&nbsp;{{'settings' | i18n}}</span>
         </a>
     </div>
 </form>
diff --git a/src/app/accounts/premium.component.html b/src/app/accounts/premium.component.html
index 20cecae3a74..401d8ad1815 100644
--- a/src/app/accounts/premium.component.html
+++ b/src/app/accounts/premium.component.html
@@ -12,27 +12,27 @@
                             <p>{{'premiumSignUpAndGet' | i18n}}</p>
                             <ul class="fa-ul">
                                 <li>
-                                    <i class="fa-li fa fa-check text-success"></i>
+                                    <i class="fa-li fa fa-check text-success" aria-hidden="true"></i>
                                     {{'premiumSignUpStorage' | i18n}}
                                 </li>
                                 <li>
-                                    <i class="fa-li fa fa-check text-success"></i>
+                                    <i class="fa-li fa fa-check text-success" aria-hidden="true"></i>
                                     {{'premiumSignUpTwoStep' | i18n}}
                                 </li>
                                 <li>
-                                    <i class="fa-li fa fa-check text-success"></i>
+                                    <i class="fa-li fa fa-check text-success" aria-hidden="true"></i>
                                     {{'premiumSignUpReports' | i18n}}
                                 </li>
                                 <li>
-                                    <i class="fa-li fa fa-check text-success"></i>
+                                    <i class="fa-li fa fa-check text-success" aria-hidden="true"></i>
                                     {{'premiumSignUpTotp' | i18n}}
                                 </li>
                                 <li>
-                                    <i class="fa-li fa fa-check text-success"></i>
+                                    <i class="fa-li fa fa-check text-success" aria-hidden="true"></i>
                                     {{'premiumSignUpSupport' | i18n}}
                                 </li>
                                 <li>
-                                    <i class="fa-li fa fa-check text-success"></i>
+                                    <i class="fa-li fa fa-check text-success" aria-hidden="true"></i>
                                     {{'premiumSignUpFuture' | i18n}}
                                 </li>
                             </ul>
diff --git a/src/app/accounts/register.component.html b/src/app/accounts/register.component.html
index 5beee2f8f2b..cccf073a95d 100644
--- a/src/app/accounts/register.component.html
+++ b/src/app/accounts/register.component.html
@@ -69,7 +69,7 @@
         <div class="buttons">
             <button type="submit" class="btn primary block" [disabled]="form.loading" appBlurClick>
                 <b [hidden]="form.loading">{{'submit' | i18n}}</b>
-                <i class="fa fa-spinner fa-spin" [hidden]="!form.loading"></i>
+                <i class="fa fa-spinner fa-spin" [hidden]="!form.loading" aria-hidden="true"></i>
             </button>
             <a routerLink="/login" class="btn block">{{'cancel' | i18n}}</a>
         </div>
diff --git a/src/app/accounts/two-factor.component.html b/src/app/accounts/two-factor.component.html
index ef5db977273..2b045191599 100644
--- a/src/app/accounts/two-factor.component.html
+++ b/src/app/accounts/two-factor.component.html
@@ -57,8 +57,9 @@
         <div class="buttons">
             <button type="submit" class="btn primary block" [disabled]="form.loading" appBlurClick *ngIf="selectedProviderType != null && selectedProviderType !== providerType.Duo && 
                         selectedProviderType !== providerType.OrganizationDuo">
-                <span [hidden]="form.loading"><i class="fa fa-sign-in"></i> {{'continue' | i18n}}</span>
-                <i class="fa fa-spinner fa-spin" [hidden]="!form.loading"></i>
+                <span [hidden]="form.loading"><i class="fa fa-sign-in" aria-hidden="true"></i>
+                    {{'continue' | i18n}}</span>
+                <i class="fa fa-spinner fa-spin" [hidden]="!form.loading" aria-hidden="true"></i>
             </button>
             <a routerLink="/login" class="btn block">{{'cancel' | i18n}}</a>
         </div>
diff --git a/src/app/vault/add-edit.component.html b/src/app/vault/add-edit.component.html
index 23be5dc7911..be916685d23 100644
--- a/src/app/vault/add-edit.component.html
+++ b/src/app/vault/add-edit.component.html
@@ -220,7 +220,7 @@
                         </div>
                     </ng-container>
                     <a href="#" appStopClick appBlurClick (click)="addUri()" class="box-content-row">
-                        <i class="fa fa-plus-circle fa-fw fa-lg"></i> {{'newUri' | i18n}}
+                        <i class="fa fa-plus-circle fa-fw fa-lg" aria-hidden="true"></i> {{'newUri' | i18n}}
                     </a>
                 </div>
             </div>
@@ -239,12 +239,12 @@
                     <a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
                         (click)="attachments()" *ngIf="editMode">
                         <div class="row-main">{{'attachments' | i18n}}</div>
-                        <i class="fa fa-chevron-right row-sub-icon"></i>
+                        <i class="fa fa-chevron-right row-sub-icon" aria-hidden="true"></i>
                     </a>
                     <a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
                         (click)="editCollections()" *ngIf="editMode && cipher.organizationId">
                         <div class="row-main">{{'collections' | i18n}}</div>
-                        <i class="fa fa-chevron-right row-sub-icon"></i>
+                        <i class="fa fa-chevron-right row-sub-icon" aria-hidden="true"></i>
                     </a>
                 </div>
             </div>
@@ -298,7 +298,7 @@
                     </div>
                     <div class="box-content-row" appBoxRow>
                         <a href="#" appStopClick (click)="addField()">
-                            <i class="fa fa-plus-circle fa-fw fa-lg"></i> {{'newCustomField' | i18n}}
+                            <i class="fa fa-plus-circle fa-fw fa-lg" aria-hidden="true"></i> {{'newCustomField' | i18n}}
                         </a>
                         <label for="addFieldType" class="sr-only">{{'type' | i18n}}</label>
                         <select id="addFieldType" name="AddFieldType" [(ngModel)]="addFieldType" class="field-type">
diff --git a/src/app/vault/ciphers.component.html b/src/app/vault/ciphers.component.html
index 70c9574ead2..c75a3589aa7 100644
--- a/src/app/vault/ciphers.component.html
+++ b/src/app/vault/ciphers.component.html
@@ -2,7 +2,7 @@
     <div class="search">
         <input type="search" placeholder="{{searchPlaceholder || ('searchVault' | i18n)}}" id="search"
             [(ngModel)]="searchText" (input)="search(200)" appAutofocus>
-        <i class="fa fa-search"></i>
+        <i class="fa fa-search" aria-hidden="true"></i>
     </div>
 </div>
 <div class="content">
@@ -16,16 +16,22 @@
                 <app-vault-icon [cipher]="c"></app-vault-icon>
                 <span class="text">
                     {{c.name}}
-                    <i class="fa fa-share-alt text-muted" *ngIf="c.organizationId" title="{{'shared' | i18n}}"></i>
-                    <i class="fa fa-paperclip text-muted" *ngIf="c.hasAttachments" title="{{'attachments' | i18n}}"></i>
+                    <ng-container *ngIf="c.organizationId">
+                        <i class="fa fa-share-alt text-muted" title="{{'shared' | i18n}}" aria-hidden="true"></i>
+                        <span class="sr-only">{{'shared' | i18n}}</span>
+                    </ng-container>
+                    <ng-container *ngIf="c.hasAttachments">
+                        <i class="fa fa-paperclip text-muted" title="{{'attachments' | i18n}}" aria-hidden="true"></i>
+                        <span class="sr-only">{{'attachments' | i18n}}</span>
+                    </ng-container>
                 </span>
                 <span class="detail">{{c.subTitle}}</span>
             </a>
         </div>
         <div class="no-items" *ngIf="!filteredCiphers.length">
-            <i class="fa fa-spinner fa-spin fa-3x" *ngIf="!loaded"></i>
+            <i class="fa fa-spinner fa-spin fa-3x" *ngIf="!loaded" aria-hidden="true"></i>
             <ng-container *ngIf="loaded">
-                <i class="fa fa-frown-o fa-4x"></i>
+                <i class="fa fa-frown-o fa-4x" aria-hidden="true"></i>
                 <p>{{'noItemsInList' | i18n}}</p>
                 <button (click)="addCipher()" class="btn block primary link">{{'addItem' | i18n}}</button>
             </ng-container>
diff --git a/src/app/vault/groupings.component.html b/src/app/vault/groupings.component.html
index 81ca747f0b1..8016e0f3ff9 100644
--- a/src/app/vault/groupings.component.html
+++ b/src/app/vault/groupings.component.html
@@ -3,12 +3,12 @@
         <ul>
             <li [ngClass]="{active: selectedAll}">
                 <a href="#" appStopClick appBlurClick (click)="selectAll()">
-                    <i class="fa fa-fw fa-th"></i>&nbsp;{{'allItems' | i18n}}
+                    <i class="fa fa-fw fa-th" aria-hidden="true"></i>&nbsp;{{'allItems' | i18n}}
                 </a>
             </li>
             <li [ngClass]="{active: selectedFavorites}">
                 <a href="#" appStopClick appBlurClick (click)="selectFavorites()">
-                    <i class="fa fa-fw fa-star"></i>&nbsp;{{'favorites' | i18n}}
+                    <i class="fa fa-fw fa-star" aria-hidden="true"></i>&nbsp;{{'favorites' | i18n}}
                 </a>
             </li>
         </ul>
@@ -16,22 +16,22 @@
         <ul>
             <li [ngClass]="{active: selectedType === cipherType.Login}">
                 <a href="#" appStopClick appBlurClick (click)="selectType(cipherType.Login)">
-                    <i class="fa fa-fw fa-globe"></i>&nbsp;{{'typeLogin' | i18n}}
+                    <i class="fa fa-fw fa-globe" aria-hidden="true"></i>&nbsp;{{'typeLogin' | i18n}}
                 </a>
             </li>
             <li [ngClass]="{active: selectedType === cipherType.Card}">
                 <a href="#" appStopClick appBlurClick (click)="selectType(cipherType.Card)">
-                    <i class="fa fa-fw fa-credit-card"></i>&nbsp;{{'typeCard' | i18n}}
+                    <i class="fa fa-fw fa-credit-card" aria-hidden="true"></i>&nbsp;{{'typeCard' | i18n}}
                 </a>
             </li>
             <li [ngClass]="{active: selectedType === cipherType.Identity}">
                 <a href="#" appStopClick appBlurClick (click)="selectType(cipherType.Identity)">
-                    <i class="fa fa-fw fa-id-card-o"></i>&nbsp;{{'typeIdentity' | i18n}}
+                    <i class="fa fa-fw fa-id-card-o" aria-hidden="true"></i>&nbsp;{{'typeIdentity' | i18n}}
                 </a>
             </li>
             <li [ngClass]="{active: selectedType === cipherType.SecureNote}">
                 <a href="#" appStopClick appBlurClick (click)="selectType(cipherType.SecureNote)">
-                    <i class="fa fa-fw fa-sticky-note-o"></i>&nbsp;{{'typeSecureNote' | i18n}}
+                    <i class="fa fa-fw fa-sticky-note-o" aria-hidden="true"></i>&nbsp;{{'typeSecureNote' | i18n}}
                 </a>
             </li>
         </ul>
diff --git a/src/app/vault/password-generator.component.html b/src/app/vault/password-generator.component.html
index b47aed13cba..cd4d4d5d030 100644
--- a/src/app/vault/password-generator.component.html
+++ b/src/app/vault/password-generator.component.html
@@ -8,18 +8,18 @@
                 <div class="box">
                     <div class="box-content condensed">
                         <a class="box-content-row" href="#" appStopClick appBlurClick (click)="regenerate()">
-                            <i class="fa fa-fw fa-refresh"></i> {{'regeneratePassword' | i18n}}
+                            <i class="fa fa-fw fa-refresh" aria-hidden="true"></i> {{'regeneratePassword' | i18n}}
                         </a>
                         <a class="box-content-row" href="#" appStopClick appBlurClick (click)="copy()">
-                            <i class="fa fa-fw fa-clipboard"></i> {{'copyPassword' | i18n}}
+                            <i class="fa fa-fw fa-clipboard" aria-hidden="true"></i> {{'copyPassword' | i18n}}
                         </a>
                     </div>
                 </div>
                 <div class="box">
                     <div class="box-header">
-                        <button type="button" (click)="toggleOptions()">
-                            <i class="fa fa-plus-square-o" [hidden]="showOptions"></i>
-                            <i class="fa fa-minus-square-o" [hidden]="!showOptions"></i>
+                        <button type="button" (click)="toggleOptions()" appA11yTitle="{{'toggleVisibility' | i18n}}">
+                            <i class="fa fa-plus-square-o" aria-hidden="true" [hidden]="showOptions"></i>
+                            <i class="fa fa-minus-square-o" aria-hidden="true" [hidden]="!showOptions"></i>
                             {{'options' | i18n}}
                         </button>
                     </div>
diff --git a/src/app/vault/view.component.html b/src/app/vault/view.component.html
index 0fcf8023f32..76bc894563c 100644
--- a/src/app/vault/view.component.html
+++ b/src/app/vault/view.component.html
@@ -215,8 +215,9 @@
                             <span [hidden]="field.showValue" class="monospaced">{{field.maskedValue}}</span>
                         </div>
                         <div *ngIf="field.type === fieldType.Boolean">
-                            <i class="fa fa-check-square-o" *ngIf="field.value === 'true'"></i>
-                            <i class="fa fa-square-o" *ngIf="field.value !== 'true'"></i>
+                            <i class="fa fa-check-square-o" *ngIf="field.value === 'true'" aria-hidden="true"></i>
+                            <i class="fa fa-square-o" *ngIf="field.value !== 'true'" aria-hidden="true"></i>
+                            <span class="sr-only">{{field.value}}</span>
                         </div>
                     </div>
                     <div class="action-buttons">
@@ -244,8 +245,9 @@
                     (click)="downloadAttachment(attachment)">
                     <span class="row-main">{{attachment.fileName}}</span>
                     <small class="row-sub-label">{{attachment.sizeName}}</small>
-                    <i class="fa fa-download fa-fw row-sub-icon" *ngIf="!attachment.downloading"></i>
-                    <i class="fa fa-spinner fa-fw fa-spin row-sub-icon" *ngIf="attachment.downloading"></i>
+                    <i class="fa fa-download fa-fw row-sub-icon" *ngIf="!attachment.downloading" aria-hidden="true"></i>
+                    <i class="fa fa-spinner fa-fw fa-spin row-sub-icon" *ngIf="attachment.downloading"
+                        aria-hidden="true"></i>
                 </a>
             </div>
         </div>
diff --git a/src/index.html b/src/index.html
index 3dd5f7f53f6..f945456d7be 100644
--- a/src/index.html
+++ b/src/index.html
@@ -10,7 +10,7 @@
 </head>
 <body>
     <app-root>
-        <div id="loading"><i class="fa fa-spinner fa-spin fa-3x"></i></div>
+        <div id="loading"><i class="fa fa-spinner fa-spin fa-3x" aria-hidden="true"></i></div>
     </app-root>
 </body>
 </html>