Change links to buttons

- more semantically accurate, will expose these as buttons to assistive technologies
- note: while having block-level elements like `<div>` inside a `<button>` is an html validation error, it does not affect functionality as long as there's no more structure inside it

src/popup/accounts/home.component.html

@@ -1,14 +1,14 @@
-<div class="center-content">
-    <div class="content">
-        <div class="logo-image"></div>
-        <p class="lead text-center">{{'loginOrCreateNewAccount' | i18n}}</p>
-        <a class="btn primary block" routerLink="/login"><b>{{'login' | i18n}}</b></a>
-        <a (click)="launchSsoBrowser()" class="btn block">
-            <i class="fa fa-bank" aria-hidden="true"></i> {{'enterpriseSingleSignOn' | i18n}}
-        </a>
-        <a class="btn block" routerLink="/register">{{'createAccount' | i18n}}</a>
-    </div>
-</div>
-<a routerLink="/environment" class="settings-icon">
-    <i class="fa fa-cog fa-lg" aria-hidden="true"></i><span>&nbsp;{{'settings' | i18n}}</span>
-</a>
+<div class="center-content">
+    <div class="content">
+        <div class="logo-image"></div>
+        <p class="lead text-center">{{'loginOrCreateNewAccount' | i18n}}</p>
+        <a class="btn primary block" routerLink="/login"><b>{{'login' | i18n}}</b></a>
+        <button (click)="launchSsoBrowser()" class="btn block">
+            <i class="fa fa-bank" aria-hidden="true"></i> {{'enterpriseSingleSignOn' | i18n}}
+        </button>
+        <a class="btn block" routerLink="/register">{{'createAccount' | i18n}}</a>
+    </div>
+</div>
+<a routerLink="/environment" class="settings-icon">
+    <i class="fa fa-cog fa-lg" aria-hidden="true"></i><span>&nbsp;{{'settings' | i18n}}</span>
+</a>

src/popup/accounts/lock.component.html

@@ -23,11 +23,11 @@
                             class="monospaced" [(ngModel)]="masterPassword" required appInputVerbatim>
                     </div>
                     <div class="action-buttons">
-                        <a class="row-btn" href="#" appStopClick appBlurClick
+                        <button type="button" class="row-btn" appStopClick appBlurClick
                             appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
                             <i class="fa fa-lg" [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"
                                 aria-hidden="true"></i>
-                        </a>
+                        </button>
                     </div>
                 </div>
             </div>
@@ -38,11 +38,11 @@
         </div>
         <div class="box" *ngIf="biometricLock">
             <div class="box-footer">
-                <button class="btn primary block" (click)="unlockBiometric()" appStopClick>{{'unlockWithBiometrics' | i18n}}</button>
+                <button type="button" class="btn primary block" (click)="unlockBiometric()" appStopClick>{{'unlockWithBiometrics' | i18n}}</button>
             </div>
         </div>
         <p class="text-center">
-            <a href="#" appStopClick (click)="logOut()">{{'logOut' | i18n}}</a>
+            <button appStopClick (click)="logOut()">{{'logOut' | i18n}}</button>
         </p>
     </content>
 </form>

src/popup/accounts/login.component.html

@@ -28,11 +28,11 @@
                             class="monospaced" [(ngModel)]="masterPassword" required appInputVerbatim>
                     </div>
                     <div class="action-buttons">
-                        <a class="row-btn" href="#" appStopClick appBlurClick
+                        <button type="button" class="row-btn" appStopClick appBlurClick
                             appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
                             <i class="fa fa-lg" [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"
                                 aria-hidden="true"></i>
-                        </a>
+                        </button>
                     </div>
                 </div>
                 <div class="box-content-row" [hidden]="!showCaptcha()">

src/popup/accounts/register.component.html

@@ -36,11 +36,11 @@
                                 [appAutofocus]="email !== ''" appInputVerbatim (input)="updatePasswordStrength()">
                         </div>
                         <div class="action-buttons">
-                            <a class="row-btn" href="#" appStopClick appBlurClick
+                            <button type="button" class="row-btn" appStopClick appBlurClick
                                 appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(false)">
                                 <i class="fa fa-lg" aria-hidden="true"
                                     [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
-                            </a>
+                            </button>
                         </div>
                     </div>
                     <div class="progress">
@@ -64,11 +64,11 @@
                             appInputVerbatim>
                     </div>
                     <div class="action-buttons">
-                        <a class="row-btn" href="#" appStopClick appBlurClick
+                        <button type="button" class="row-btn" appStopClick appBlurClick
                             appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(true)">
                             <i class="fa fa-lg" aria-hidden="true"
                                 [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
-                        </a>
+                        </button>
                     </div>
                 </div>
                 <div class="box-content-row" appBoxRow>

src/popup/accounts/set-password.component.html

@@ -54,11 +54,11 @@
                                     (input)="updatePasswordStrength()" appInputVerbatim>
                             </div>
                             <div class="action-buttons">
-                                <a class="row-btn" href="#" appStopClick appBlurClick role="button"
+                                <button type="button" class="row-btn" appStopClick appBlurClick role="button"
                                     appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(false)">
                                     <i class="fa fa-lg" aria-hidden="true"
                                         [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
-                                </a>
+                                </button>
                             </div>
                         </div>
                         <div class="progress">
@@ -85,11 +85,11 @@
                                     autocomplete="new-password">
                             </div>
                             <div class="action-buttons">
-                                <a class="row-btn" href="#" appStopClick appBlurClick role="button"
+                                <button type="button" class="row-btn" appStopClick appBlurClick role="button"
                                     appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(true)">
                                     <i class="fa fa-lg" aria-hidden="true"
                                         [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
-                                </a>
+                                </button>
                             </div>
                         </div>
                     </div>

src/popup/accounts/two-factor-options.component.html

@@ -10,14 +10,14 @@
 <content>
     <div class="box">
         <div class="box-content">
-            <a href="#" appStopClick *ngFor="let p of providers" class="box-content-row" (click)="choose(p)">
+            <button type="button" appStopClick *ngFor="let p of providers" class="box-content-row" (click)="choose(p)">
                 <span class="text">{{p.name}}</span>
                 <span class="detail">{{p.description}}</span>
-            </a>
-            <a href="#" appStopClick class="box-content-row" (click)="recover()">
+            </button>
+            <button type="button" appStopClick class="box-content-row" (click)="recover()">
                 <span class="text">{{'recoveryCodeTitle' | i18n}}</span>
                 <span class="detail">{{'recoveryCodeDesc' | i18n}}</span>
-            </a>
+            </button>
         </div>
     </div>
 </content>

src/popup/accounts/two-factor.component.html

@@ -73,7 +73,7 @@
         <ng-container *ngIf="selectedProviderType === providerType.WebAuthn && webAuthnNewTab">
             <div class="content text-center" *ngIf="webAuthnNewTab">
                 <p class="text-center">{{'webAuthnNewTab' | i18n}}</p>
-                <button class="btn primary block" (click)="authWebAuthn()" appStopClick>{{'webAuthnNewTabOpen' | i18n}}</button>
+                <button type="button" class="btn primary block" (click)="authWebAuthn()" appStopClick>{{'webAuthnNewTabOpen' | i18n}}</button>
             </div>
         </ng-container>
         <ng-container *ngIf="selectedProviderType === providerType.Duo ||
@@ -94,12 +94,12 @@
         </div>
         <div class="content no-vpad" *ngIf="selectedProviderType != null">
             <p class="text-center">
-                <a href="#" appStopClick (click)="anotherMethod()">{{'useAnotherTwoStepMethod' | i18n}}</a>
+                <button type="button" appStopClick (click)="anotherMethod()">{{'useAnotherTwoStepMethod' | i18n}}</button>
             </p>
             <p *ngIf="selectedProviderType === providerType.Email" class="text-center">
-                <a href="#" appStopClick (click)="sendEmail(true)" [appApiAction]="emailPromise">
+                <button type="button" appStopClick (click)="sendEmail(true)" [appApiAction]="emailPromise">
                     {{'sendVerificationCodeEmailAgain' | i18n}}
-                </a>
+                </button>
             </p>
         </div>
     </content>