From ef60112855237c7fc268abed1a15f067ff9128b4 Mon Sep 17 00:00:00 2001
From: Thomas Rittson <31796059+eliykat@users.noreply.github.com>
Date: Sat, 30 Apr 2022 09:16:46 +1000
Subject: [PATCH 1/2] [PS-74] Fix user authentication state checks (#1464)

* Use new authStatus method, clean up account switcher

* Update naming

* update jslib
---
 jslib                                         |  2 +-
 src/app/app.component.ts                      | 10 +++++++---
 .../layout/account-switcher.component.html    | 17 ++++++++---------
 src/app/layout/account-switcher.component.ts  | 19 +++++++------------
 src/locales/en/messages.json                  |  6 ++++++
 5 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/jslib b/jslib
index d7e55465..2e2849b4 160000
--- a/jslib
+++ b/jslib
@@ -1 +1 @@
-Subproject commit d7e554653a7e593f8cdaf7e2fe926eb04fb5d5c5
+Subproject commit 2e2849b4def0534f3f72b7a84c3183ab0b1589f2
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 8923eb45..b824b5fe 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -35,6 +35,7 @@ import { SyncService } from "jslib-common/abstractions/sync.service";
 import { SystemService } from "jslib-common/abstractions/system.service";
 import { TokenService } from "jslib-common/abstractions/token.service";
 import { VaultTimeoutService } from "jslib-common/abstractions/vaultTimeout.service";
+import { AuthenticationStatus } from "jslib-common/enums/authenticationStatus";
 import { CipherType } from "jslib-common/enums/cipherType";
 
 import { MenuUpdateRequest } from "../main/menu/menu.updater";
@@ -330,7 +331,9 @@ export class AppComponent implements OnInit {
             if (message.userId != null) {
               await this.stateService.setActiveUser(message.userId);
             }
-            const locked = await this.vaultTimeoutService.isLocked(message.userId);
+            const locked =
+              (await this.authService.getAuthStatus(message.userId)) ===
+              AuthenticationStatus.Locked;
             if (locked) {
               this.messagingService.send("locked", { userId: message.userId });
             } else {
@@ -436,7 +439,8 @@ export class AppComponent implements OnInit {
             isAuthenticated: await this.stateService.getIsAuthenticated({
               userId: userId,
             }),
-            isLocked: await this.vaultTimeoutService.isLocked(userId),
+            isLocked:
+              (await this.authService.getAuthStatus(userId)) === AuthenticationStatus.Locked,
             email: stateAccounts[i].profile.email,
             userId: stateAccounts[i].profile.userId,
           };
@@ -591,7 +595,7 @@ export class AppComponent implements OnInit {
       const keys = Object.keys(accounts);
       if (keys.length > 0) {
         for (const userId of keys) {
-          if (!(await this.vaultTimeoutService.isLocked(userId))) {
+          if ((await this.authService.getAuthStatus(userId)) === AuthenticationStatus.Unlocked) {
             return;
           }
         }
diff --git a/src/app/layout/account-switcher.component.html b/src/app/layout/account-switcher.component.html
index a01907f1..0d52b719 100644
--- a/src/app/layout/account-switcher.component.html
+++ b/src/app/layout/account-switcher.component.html
@@ -53,7 +53,6 @@
       <button
         *ngFor="let a of accounts | keyvalue"
         class="account"
-        [ngClass]="{ active: a.value.profile.authenticationStatus == 'active' }"
         (click)="switch(a.key)"
         appA11yTitle="{{ 'loggedInAsOn' | i18n: a.value.profile.email:a.value.serverUrl }}"
         attr.aria-label="{{ 'switchAccount' | i18n }}"
@@ -72,17 +71,17 @@
           <span class="server" aria-hidden="true" *ngIf="a.value.serverUrl != 'bitwarden.com'">{{
             a.value.serverUrl
           }}</span>
-          <span class="status" aria-hidden="true">{{ a.value.profile.authenticationStatus }}</span>
+          <span class="status" aria-hidden="true">{{
+            (a.value.profile.authenticationStatus === authStatus.Unlocked ? "unlocked" : "locked")
+              | i18n
+          }}</span>
         </div>
         <i
-          class="bwi bwi-unlock bwi-2x text-muted"
+          class="bwi bwi-2x text-muted"
+          [ngClass]="
+            a.value.profile.authenticationStatus == authStatus.Unlocked ? 'bwi-unlock' : 'bwi-lock'
+          "
           aria-hidden="true"
-          *ngIf="a.value.profile.authenticationStatus == 'unlocked'"
-        ></i>
-        <i
-          class="bwi bwi-lock bwi-2x text-muted"
-          aria-hidden="true"
-          *ngIf="a.value.profile.authenticationStatus == 'locked'"
         ></i>
       </button>
     </div>
diff --git a/src/app/layout/account-switcher.component.ts b/src/app/layout/account-switcher.component.ts
index 6fb6c140..1958bed7 100644
--- a/src/app/layout/account-switcher.component.ts
+++ b/src/app/layout/account-switcher.component.ts
@@ -2,9 +2,9 @@ import { animate, state, style, transition, trigger } from "@angular/animations"
 import { ConnectedPosition } from "@angular/cdk/overlay";
 import { Component, OnInit } from "@angular/core";
 
+import { AuthService } from "jslib-common/abstractions/auth.service";
 import { MessagingService } from "jslib-common/abstractions/messaging.service";
 import { StateService } from "jslib-common/abstractions/state.service";
-import { VaultTimeoutService } from "jslib-common/abstractions/vaultTimeout.service";
 import { AuthenticationStatus } from "jslib-common/enums/authenticationStatus";
 import { Utils } from "jslib-common/misc/utils";
 import { Account } from "jslib-common/models/domain/account";
@@ -53,6 +53,7 @@ export class AccountSwitcherComponent implements OnInit {
   accounts: { [userId: string]: SwitcherAccount } = {};
   activeAccountEmail: string;
   serverUrl: string;
+  authStatus = AuthenticationStatus;
   overlayPostition: ConnectedPosition[] = [
     {
       originX: "end",
@@ -78,22 +79,16 @@ export class AccountSwitcherComponent implements OnInit {
 
   constructor(
     private stateService: StateService,
-    private vaultTimeoutService: VaultTimeoutService,
+    private authService: AuthService,
     private messagingService: MessagingService
   ) {}
 
   async ngOnInit(): Promise<void> {
-    this.stateService.accounts.subscribe(async (accounts) => {
+    this.stateService.accounts.subscribe(async (accounts: { [userId: string]: Account }) => {
       for (const userId in accounts) {
-        if (userId === (await this.stateService.getUserId())) {
-          accounts[userId].profile.authenticationStatus = AuthenticationStatus.Active;
-        } else {
-          accounts[userId].profile.authenticationStatus = (await this.vaultTimeoutService.isLocked(
-            userId
-          ))
-            ? AuthenticationStatus.Locked
-            : AuthenticationStatus.Unlocked;
-        }
+        accounts[userId].profile.authenticationStatus = await this.authService.getAuthStatus(
+          userId
+        );
       }
 
       this.accounts = await this.createSwitcherAccounts(accounts);
diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json
index af873f0c..f465bcd0 100644
--- a/src/locales/en/messages.json
+++ b/src/locales/en/messages.json
@@ -1853,6 +1853,12 @@
       }
     }
   },
+  "locked": {
+    "message": "Locked"
+  },
+  "unlocked": {
+    "message": "Unlocked"
+  },
   "generator": {
     "message": "Generator"
   },

From 0396d682b1be44799ace65e8c3930749e45addbb Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Sat, 30 Apr 2022 15:09:41 +0100
Subject: [PATCH 2/2] Change links to buttons, expose `aria-pressed` for
 toggles, add `aria-expanded` to send view's "Options" (#1437)

* Change links to buttons, expose `aria-pressed` for toggles

- also make existing `<a routerLink...>` type controls keyboard focusable with the addition of `tabindex="0"`

* Correctly set aria-pressed

now that I have a working build environment, could verify correct way to set this with my limited Angular knowledge

* Change more links to buttons, initial style changes

* Fix layout of <button> elements with .box-content-row

* Update jslib submodule

* Add `aria-expanded` to the send view's "Show options" expand/collapse control

* Fix position of "Edit" pencil when hovering over folders

* Update jslib

* Change sends list links to buttons

* Add `aria-pressed` to vault and send list buttons

Programmatically denote which of the buttons is currently active/shown in the right-most panel

* Fix incorrect "Options" expand/collapse button in add-edit view

Currently, that buttons lacks an accName because the "Options" text is outside of it.

* Add `aria-pressed` to the send left-hand column filters

* Simplify base, list, and vault styles

Since links are now buttons, no need to double up selectors for both types of elements. No need to double-up theming in base, as this also causes incorrect "x" in toasts.

* Remove unnecessary `position:relative`

Fixes issue with cut-off focus outlines, has no other adverse effect

* Fix styling for last child of action buttons

Old approach of making right padding smaller results in unsightly, off-center icon (noticeable when focus outline is visible). This visually remains the same, but reduces right-hand margin instead.
---
 src/app/accounts/hint.component.html          |  2 +-
 src/app/accounts/lock.component.html          |  7 +-
 src/app/accounts/login.component.html         | 25 ++---
 src/app/accounts/register.component.html      | 16 ++--
 src/app/accounts/set-password.component.html  | 14 ++-
 .../two-factor-options.component.html         | 10 +-
 src/app/accounts/two-factor.component.html    | 15 ++-
 .../update-temp-password.component.html       | 16 ++--
 .../password-reprompt.component.html          |  7 +-
 src/app/components/set-pin.component.html     |  6 +-
 src/app/send/add-edit.component.html          | 17 ++--
 src/app/send/send.component.html              | 47 +++++++---
 .../add-edit-custom-fields.component.html     | 18 ++--
 src/app/vault/add-edit.component.html         | 75 +++++++--------
 src/app/vault/ciphers.component.html          |  7 +-
 src/app/vault/groupings.component.html        | 91 +++++++++++++++----
 .../password-generator-history.component.html |  7 +-
 src/app/vault/password-history.component.html |  7 +-
 .../vault/view-custom-fields.component.html   | 14 ++-
 src/app/vault/view.component.html             | 83 ++++++++---------
 src/scss/base.scss                            |  3 +
 src/scss/box.scss                             |  7 +-
 src/scss/list.scss                            | 19 ++--
 src/scss/vault.scss                           | 31 ++++---
 24 files changed, 303 insertions(+), 241 deletions(-)

diff --git a/src/app/accounts/hint.component.html b/src/app/accounts/hint.component.html
index 19ce6e77..55137081 100644
--- a/src/app/accounts/hint.component.html
+++ b/src/app/accounts/hint.component.html
@@ -25,7 +25,7 @@
         <b [hidden]="form.loading">{{ "submit" | i18n }}</b>
         <i class="bwi bwi-spinner bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
       </button>
-      <a routerLink="/login" class="btn block">{{ "cancel" | i18n }}</a>
+      <a role="button" tabindex="0" routerLink="/login" class="btn block">{{ "cancel" | i18n }}</a>
     </div>
   </div>
 </form>
diff --git a/src/app/accounts/lock.component.html b/src/app/accounts/lock.component.html
index e503282c..71ac7594 100644
--- a/src/app/accounts/lock.component.html
+++ b/src/app/accounts/lock.component.html
@@ -30,12 +30,11 @@
             />
           </div>
           <div class="action-buttons">
-            <a
+            <button
+              type="button"
               class="row-btn"
-              href="#"
               appStopClick
               appBlurClick
-              role="button"
               appA11yTitle="{{ 'toggleVisibility' | i18n }}"
               [attr.aria-pressed]="showPassword"
               (click)="togglePassword()"
@@ -45,7 +44,7 @@
                 aria-hidden="true"
                 [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
               ></i>
-            </a>
+            </button>
           </div>
         </div>
       </div>
diff --git a/src/app/accounts/login.component.html b/src/app/accounts/login.component.html
index d4495781..bf7830e1 100644
--- a/src/app/accounts/login.component.html
+++ b/src/app/accounts/login.component.html
@@ -1,7 +1,7 @@
 <div id="login-page">
   <div class="login-header">
-    <a
-      href="#"
+    <button
+      type="button"
       appStopClick
       (click)="settings()"
       class="environment-urls-settings-icon"
@@ -9,7 +9,7 @@
     >
       <i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
       {{ "settings" | i18n }}
-    </a>
+    </button>
   </div>
   <form
     id="login-page"
@@ -48,12 +48,11 @@
               />
             </div>
             <div class="action-buttons">
-              <a
+              <button
+                type="button"
                 class="row-btn"
-                href="#"
                 appStopClick
                 appBlurClick
-                role="button"
                 appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                 [attr.aria-pressed]="showPassword"
                 (click)="togglePassword()"
@@ -63,7 +62,7 @@
                   aria-hidden="true"
                   [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                 ></i>
-              </a>
+              </button>
             </div>
           </div>
         </div>
@@ -83,18 +82,22 @@
             >
             <i class="bwi bwi-spinner bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
           </button>
-          <a routerLink="/register" class="btn block">
+          <a role="button" tabindex="0" routerLink="/register" class="btn block">
             <i class="bwi bwi-pencil-square" aria-hidden="true"></i> {{ "createAccount" | i18n }}
           </a>
         </div>
         <div class="buttons-row">
-          <a (click)="launchSsoBrowser('desktop', 'bitwarden://sso-callback')" class="btn block">
+          <button
+            type="button"
+            (click)="launchSsoBrowser('desktop', 'bitwarden://sso-callback')"
+            class="btn block"
+          >
             <i class="bwi bwi-bank" aria-hidden="true"></i> {{ "enterpriseSingleSignOn" | i18n }}
-          </a>
+          </button>
         </div>
       </div>
       <div class="sub-options">
-        <a routerLink="/hint">{{ "getMasterPasswordHint" | i18n }}</a>
+        <a role="button" tabindex="0" routerLink="/hint">{{ "getMasterPasswordHint" | i18n }}</a>
       </div>
     </div>
   </form>
diff --git a/src/app/accounts/register.component.html b/src/app/accounts/register.component.html
index c0c3ce14..4136f5cf 100644
--- a/src/app/accounts/register.component.html
+++ b/src/app/accounts/register.component.html
@@ -40,12 +40,11 @@
               />
             </div>
             <div class="action-buttons">
-              <a
+              <button
+                type="button"
                 class="row-btn"
-                href="#"
                 appStopClick
                 appBlurClick
-                role="button"
                 appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                 [attr.aria-pressed]="showPassword"
                 (click)="togglePassword(false)"
@@ -55,7 +54,7 @@
                   aria-hidden="true"
                   [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                 ></i>
-              </a>
+              </button>
             </div>
           </div>
           <div class="progress">
@@ -91,12 +90,11 @@
             />
           </div>
           <div class="action-buttons">
-            <a
+            <button
+              type="button"
               class="row-btn"
-              href="#"
               appStopClick
               appBlurClick
-              role="button"
               appA11yTitle="{{ 'toggleVisibility' | i18n }}"
               [attr.aria-pressed]="showPassword"
               (click)="togglePassword(true)"
@@ -106,7 +104,7 @@
                 aria-hidden="true"
                 [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
               ></i>
-            </a>
+            </button>
           </div>
         </div>
         <div class="box-content-row" appBoxRow>
@@ -146,7 +144,7 @@
         <b [hidden]="form.loading">{{ "submit" | i18n }}</b>
         <i class="bwi bwi-spinner bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
       </button>
-      <a routerLink="/login" class="btn block">{{ "cancel" | i18n }}</a>
+      <a role="button" tabindex="0" routerLink="/login" class="btn block">{{ "cancel" | i18n }}</a>
     </div>
   </div>
 </form>
diff --git a/src/app/accounts/set-password.component.html b/src/app/accounts/set-password.component.html
index d7afcda8..61e99105 100644
--- a/src/app/accounts/set-password.component.html
+++ b/src/app/accounts/set-password.component.html
@@ -56,12 +56,11 @@
                   />
                 </div>
                 <div class="action-buttons">
-                  <a
+                  <button
+                    type="button"
                     class="row-btn"
-                    href="#"
                     appStopClick
                     appBlurClick
-                    role="button"
                     appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                     [attr.aria-pressed]="showPassword"
                     (click)="togglePassword(false)"
@@ -71,7 +70,7 @@
                       aria-hidden="true"
                       [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                     ></i>
-                  </a>
+                  </button>
                 </div>
               </div>
               <div class="progress">
@@ -109,12 +108,11 @@
                   />
                 </div>
                 <div class="action-buttons">
-                  <a
+                  <button
+                    type="button"
                     class="row-btn"
-                    href="#"
                     appStopClick
                     appBlurClick
-                    role="button"
                     appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                     [attr.aria-pressed]="showPassword"
                     (click)="togglePassword(true)"
@@ -124,7 +122,7 @@
                       aria-hidden="true"
                       [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                     ></i>
-                  </a>
+                  </button>
                 </div>
               </div>
             </div>
diff --git a/src/app/accounts/two-factor-options.component.html b/src/app/accounts/two-factor-options.component.html
index 8dd875e9..778d2636 100644
--- a/src/app/accounts/two-factor-options.component.html
+++ b/src/app/accounts/two-factor-options.component.html
@@ -7,8 +7,8 @@
             {{ "twoStepOptions" | i18n }}
           </div>
           <div class="box-content">
-            <a
-              href="#"
+            <button
+              type="button"
               appStopClick
               *ngFor="let p of providers"
               class="box-content-row"
@@ -17,11 +17,11 @@
               <img [src]="'images/two-factor/' + p.type + '.png'" alt="" class="img-right" />
               <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>
       </div>
diff --git a/src/app/accounts/two-factor.component.html b/src/app/accounts/two-factor.component.html
index aab55ab2..e2abd0f8 100644
--- a/src/app/accounts/two-factor.component.html
+++ b/src/app/accounts/two-factor.component.html
@@ -124,22 +124,21 @@
         >
         <i class="bwi bwi-spinner bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
       </button>
-      <a routerLink="/login" class="btn block">{{ "cancel" | i18n }}</a>
+      <a role="button" tabindex="0" routerLink="/login" class="btn block">{{ "cancel" | i18n }}</a>
     </div>
     <div class="sub-options">
-      <a href="#" appStopClick (click)="anotherMethod()" role="button">{{
-        "useAnotherTwoStepMethod" | i18n
-      }}</a>
-      <a
-        href="#"
+      <button type="button" appStopClick (click)="anotherMethod()">
+        {{ "useAnotherTwoStepMethod" | i18n }}
+      </button>
+      <button
+        type="button"
         appStopClick
         (click)="sendEmail(true)"
         [appApiAction]="emailPromise"
-        role="button"
         *ngIf="selectedProviderType === providerType.Email"
       >
         {{ "sendVerificationCodeEmailAgain" | i18n }}
-      </a>
+      </button>
     </div>
   </div>
 </form>
diff --git a/src/app/accounts/update-temp-password.component.html b/src/app/accounts/update-temp-password.component.html
index 26ee4672..084c3217 100644
--- a/src/app/accounts/update-temp-password.component.html
+++ b/src/app/accounts/update-temp-password.component.html
@@ -36,12 +36,11 @@
               />
             </div>
             <div class="action-buttons">
-              <a
+              <button
+                type="button"
                 class="row-btn"
-                href="#"
                 appStopClick
                 appBlurClick
-                role="button"
                 appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                 [attr.aria-pressed]="showPassword"
                 (click)="togglePassword(false)"
@@ -51,7 +50,7 @@
                   aria-hidden="true"
                   [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                 ></i>
-              </a>
+              </button>
             </div>
           </div>
           <div class="progress">
@@ -84,12 +83,11 @@
             />
           </div>
           <div class="action-buttons">
-            <a
+            <button
+              type="button"
               class="row-btn"
-              href="#"
               appStopClick
               appBlurClick
-              role="button"
               appA11yTitle="{{ 'toggleVisibility' | i18n }}"
               [attr.aria-pressed]="showPassword"
               (click)="togglePassword(true)"
@@ -99,7 +97,7 @@
                 aria-hidden="true"
                 [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
               ></i>
-            </a>
+            </button>
           </div>
         </div>
       </div>
@@ -120,7 +118,7 @@
         <b [hidden]="form.loading">{{ "submit" | i18n }}</b>
         <i class="bwi bwi-spinner bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
       </button>
-      <a (click)="logOut()" class="btn block">{{ "logOut" | i18n }}</a>
+      <button type="button" (click)="logOut()" class="btn block">{{ "logOut" | i18n }}</button>
     </div>
   </div>
 </form>
diff --git a/src/app/components/password-reprompt.component.html b/src/app/components/password-reprompt.component.html
index f2805761..078e983b 100644
--- a/src/app/components/password-reprompt.component.html
+++ b/src/app/components/password-reprompt.component.html
@@ -19,12 +19,11 @@
                 />
               </div>
               <div class="action-buttons">
-                <a
+                <button
+                  type="button"
                   class="row-btn"
-                  href="#"
                   appStopClick
                   appBlurClick
-                  role="button"
                   appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                   [attr.aria-pressed]="showPassword"
                   (click)="togglePassword()"
@@ -34,7 +33,7 @@
                     aria-hidden="true"
                     [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                   ></i>
-                </a>
+                </button>
               </div>
             </div>
           </div>
diff --git a/src/app/components/set-pin.component.html b/src/app/components/set-pin.component.html
index 538eb0a2..78552942 100644
--- a/src/app/components/set-pin.component.html
+++ b/src/app/components/set-pin.component.html
@@ -22,9 +22,9 @@
                 />
               </div>
               <div class="action-buttons">
-                <a
+                <button
+                  type="button"
                   class="row-btn"
-                  href="#"
                   appStopClick
                   appBlurClick
                   appA11yTitle="{{ 'toggleVisibility' | i18n }}"
@@ -36,7 +36,7 @@
                     aria-hidden="true"
                     [ngClass]="{ 'bwi-eye': !showPin, 'bwi-eye-slash': showPin }"
                   ></i>
-                </a>
+                </button>
               </div>
             </div>
           </div>
diff --git a/src/app/send/add-edit.component.html b/src/app/send/add-edit.component.html
index 7a43aacb..a91bfb6c 100644
--- a/src/app/send/add-edit.component.html
+++ b/src/app/send/add-edit.component.html
@@ -93,21 +93,21 @@
       </div>
       <div class="box">
         <div class="box-header">
-          {{ "options" | i18n }}
-          <a
+          <button
+            type="button"
             class="toggle"
-            href="#"
             appStopClick
             appBlurClick
-            role="button"
             (click)="toggleOptions()"
+            [attr.aria-expanded]="showOptions"
           >
+            {{ "options" | i18n }}
             <i
               class="bwi bwi-lg"
               aria-hidden="true"
               [ngClass]="{ 'bwi-angle-down': !showOptions, 'bwi-chevron-up': showOptions }"
             ></i>
-          </a>
+          </button>
         </div>
       </div>
       <div [hidden]="!showOptions">
@@ -157,12 +157,11 @@
                 />
               </div>
               <div class="action-buttons">
-                <a
+                <button
+                  type="button"
                   class="row-btn"
-                  href="#"
                   appStopClick
                   appBlurClick
-                  role="button"
                   appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                   [attr.aria-pressed]="showPassword"
                   (click)="togglePasswordVisible()"
@@ -173,7 +172,7 @@
                     aria-hidden="true"
                     [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                   ></i>
-                </a>
+                </button>
               </div>
             </div>
           </div>
diff --git a/src/app/send/send.component.html b/src/app/send/send.component.html
index fc52a836..853debb5 100644
--- a/src/app/send/send.component.html
+++ b/src/app/send/send.component.html
@@ -5,26 +5,44 @@
         <h2 class="sr-only">{{ "filters" | i18n }}</h2>
         <ul>
           <li [ngClass]="{ active: selectedAll }">
-            <a href="#" appStopClick appBlurClick (click)="selectAll()">
+            <button
+              type="button"
+              appStopClick
+              appBlurClick
+              (click)="selectAll()"
+              [attr.aria-pressed]="selectedAll"
+            >
               <i class="bwi bwi-fw bwi-filter" aria-hidden="true"></i>&nbsp;{{ "allSends" | i18n }}
-            </a>
+            </button>
           </li>
         </ul>
         <h2>{{ "types" | i18n }}</h2>
         <ul>
           <li [ngClass]="{ active: selectedType === sendType.Text }">
-            <a href="#" appStopClick appBlurClick (click)="selectType(sendType.Text)">
+            <button
+              type="button"
+              appStopClick
+              appBlurClick
+              (click)="selectType(sendType.Text)"
+              [attr.aria-pressed]="selectedType === sendType.Text"
+            >
               <i class="bwi bwi-fw bwi-file-text" aria-hidden="true"></i>&nbsp;{{
                 "sendTypeText" | i18n
               }}
-            </a>
+            </button>
           </li>
           <li [ngClass]="{ active: selectedType === sendType.File }">
-            <a href="#" appStopClick appBlurClick (click)="selectType(sendType.File)">
+            <button
+              type="button"
+              appStopClick
+              appBlurClick
+              (click)="selectType(sendType.File)"
+              [attr.aria-pressed]="selectedType === sendType.File"
+            >
               <i class="bwi bwi-fw bwi-file" aria-hidden="true"></i>&nbsp;{{
                 "sendTypeFile" | i18n
               }}
-            </a>
+            </button>
           </li>
         </ul>
       </div>
@@ -36,20 +54,21 @@
   <div id="items" class="items">
     <div class="content">
       <div class="list" *ngIf="filteredSends.length">
-        <a
+        <button
           *ngFor="let s of filteredSends"
           appStopClick
           (click)="selectSend(s.id)"
           title="{{ 'viewItem' | i18n }}"
           (contextmenu)="viewSendMenu(s)"
           [ngClass]="{ active: s.id === sendId }"
+          [attr.aria-pressed]="s.id === sendId"
           class="flex-list-item"
         >
-          <div class="item-icon" aria-hidden="true">
+          <span class="item-icon" aria-hidden="true">
             <i class="bwi bwi-fw bwi-lg" [ngClass]="s.type == 0 ? 'bwi-file-text' : 'bwi-file'"></i>
-          </div>
-          <div class="item-content">
-            <div class="item-title">
+          </span>
+          <span class="item-content">
+            <span class="item-title">
               {{ s.name }}
               <span class="title-badges">
                 <ng-container *ngIf="s.disabled">
@@ -98,10 +117,10 @@
                   <span class="sr-only">{{ "pendingDeletion" | i18n }}</span>
                 </ng-container>
               </span>
-            </div>
+            </span>
             <span class="item-details">{{ s.deletionDate | date }}</span>
-          </div>
-        </a>
+          </span>
+        </button>
       </div>
       <div class="no-items" *ngIf="!filteredSends.length">
         <i class="bwi bwi-spinner bwi-spin bwi-3x" *ngIf="!loaded" aria-hidden="true"></i>
diff --git a/src/app/vault/add-edit-custom-fields.component.html b/src/app/vault/add-edit-custom-fields.component.html
index 9f5fc24a..0e5a8f6e 100644
--- a/src/app/vault/add-edit-custom-fields.component.html
+++ b/src/app/vault/add-edit-custom-fields.component.html
@@ -10,15 +10,14 @@
         *ngFor="let f of cipher.fields; let i = index; trackBy: trackByFunction"
         [ngClass]="{ 'box-content-row-checkbox': f.type === fieldType.Boolean }"
       >
-        <a
-          href="#"
+        <button
+          type="button"
           appStopClick
           (click)="removeField(f)"
           appA11yTitle="{{ 'remove' | i18n }}"
-          role="button"
         >
           <i class="bwi bwi-minus-circle bwi-lg" aria-hidden="true"></i>
-        </a>
+        </button>
         <label for="fieldName{{ i }}" class="sr-only">{{ "name" | i18n }}</label>
         <label for="fieldValue{{ i }}" class="sr-only">{{ "value" | i18n }}</label>
         <div class="row-main">
@@ -78,12 +77,11 @@
           class="action-buttons"
           *ngIf="f.type === fieldType.Hidden && (cipher.viewPassword || f.newField)"
         >
-          <a
+          <button
+            type="button"
             class="row-btn"
-            href="#"
             appStopClick
             appBlurClick
-            role="button"
             appA11yTitle="{{ 'toggleVisibility' | i18n }}"
             [attr.aria-pressed]="f.showValue"
             (click)="toggleFieldValue(f)"
@@ -93,7 +91,7 @@
               aria-hidden="true"
               [ngClass]="{ 'bwi-eye': !f.showValue, 'bwi-eye-slash': f.showValue }"
             ></i>
-          </a>
+          </button>
         </div>
         <div class="drag-handle" appA11yTitle="{{ 'dragToSort' | i18n }}" cdkDragHandle>
           <i class="bwi bwi-hamburger" aria-hidden="true"></i>
@@ -102,10 +100,10 @@
     </div>
     <!-- Add new custom field -->
     <div class="box-content-row" appBoxRow>
-      <a href="#" appStopClick (click)="addField()" role="button">
+      <button type="button" appStopClick (click)="addField()">
         <i class="bwi bwi-plus-circle bwi-fw bwi-lg" aria-hidden="true"></i>
         {{ "newCustomField" | i18n }}
-      </a>
+      </button>
       <label for="addFieldType" class="sr-only">{{ "type" | i18n }}</label>
       <select id="addFieldType" name="AddFieldType" [(ngModel)]="addFieldType" class="field-type">
         <option *ngFor="let o of addFieldTypeOptions" [ngValue]="o.value">{{ o.name }}</option>
diff --git a/src/app/vault/add-edit.component.html b/src/app/vault/add-edit.component.html
index 8f781a0b..d694e810 100644
--- a/src/app/vault/add-edit.component.html
+++ b/src/app/vault/add-edit.component.html
@@ -87,12 +87,11 @@
                     aria-hidden="true"
                   ></i>
                 </button>
-                <a
+                <button
+                  type="button"
                   class="row-btn"
-                  href="#"
                   appStopClick
                   appBlurClick
-                  role="button"
                   appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                   [attr.aria-pressed]="showPassword"
                   (click)="togglePassword()"
@@ -102,18 +101,17 @@
                     aria-hidden="true"
                     [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                   ></i>
-                </a>
-                <a
+                </button>
+                <button
+                  type="button"
                   class="row-btn"
-                  href="#"
                   appStopClick
                   appBlurClick
-                  role="button"
                   appA11yTitle="{{ 'generatePassword' | i18n }}"
                   (click)="generatePassword()"
                 >
                   <i class="bwi bwi-lg bwi-generate" aria-hidden="true"></i>
-                </a>
+                </button>
               </div>
             </div>
             <div class="box-content-row" appBoxRow>
@@ -153,12 +151,11 @@
                 />
               </div>
               <div class="action-buttons">
-                <a
+                <button
+                  type="button"
                   class="row-btn"
-                  href="#"
                   appStopClick
                   appBlurClick
-                  role="button"
                   appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                   [attr.aria-pressed]="showCardNumber"
                   (click)="toggleCardNumber()"
@@ -168,7 +165,7 @@
                     aria-hidden="true"
                     [ngClass]="{ 'bwi-eye': !showCardNumber, 'bwi-eye-slash': showCardNumber }"
                   ></i>
-                </a>
+                </button>
               </div>
             </div>
             <div class="box-content-row" appBoxRow>
@@ -208,12 +205,11 @@
                 />
               </div>
               <div class="action-buttons">
-                <a
+                <button
+                  type="button"
                   class="row-btn"
-                  href="#"
                   appStopClick
                   appBlurClick
-                  role="button"
                   appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                   [attr.aria-pressed]="showCardCode"
                   (click)="toggleCardCode()"
@@ -223,7 +219,7 @@
                     aria-hidden="true"
                     [ngClass]="{ 'bwi-eye': !showCardCode, 'bwi-eye-slash': showCardCode }"
                   ></i>
-                </a>
+                </button>
               </div>
             </div>
           </div>
@@ -406,9 +402,14 @@
               appBoxRow
               *ngFor="let u of cipher.login.uris; let i = index; trackBy: trackByFunction"
             >
-              <a href="#" appStopClick (click)="removeUri(u)" appA11yTitle="{{ 'remove' | i18n }}">
-                <i class="bwi bwi-minus-circle bwi-lg" aria-hidden="true" role="button"></i>
-              </a>
+              <button
+                type="button"
+                appStopClick
+                (click)="removeUri(u)"
+                appA11yTitle="{{ 'remove' | i18n }}"
+              >
+                <i class="bwi bwi-minus-circle bwi-lg" aria-hidden="true"></i>
+              </button>
               <div class="row-main">
                 <label for="loginUri{{ i }}">{{ "uriPosition" | i18n: i + 1 }}</label>
                 <input
@@ -435,31 +436,29 @@
                 </select>
               </div>
               <div class="action-buttons">
-                <a
+                <button
+                  type="button"
                   class="row-btn"
-                  href="#"
                   appStopClick
                   appBlurClick
-                  role="button"
                   appA11yTitle="{{ 'toggleOptions' | i18n }}"
                   (click)="toggleUriOptions(u)"
                 >
                   <i class="bwi bwi-lg bwi-cog" aria-hidden="true"></i>
-                </a>
+                </button>
               </div>
             </div>
           </ng-container>
-          <a
-            href="#"
+          <button
+            type="button"
             appStopClick
             appBlurClick
             (click)="addUri()"
             class="box-content-row"
-            role="button"
           >
             <i class="bwi bwi-plus-circle bwi-fw bwi-lg" aria-hidden="true"></i>
             {{ "newUri" | i18n }}
-          </a>
+          </button>
         </div>
       </div>
       <div class="box">
@@ -477,9 +476,13 @@
           <div class="box-content-row box-content-row-checkbox" appBoxRow *ngIf="canUseReprompt">
             <label for="passwordPrompt"
               >{{ "passwordPrompt" | i18n }}
-              <a href="#" appA11yTitle="{{ 'learnMore' | i18n }}" (click)="openHelpReprompt()">
+              <button
+                type="button"
+                appA11yTitle="{{ 'learnMore' | i18n }}"
+                (click)="openHelpReprompt()"
+              >
                 <i class="bwi bwi-question-circle" aria-hidden="true"></i>
-              </a>
+              </button>
             </label>
             <input
               id="passwordPrompt"
@@ -489,30 +492,28 @@
               (change)="repromptChanged()"
             />
           </div>
-          <a
+          <button
+            type="button"
             class="box-content-row box-content-row-flex text-default"
-            href="#"
             appStopClick
             appBlurClick
             (click)="attachments()"
             *ngIf="editMode && !cloneMode"
-            role="button"
           >
             <div class="row-main">{{ "attachments" | i18n }}</div>
             <i class="bwi bwi-angle-right row-sub-icon" aria-hidden="true"></i>
-          </a>
-          <a
+          </button>
+          <button
+            type="button"
             class="box-content-row box-content-row-flex text-default"
-            href="#"
             appStopClick
             appBlurClick
             (click)="editCollections()"
             *ngIf="editMode && !cloneMode && cipher.organizationId"
-            role="button"
           >
             <div class="row-main">{{ "collections" | i18n }}</div>
             <i class="bwi bwi-angle-right row-sub-icon" aria-hidden="true"></i>
-          </a>
+          </button>
         </div>
       </div>
       <div class="box">
diff --git a/src/app/vault/ciphers.component.html b/src/app/vault/ciphers.component.html
index 1dbbb89c..90a70360 100644
--- a/src/app/vault/ciphers.component.html
+++ b/src/app/vault/ciphers.component.html
@@ -6,14 +6,15 @@
     *ngIf="ciphers.length"
   >
     <div class="list">
-      <a
+      <button
+        type="button"
         *cdkVirtualFor="let c of ciphers; trackBy: trackByFn"
         appStopClick
         (click)="selectCipher(c)"
         (contextmenu)="rightClickCipher(c)"
-        href="#"
         title="{{ 'viewItem' | i18n }}"
         [ngClass]="{ active: c.id === activeCipherId }"
+        [attr.aria-pressed]="c.id === activeCipherId"
         class="flex-list-item virtual-scroll-item"
       >
         <app-vault-icon [cipher]="c"></app-vault-icon>
@@ -39,7 +40,7 @@
           </span>
           <span *ngIf="c.subTitle" class="detail">{{ c.subTitle }}</span>
         </div>
-      </a>
+      </button>
     </div>
   </cdk-virtual-scroll-viewport>
   <div class="no-items" *ngIf="!ciphers.length">
diff --git a/src/app/vault/groupings.component.html b/src/app/vault/groupings.component.html
index 276c7f57..148c21d1 100644
--- a/src/app/vault/groupings.component.html
+++ b/src/app/vault/groupings.component.html
@@ -3,44 +3,86 @@
     <h2 class="sr-only">{{ "filters" | i18n }}</h2>
     <ul>
       <li [ngClass]="{ active: selectedAll }">
-        <a href="#" appStopClick appBlurClick (click)="selectAll()">
+        <button
+          type="button"
+          [attr.aria-pressed]="selectedAll"
+          appStopClick
+          appBlurClick
+          (click)="selectAll()"
+        >
           <i class="bwi bwi-fw bwi-filter" aria-hidden="true"></i>&nbsp;{{ "allItems" | i18n }}
-        </a>
+        </button>
       </li>
       <li [ngClass]="{ active: selectedFavorites }">
-        <a href="#" appStopClick appBlurClick (click)="selectFavorites()">
+        <button
+          type="button"
+          [attr.aria-pressed]="selectedFavorites"
+          appStopClick
+          appBlurClick
+          (click)="selectFavorites()"
+        >
           <i class="bwi bwi-fw bwi-star" aria-hidden="true"></i>&nbsp;{{ "favorites" | i18n }}
-        </a>
+        </button>
       </li>
       <li [ngClass]="{ active: selectedTrash }">
-        <a href="#" appStopClick appBlurClick (click)="selectTrash()">
+        <button
+          type="button"
+          [attr.aria-pressed]="selectedTrash"
+          appStopClick
+          appBlurClick
+          (click)="selectTrash()"
+        >
           <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>&nbsp;{{ "trash" | i18n }}
-        </a>
+        </button>
       </li>
     </ul>
     <h2>{{ "types" | i18n }}</h2>
     <ul>
       <li [ngClass]="{ active: selectedType === cipherType.Login }">
-        <a href="#" appStopClick appBlurClick (click)="selectType(cipherType.Login)">
+        <button
+          type="button"
+          [attr.aria-pressed]="selectedType === cipherType.Login"
+          appStopClick
+          appBlurClick
+          (click)="selectType(cipherType.Login)"
+        >
           <i class="bwi bwi-fw bwi-globe" aria-hidden="true"></i>&nbsp;{{ "typeLogin" | i18n }}
-        </a>
+        </button>
       </li>
       <li [ngClass]="{ active: selectedType === cipherType.Card }">
-        <a href="#" appStopClick appBlurClick (click)="selectType(cipherType.Card)">
+        <button
+          type="button"
+          [attr.aria-pressed]="selectedType === cipherType.Card"
+          appStopClick
+          appBlurClick
+          (click)="selectType(cipherType.Card)"
+        >
           <i class="bwi bwi-fw bwi-credit-card" aria-hidden="true"></i>&nbsp;{{ "typeCard" | i18n }}
-        </a>
+        </button>
       </li>
       <li [ngClass]="{ active: selectedType === cipherType.Identity }">
-        <a href="#" appStopClick appBlurClick (click)="selectType(cipherType.Identity)">
+        <button
+          type="button"
+          [attr.aria-pressed]="selectedType === cipherType.Identity"
+          appStopClick
+          appBlurClick
+          (click)="selectType(cipherType.Identity)"
+        >
           <i class="bwi bwi-fw bwi-id-card" aria-hidden="true"></i>&nbsp;{{ "typeIdentity" | i18n }}
-        </a>
+        </button>
       </li>
       <li [ngClass]="{ active: selectedType === cipherType.SecureNote }">
-        <a href="#" appStopClick appBlurClick (click)="selectType(cipherType.SecureNote)">
+        <button
+          type="button"
+          [attr.aria-pressed]="selectedType === cipherType.SecureNote"
+          appStopClick
+          appBlurClick
+          (click)="selectType(cipherType.SecureNote)"
+        >
           <i class="bwi bwi-fw bwi-sticky-note" aria-hidden="true"></i>&nbsp;{{
             "typeSecureNote" | i18n
           }}
-        </a>
+        </button>
       </li>
     </ul>
     <p *ngIf="!loaded" class="text-muted">{{ "loading" | i18n }}</p>
@@ -57,7 +99,13 @@
             *ngFor="let f of folders"
             [ngClass]="{ active: selectedFolder && f.node.id === selectedFolderId }"
           >
-            <a href="#" appStopClick appBlurClick (click)="selectFolder(f.node)">
+            <button
+              type="button"
+              [attr.aria-pressed]="selectedFolder && f.node.id === selectedFolderId"
+              appStopClick
+              appBlurClick
+              (click)="selectFolder(f.node)"
+            >
               <i
                 *ngIf="f.children.length"
                 class="bwi bwi-fw"
@@ -86,7 +134,7 @@
               >
                 <i class="bwi bwi-pencil bwi-fw" aria-hidden="true"></i>
               </span>
-            </a>
+            </button>
             <ul class="bwi-ul" *ngIf="f.children.length && !isCollapsed(f.node)">
               <ng-container
                 *ngTemplateOutlet="recursiveFolders; context: { $implicit: f.children }"
@@ -107,7 +155,14 @@
               *ngFor="let c of collections"
               [ngClass]="{ active: c.node.id === selectedCollectionId }"
             >
-              <a href="#" appStopClick appBlurClick (click)="selectCollection(c.node)">
+              <button
+                *ngIf="c.children.length == 0"
+                type="button"
+                [attr.aria-pressed]="c.node.id === selectedCollectionId"
+                appStopClick
+                appBlurClick
+                (click)="selectCollection(c.node)"
+              >
                 <i
                   *ngIf="c.children.length"
                   class="bwi bwi-fw"
@@ -126,7 +181,7 @@
                   aria-hidden="true"
                 ></i>
                 &nbsp;{{ c.node.name }}
-              </a>
+              </button>
               <ul class="bwi-ul" *ngIf="c.children.length && !isCollapsed(c.node)">
                 <ng-container
                   *ngTemplateOutlet="recursiveCollections; context: { $implicit: c.children }"
diff --git a/src/app/vault/password-generator-history.component.html b/src/app/vault/password-generator-history.component.html
index 2001ca7f..b23dd18e 100644
--- a/src/app/vault/password-generator-history.component.html
+++ b/src/app/vault/password-generator-history.component.html
@@ -17,16 +17,15 @@
                 <span class="detail">{{ h.date | date: "medium" }}</span>
               </div>
               <div class="action-buttons">
-                <a
+                <button
+                  type="button"
                   class="row-btn"
-                  href="#"
                   appStopClick
                   appA11yTitle="{{ 'copyPassword' | i18n }}"
                   (click)="copy(h.password)"
-                  role="button"
                 >
                   <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
-                </a>
+                </button>
               </div>
             </div>
             <div class="box-content-row" *ngIf="!history.length">
diff --git a/src/app/vault/password-history.component.html b/src/app/vault/password-history.component.html
index 8ce5b059..633cee14 100644
--- a/src/app/vault/password-history.component.html
+++ b/src/app/vault/password-history.component.html
@@ -15,16 +15,15 @@
                 <span class="detail">{{ h.lastUsedDate | date: "medium" }}</span>
               </div>
               <div class="action-buttons">
-                <a
+                <button
+                  type="button"
                   class="row-btn"
-                  href="#"
                   appStopClick
                   appA11yTitle="{{ 'copyPassword' | i18n }}"
                   (click)="copy(h.password)"
-                  role="button"
                 >
                   <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
-                </a>
+                </button>
               </div>
             </div>
             <div class="box-content-row" *ngIf="!history.length">
diff --git a/src/app/vault/view-custom-fields.component.html b/src/app/vault/view-custom-fields.component.html
index a180885f..d1980048 100644
--- a/src/app/vault/view-custom-fields.component.html
+++ b/src/app/vault/view-custom-fields.component.html
@@ -35,24 +35,23 @@
         </div>
       </div>
       <div class="action-buttons">
-        <a
+        <button
+          type="button"
           class="row-btn"
-          href="#"
           appStopClick
           appA11yTitle="{{ 'toggleVisibility' | i18n }}"
           *ngIf="field.type === fieldType.Hidden && cipher.viewPassword"
           (click)="toggleFieldValue(field)"
-          role="button"
         >
           <i
             class="bwi bwi-lg"
             aria-hidden="true"
             [ngClass]="{ 'bwi-eye': !field.showValue, 'bwi-eye-slash': field.showValue }"
           ></i>
-        </a>
-        <a
+        </button>
+        <button
+          type="button"
           class="row-btn"
-          href="#"
           appStopClick
           appA11yTitle="{{ 'copyValue' | i18n }}"
           *ngIf="
@@ -64,10 +63,9 @@
           (click)="
             copy(field.value, 'value', field.type === fieldType.Hidden ? 'H_Field' : 'Field')
           "
-          role="button"
         >
           <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
-        </a>
+        </button>
       </div>
     </div>
   </div>
diff --git a/src/app/vault/view.component.html b/src/app/vault/view.component.html
index 3a2b12ef..df7d590b 100644
--- a/src/app/vault/view.component.html
+++ b/src/app/vault/view.component.html
@@ -22,16 +22,15 @@
               {{ cipher.login.username }}
             </div>
             <div class="action-buttons">
-              <a
+              <button
+                type="button"
                 class="row-btn"
-                href="#"
                 appStopClick
                 appA11yTitle="{{ 'copyUsername' | i18n }}"
                 (click)="copy(cipher.login.username, 'username', 'Username')"
-                role="button"
               >
                 <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
-              </a>
+              </button>
             </div>
           </div>
           <div class="box-content-row box-content-row-flex" *ngIf="cipher.login.password">
@@ -74,31 +73,29 @@
                   aria-hidden="true"
                 ></i>
               </button>
-              <a
+              <button
+                type="button"
                 class="row-btn"
-                href="#"
                 appStopClick
                 appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                 [attr.aria-pressed]="showPassword"
                 (click)="togglePassword()"
-                role="button"
               >
                 <i
                   class="bwi bwi-lg"
                   aria-hidden="true"
                   [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                 ></i>
-              </a>
-              <a
+              </button>
+              <button
+                type="button"
                 class="row-btn"
-                href="#"
                 appStopClick
                 appA11yTitle="{{ 'copyPassword' | i18n }}"
                 (click)="copy(cipher.login.password, 'password', 'Password')"
-                role="button"
               >
                 <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
-              </a>
+              </button>
             </div>
           </div>
           <div
@@ -131,16 +128,15 @@
               </svg>
             </span>
             <div class="action-buttons">
-              <a
+              <button
+                type="button"
                 class="row-btn"
-                href="#"
                 appStopClick
                 appA11yTitle="{{ 'copyValue' | i18n }}"
                 (click)="copy(totpCode, 'verificationCodeTotp', 'TOTP')"
-                role="button"
               >
                 <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
-              </a>
+              </button>
             </div>
           </div>
         </div>
@@ -157,31 +153,29 @@
               <span *ngIf="showCardNumber" class="monospaced">{{ cipher.card.number }}</span>
             </div>
             <div class="action-buttons">
-              <a
+              <button
+                type="button"
                 class="row-btn"
-                href="#"
                 appStopClick
                 appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                 [attr.aria-pressed]="showCardNumber"
                 (click)="toggleCardNumber()"
-                role="button"
               >
                 <i
                   class="bwi bwi-lg"
                   aria-hidden="true"
                   [ngClass]="{ 'bwi-eye': !showCardNumber, 'bwi-eye-slash': showCardNumber }"
                 ></i>
-              </a>
-              <a
+              </button>
+              <button
+                type="button"
                 class="row-btn"
-                href="#"
                 appStopClick
                 appA11yTitle="{{ 'copyNumber' | i18n }}"
                 (click)="copy(cipher.card.number, 'number', 'Card Number')"
-                role="button"
               >
                 <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
-              </a>
+              </button>
             </div>
           </div>
           <div class="box-content-row" *ngIf="cipher.card.brand">
@@ -199,31 +193,29 @@
               <span *ngIf="showCardCode" class="monospaced">{{ cipher.card.code }}</span>
             </div>
             <div class="action-buttons">
-              <a
+              <button
+                type="button"
                 class="row-btn"
-                href="#"
                 appStopClick
                 appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                 [attr.aria-pressed]="showCardCode"
                 (click)="toggleCardCode()"
-                role="button"
               >
                 <i
                   class="bwi bwi-lg"
                   aria-hidden="true"
                   [ngClass]="{ 'bwi-eye': !showCardCode, 'bwi-eye-slash': showCardCode }"
                 ></i>
-              </a>
-              <a
+              </button>
+              <button
+                type="button"
                 class="row-btn"
-                href="#"
                 appStopClick
                 appA11yTitle="{{ 'copySecurityCode' | i18n }}"
                 (click)="copy(cipher.card.code, 'securityCode', 'Security Code')"
-                role="button"
               >
                 <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
-              </a>
+              </button>
             </div>
           </div>
         </div>
@@ -289,27 +281,25 @@
             <span title="{{ u.uri }}">{{ u.hostOrUri }}</span>
           </div>
           <div class="action-buttons">
-            <a
+            <button
+              type="button"
               class="row-btn"
-              href="#"
               appStopClick
               appA11yTitle="{{ 'launch' | i18n }}"
               *ngIf="u.canLaunch"
               (click)="launch(u)"
-              role="button"
             >
               <i class="bwi bwi-lg bwi-share-square" aria-hidden="true"></i>
-            </a>
-            <a
+            </button>
+            <button
+              type="button"
               class="row-btn"
-              href="#"
               appStopClick
               appA11yTitle="{{ 'copyUri' | i18n }}"
               (click)="copy(u.uri, u.isWebsite ? 'website' : 'uri', 'URI')"
-              role="button"
             >
               <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
-            </a>
+            </button>
           </div>
         </div>
       </div>
@@ -334,10 +324,10 @@
         {{ "attachments" | i18n }}
       </div>
       <div class="box-content">
-        <a
+        <button
+          type="button"
           class="box-content-row box-content-row-flex text-default"
           *ngFor="let attachment of cipher.attachments"
-          href="#"
           appStopClick
           appBlurCLick
           (click)="downloadAttachment(attachment)"
@@ -354,7 +344,7 @@
             *ngIf="attachment.downloading"
             aria-hidden="true"
           ></i>
-        </a>
+        </button>
       </div>
     </div>
     <div class="box">
@@ -369,15 +359,14 @@
         </div>
         <div *ngIf="cipher.hasPasswordHistory">
           <b class="font-weight-semibold">{{ "passwordHistory" | i18n }}:</b>
-          <a
-            href="#"
+          <button
+            type="button"
             (click)="viewHistory()"
             appStopClick
-            role="button"
             appA11yTitle="{{ 'passwordHistory' | i18n }}, {{ cipher.passwordHistory.length }}"
           >
             <span aria-hidden="true">{{ cipher.passwordHistory.length }}</span>
-          </a>
+          </button>
         </div>
       </div>
     </div>
diff --git a/src/scss/base.scss b/src/scss/base.scss
index 4c9445da..70889595 100644
--- a/src/scss/base.scss
+++ b/src/scss/base.scss
@@ -84,6 +84,9 @@ button {
 }
 
 button {
+  border: none;
+  background: transparent;
+  color: inherit;
   white-space: nowrap;
   cursor: pointer;
 }
diff --git a/src/scss/box.scss b/src/scss/box.scss
index ddb7bcca..a955617f 100644
--- a/src/scss/box.scss
+++ b/src/scss/box.scss
@@ -105,9 +105,11 @@
 
 .box-content-row {
   display: block;
+  width: 100%;
   padding: 10px 15px;
   position: relative;
   z-index: 1;
+  text-align: left;
 
   &:before {
     content: "";
@@ -232,7 +234,8 @@
       margin-top: 5px;
     }
 
-    > a {
+    > a,
+    > button {
       padding: 8px 8px 8px 4px;
       margin: 0;
 
@@ -366,7 +369,7 @@
 
   &:not(.box-draggable-row) {
     .action-buttons .row-btn:last-child {
-      padding-right: 2px !important;
+      margin-right: -6px !important;
     }
   }
 
diff --git a/src/scss/list.scss b/src/scss/list.scss
index fb6ddac3..45288e5e 100644
--- a/src/scss/list.scss
+++ b/src/scss/list.scss
@@ -1,10 +1,8 @@
 @import "variables.scss";
 
-.list > a {
-  display: block;
+.list > button {
   padding: 3px 10px;
   text-decoration: none;
-  position: relative;
   user-select: none;
   z-index: 1;
 
@@ -105,11 +103,14 @@
   }
 }
 
-.list > a.flex-list-item {
+.list > button.flex-list-item {
   display: flex;
   align-items: center;
+  width: 100%;
+  text-align: left;
 
   .item-icon {
+    display: block;
     margin-left: -5px;
     margin-right: 4px;
     @include themify($themes) {
@@ -118,7 +119,9 @@
   }
 
   .item-content {
+    display: block;
     .item-title {
+      display: block;
       .title-badges {
         @include themify($themes) {
           color: themed("mutedColor");
@@ -135,12 +138,12 @@
   }
 
   .flex-cipher-list-item {
-    flex-direction: column;
-    flex-wrap: nowrap;
-    justify-content: center;
-    align-items: flex-start;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+
+    > * {
+      text-align: left;
+    }
   }
 }
diff --git a/src/scss/vault.scss b/src/scss/vault.scss
index 11623cd2..adef1984 100644
--- a/src/scss/vault.scss
+++ b/src/scss/vault.scss
@@ -129,7 +129,7 @@ app-root {
     ul.bwi-ul {
       // Level 1
       li {
-        > a {
+        > button {
           padding-left: 12px;
         }
 
@@ -137,14 +137,14 @@ app-root {
           left: -4px;
         }
 
-        &.active > a .bwi-li {
+        &.active > button .bwi-li {
           left: 11px;
         }
       }
 
       // Level 2
       ul li {
-        > a {
+        > button {
           padding-left: 23px;
         }
 
@@ -152,14 +152,14 @@ app-root {
           left: 7px;
         }
 
-        &.active > a .bwi-li {
+        &.active > button .bwi-li {
           left: 22px;
         }
       }
 
       // Level 3
       ul ul li {
-        > a {
+        > button {
           padding-left: 34px;
         }
 
@@ -167,14 +167,14 @@ app-root {
           left: 18px;
         }
 
-        &.active > a .bwi-li {
+        &.active > button .bwi-li {
           left: 33px;
         }
       }
 
       // Level 4
       ul ul ul li {
-        > a {
+        > button {
           padding-left: 45px;
         }
 
@@ -182,14 +182,14 @@ app-root {
           left: 29px;
         }
 
-        &.active > a .bwi-li {
+        &.active > button .bwi-li {
           left: 44px;
         }
       }
 
       // Level 5
       ul ul ul ul li {
-        > a {
+        > button {
           padding-left: 56px;
         }
 
@@ -197,14 +197,14 @@ app-root {
           left: 40px;
         }
 
-        &.active > a .bwi-li {
+        &.active > button .bwi-li {
           left: 55px;
         }
       }
 
       // Level 6
       ul ul ul ul ul li {
-        > a {
+        > button {
           padding-left: 67px;
         }
 
@@ -212,14 +212,14 @@ app-root {
           left: 51px;
         }
 
-        &.active > a .bwi-li {
+        &.active > button .bwi-li {
           left: 66px;
         }
       }
 
       // Level 7
       ul ul ul ul ul ul li {
-        > a {
+        > button {
           padding-left: 78px;
         }
 
@@ -227,7 +227,7 @@ app-root {
           left: 62px;
         }
 
-        &.active > a .bwi-li {
+        &.active > button .bwi-li {
           left: 77px;
         }
       }
@@ -238,10 +238,11 @@ app-root {
       margin: 0;
 
       li {
-        a {
+        button {
           padding: 5px 0;
           display: flex;
           align-items: center;
+          width: 100%;
 
           @include themify($themes) {
             color: themed("textColor");