From 55a9403ee3142fa2188889b69f69343b7e8ed059 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Thu, 5 May 2022 15:36:46 +0100
Subject: [PATCH] [PS-540] Accessibility: remove `appBlurClick`, add
 `aria-expanded` to cog options, links to buttons, fix unsufficient focus
 indication (#1514)

---
 src/app/accounts/environment.component.html   |  2 +-
 src/app/accounts/hint.component.html          |  4 +--
 src/app/accounts/lock.component.html          |  6 ++--
 src/app/accounts/login.component.html         |  9 +++---
 src/app/accounts/premium.component.html       |  4 +--
 src/app/accounts/register.component.html      |  6 ++--
 .../accounts/remove-password.component.html   |  2 --
 src/app/accounts/set-password.component.html  |  2 --
 src/app/accounts/two-factor.component.html    |  3 +-
 .../update-temp-password.component.html       |  4 +--
 .../password-reprompt.component.html          |  3 +-
 src/app/components/set-pin.component.html     |  1 -
 src/app/layout/nav.component.html             | 12 +++++--
 src/app/send/add-edit.component.html          |  7 +---
 src/app/send/send.component.html              | 10 +-----
 .../add-edit-custom-fields.component.html     |  1 -
 src/app/vault/add-edit.component.html         | 32 +++++--------------
 src/app/vault/attachments.component.html      |  2 --
 src/app/vault/ciphers.component.html          |  1 -
 src/app/vault/collections.component.html      |  1 -
 src/app/vault/export.component.html           |  1 -
 src/app/vault/folder-add-edit.component.html  |  2 --
 src/app/vault/generator.component.html        |  2 --
 src/app/vault/groupings.component.html        | 18 ++---------
 .../password-generator-history.component.html |  1 -
 src/app/vault/share.component.html            |  1 -
 src/app/vault/view.component.html             |  6 ----
 src/scss/buttons.scss                         |  1 -
 src/scss/vault.scss                           | 18 ++++++-----
 29 files changed, 47 insertions(+), 115 deletions(-)

diff --git a/src/app/accounts/environment.component.html b/src/app/accounts/environment.component.html
index 390efbb9..eff32641 100644
--- a/src/app/accounts/environment.component.html
+++ b/src/app/accounts/environment.component.html
@@ -83,7 +83,7 @@
         </div>
       </div>
       <div class="modal-footer">
-        <button appBlurClick type="submit" class="primary" appA11yTitle="{{ 'save' | i18n }}">
+        <button type="submit" class="primary" appA11yTitle="{{ 'save' | i18n }}">
           <i class="bwi bwi-save-changes bwi-lg bwi-fw" aria-hidden="true"></i>
         </button>
         <button type="button" data-dismiss="modal">{{ "close" | i18n }}</button>
diff --git a/src/app/accounts/hint.component.html b/src/app/accounts/hint.component.html
index 55137081..3ab6088c 100644
--- a/src/app/accounts/hint.component.html
+++ b/src/app/accounts/hint.component.html
@@ -21,11 +21,11 @@
       </div>
     </div>
     <div class="buttons">
-      <button type="submit" class="btn primary block" [disabled]="form.loading" appBlurClick>
+      <button type="submit" class="btn primary block" [disabled]="form.loading">
         <b [hidden]="form.loading">{{ "submit" | i18n }}</b>
         <i class="bwi bwi-spinner bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
       </button>
-      <a role="button" tabindex="0" routerLink="/login" class="btn block">{{ "cancel" | i18n }}</a>
+      <button type="button" routerLink="/login" class="btn block">{{ "cancel" | i18n }}</button>
     </div>
   </div>
 </form>
diff --git a/src/app/accounts/lock.component.html b/src/app/accounts/lock.component.html
index 71ac7594..f5d8b369 100644
--- a/src/app/accounts/lock.component.html
+++ b/src/app/accounts/lock.component.html
@@ -34,7 +34,6 @@
               type="button"
               class="row-btn"
               appStopClick
-              appBlurClick
               appA11yTitle="{{ 'toggleVisibility' | i18n }}"
               [attr.aria-pressed]="showPassword"
               (click)="togglePassword()"
@@ -58,17 +57,16 @@
           type="button"
           class="btn block"
           [ngClass]="{ 'primary font-weight-bold': hideInput }"
-          appBlurClick
           (click)="unlockBiometric()"
         >
           {{ biometricText | i18n }}
         </button>
       </div>
       <div class="buttons-row">
-        <button type="submit" class="btn primary block" appBlurClick *ngIf="!hideInput">
+        <button type="submit" class="btn primary block" *ngIf="!hideInput">
           <i class="bwi bwi-unlock" aria-hidden="true"></i> <b>{{ "unlock" | i18n }}</b>
         </button>
-        <button type="button" class="btn block" appBlurClick (click)="logOut()">
+        <button type="button" class="btn block" (click)="logOut()">
           {{ "logOut" | i18n }}
         </button>
       </div>
diff --git a/src/app/accounts/login.component.html b/src/app/accounts/login.component.html
index bf7830e1..4ec1307f 100644
--- a/src/app/accounts/login.component.html
+++ b/src/app/accounts/login.component.html
@@ -52,7 +52,6 @@
                 type="button"
                 class="row-btn"
                 appStopClick
-                appBlurClick
                 appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                 [attr.aria-pressed]="showPassword"
                 (click)="togglePassword()"
@@ -76,15 +75,15 @@
       </div>
       <div class="buttons with-rows">
         <div class="buttons-row">
-          <button type="submit" class="btn primary block" [disabled]="form.loading" appBlurClick>
+          <button type="submit" class="btn primary block" [disabled]="form.loading">
             <b [hidden]="form.loading"
               ><i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ "logIn" | i18n }}</b
             >
             <i class="bwi bwi-spinner bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
           </button>
-          <a role="button" tabindex="0" routerLink="/register" class="btn block">
+          <button type="button" routerLink="/register" class="btn block">
             <i class="bwi bwi-pencil-square" aria-hidden="true"></i> {{ "createAccount" | i18n }}
-          </a>
+          </button>
         </div>
         <div class="buttons-row">
           <button
@@ -97,7 +96,7 @@
         </div>
       </div>
       <div class="sub-options">
-        <a role="button" tabindex="0" routerLink="/hint">{{ "getMasterPasswordHint" | i18n }}</a>
+        <button type="button" routerLink="/hint">{{ "getMasterPasswordHint" | i18n }}</button>
       </div>
     </div>
   </form>
diff --git a/src/app/accounts/premium.component.html b/src/app/accounts/premium.component.html
index 20859ec7..01c181da 100644
--- a/src/app/accounts/premium.component.html
+++ b/src/app/accounts/premium.component.html
@@ -48,14 +48,13 @@
         </div>
       </div>
       <div class="modal-footer">
-        <button type="button" class="primary" appBlurClick (click)="manage()" *ngIf="isPremium">
+        <button type="button" class="primary" (click)="manage()" *ngIf="isPremium">
           <b>{{ "premiumManage" | i18n }}</b>
         </button>
         <button
           #purchaseBtn
           type="button"
           class="primary"
-          appBlurClick
           (click)="purchase()"
           *ngIf="!isPremium"
           [disabled]="purchaseBtn.loading"
@@ -67,7 +66,6 @@
           <button
             #refreshBtn
             type="button"
-            appBlurClick
             (click)="refresh()"
             [disabled]="refreshBtn.loading"
             appA11yTitle="{{ 'premiumRefresh' | i18n }}"
diff --git a/src/app/accounts/register.component.html b/src/app/accounts/register.component.html
index 4136f5cf..3de6aac8 100644
--- a/src/app/accounts/register.component.html
+++ b/src/app/accounts/register.component.html
@@ -44,7 +44,6 @@
                 type="button"
                 class="row-btn"
                 appStopClick
-                appBlurClick
                 appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                 [attr.aria-pressed]="showPassword"
                 (click)="togglePassword(false)"
@@ -94,7 +93,6 @@
               type="button"
               class="row-btn"
               appStopClick
-              appBlurClick
               appA11yTitle="{{ 'toggleVisibility' | i18n }}"
               [attr.aria-pressed]="showPassword"
               (click)="togglePassword(true)"
@@ -140,11 +138,11 @@
       </div>
     </div>
     <div class="buttons">
-      <button type="submit" class="btn primary block" [disabled]="form.loading" appBlurClick>
+      <button type="submit" class="btn primary block" [disabled]="form.loading">
         <b [hidden]="form.loading">{{ "submit" | i18n }}</b>
         <i class="bwi bwi-spinner bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
       </button>
-      <a role="button" tabindex="0" routerLink="/login" class="btn block">{{ "cancel" | i18n }}</a>
+      <button type="button" routerLink="/login" class="btn block">{{ "cancel" | i18n }}</button>
     </div>
   </div>
 </form>
diff --git a/src/app/accounts/remove-password.component.html b/src/app/accounts/remove-password.component.html
index 2442d3a4..87f86e77 100644
--- a/src/app/accounts/remove-password.component.html
+++ b/src/app/accounts/remove-password.component.html
@@ -7,7 +7,6 @@
         type="submit"
         class="btn primary block"
         [disabled]="actionPromise"
-        appBlurClick
         (click)="convert()"
       >
         <b [hidden]="continuing">{{ "removeMasterPassword" | i18n }}</b>
@@ -17,7 +16,6 @@
         type="button"
         class="btn secondary block"
         [disabled]="actionPromise"
-        appBlurClick
         (click)="leave()"
       >
         <b [hidden]="leaving">{{ "leaveOrganization" | i18n }}</b>
diff --git a/src/app/accounts/set-password.component.html b/src/app/accounts/set-password.component.html
index 61e99105..0e51f5f2 100644
--- a/src/app/accounts/set-password.component.html
+++ b/src/app/accounts/set-password.component.html
@@ -60,7 +60,6 @@
                     type="button"
                     class="row-btn"
                     appStopClick
-                    appBlurClick
                     appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                     [attr.aria-pressed]="showPassword"
                     (click)="togglePassword(false)"
@@ -112,7 +111,6 @@
                     type="button"
                     class="row-btn"
                     appStopClick
-                    appBlurClick
                     appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                     [attr.aria-pressed]="showPassword"
                     (click)="togglePassword(true)"
diff --git a/src/app/accounts/two-factor.component.html b/src/app/accounts/two-factor.component.html
index e2abd0f8..e18a1dd0 100644
--- a/src/app/accounts/two-factor.component.html
+++ b/src/app/accounts/two-factor.component.html
@@ -112,7 +112,6 @@
         type="submit"
         class="btn primary block"
         [disabled]="form.loading"
-        appBlurClick
         *ngIf="
           selectedProviderType != null &&
           selectedProviderType !== providerType.Duo &&
@@ -124,7 +123,7 @@
         >
         <i class="bwi bwi-spinner bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
       </button>
-      <a role="button" tabindex="0" routerLink="/login" class="btn block">{{ "cancel" | i18n }}</a>
+      <button type="button" routerLink="/login" class="btn block">{{ "cancel" | i18n }}</button>
     </div>
     <div class="sub-options">
       <button type="button" appStopClick (click)="anotherMethod()">
diff --git a/src/app/accounts/update-temp-password.component.html b/src/app/accounts/update-temp-password.component.html
index 084c3217..6f5772fc 100644
--- a/src/app/accounts/update-temp-password.component.html
+++ b/src/app/accounts/update-temp-password.component.html
@@ -40,7 +40,6 @@
                 type="button"
                 class="row-btn"
                 appStopClick
-                appBlurClick
                 appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                 [attr.aria-pressed]="showPassword"
                 (click)="togglePassword(false)"
@@ -87,7 +86,6 @@
               type="button"
               class="row-btn"
               appStopClick
-              appBlurClick
               appA11yTitle="{{ 'toggleVisibility' | i18n }}"
               [attr.aria-pressed]="showPassword"
               (click)="togglePassword(true)"
@@ -114,7 +112,7 @@
       </div>
     </div>
     <div class="buttons">
-      <button type="submit" class="btn primary block" [disabled]="form.loading" appBlurClick>
+      <button type="submit" class="btn primary block" [disabled]="form.loading">
         <b [hidden]="form.loading">{{ "submit" | i18n }}</b>
         <i class="bwi bwi-spinner bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
       </button>
diff --git a/src/app/components/password-reprompt.component.html b/src/app/components/password-reprompt.component.html
index 078e983b..07d9abd8 100644
--- a/src/app/components/password-reprompt.component.html
+++ b/src/app/components/password-reprompt.component.html
@@ -23,7 +23,6 @@
                   type="button"
                   class="row-btn"
                   appStopClick
-                  appBlurClick
                   appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                   [attr.aria-pressed]="showPassword"
                   (click)="togglePassword()"
@@ -43,7 +42,7 @@
         </div>
       </div>
       <div class="modal-footer">
-        <button type="submit" class="btn btn-primary btn-submit" appBlurClick>
+        <button type="submit" class="btn btn-primary btn-submit">
           <span>{{ "ok" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
diff --git a/src/app/components/set-pin.component.html b/src/app/components/set-pin.component.html
index 78552942..5bd50bbc 100644
--- a/src/app/components/set-pin.component.html
+++ b/src/app/components/set-pin.component.html
@@ -26,7 +26,6 @@
                   type="button"
                   class="row-btn"
                   appStopClick
-                  appBlurClick
                   appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                   [attr.aria-pressed]="showPin"
                   (click)="toggleVisibility()"
diff --git a/src/app/layout/nav.component.html b/src/app/layout/nav.component.html
index 80350a07..c9b63584 100644
--- a/src/app/layout/nav.component.html
+++ b/src/app/layout/nav.component.html
@@ -1,5 +1,13 @@
 <ng-container *ngFor="let item of items">
-  <a [routerLink]="item.link" class="btn primary" routerLinkActive="active" [title]="item.label">
+  <button
+    type="button"
+    [routerLink]="item.link"
+    class="btn primary"
+    routerLinkActive="active"
+    [title]="item.label"
+    #rla="routerLinkActive"
+    [attr.aria-pressed]="rla.isActive"
+  >
     <i class="bwi" [ngClass]="item.icon"></i>{{ item.label }}
-  </a>
+  </button>
 </ng-container>
diff --git a/src/app/send/add-edit.component.html b/src/app/send/add-edit.component.html
index a91bfb6c..855cd9ca 100644
--- a/src/app/send/add-edit.component.html
+++ b/src/app/send/add-edit.component.html
@@ -97,7 +97,6 @@
             type="button"
             class="toggle"
             appStopClick
-            appBlurClick
             (click)="toggleOptions()"
             [attr.aria-expanded]="showOptions"
           >
@@ -161,7 +160,6 @@
                   type="button"
                   class="row-btn"
                   appStopClick
-                  appBlurClick
                   appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                   [attr.aria-pressed]="showPassword"
                   (click)="togglePasswordVisible()"
@@ -253,7 +251,6 @@
   </div>
   <div class="footer">
     <button
-      appBlurClick
       type="submit"
       class="primary btn-submit"
       appA11yTitle="{{ 'save' | i18n }}"
@@ -263,12 +260,11 @@
       <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
       <span><i class="bwi bwi-save-changes bwi-lg bwi-fw" aria-hidden="true"></i></span>
     </button>
-    <button appBlurClick type="button" (click)="cancel()" [disabled]="form.loading">
+    <button type="button" (click)="cancel()" [disabled]="form.loading">
       {{ "cancel" | i18n }}
     </button>
     <div class="right">
       <button
-        appBlurClick
         type="button"
         (click)="copyLinkToClipboard(link)"
         appA11yTitle="{{ 'copySendLinkToClipboard' | i18n }}"
@@ -278,7 +274,6 @@
       </button>
       <button
         #deleteBtn
-        appBlurClick
         type="button"
         (click)="delete()"
         class="danger"
diff --git a/src/app/send/send.component.html b/src/app/send/send.component.html
index 853debb5..a019ca0d 100644
--- a/src/app/send/send.component.html
+++ b/src/app/send/send.component.html
@@ -8,7 +8,6 @@
             <button
               type="button"
               appStopClick
-              appBlurClick
               (click)="selectAll()"
               [attr.aria-pressed]="selectedAll"
             >
@@ -22,7 +21,6 @@
             <button
               type="button"
               appStopClick
-              appBlurClick
               (click)="selectType(sendType.Text)"
               [attr.aria-pressed]="selectedType === sendType.Text"
             >
@@ -35,7 +33,6 @@
             <button
               type="button"
               appStopClick
-              appBlurClick
               (click)="selectType(sendType.File)"
               [attr.aria-pressed]="selectedType === sendType.File"
             >
@@ -131,12 +128,7 @@
       </div>
     </div>
     <div class="footer">
-      <button
-        appBlurClick
-        (click)="addSend()"
-        class="block primary"
-        appA11yTitle="{{ 'addItem' | i18n }}"
-      >
+      <button (click)="addSend()" class="block primary" appA11yTitle="{{ 'addItem' | i18n }}">
         <i class="bwi bwi-plus bwi-lg" aria-hidden="true"></i>
       </button>
     </div>
diff --git a/src/app/vault/add-edit-custom-fields.component.html b/src/app/vault/add-edit-custom-fields.component.html
index 0e5a8f6e..cf4635c3 100644
--- a/src/app/vault/add-edit-custom-fields.component.html
+++ b/src/app/vault/add-edit-custom-fields.component.html
@@ -81,7 +81,6 @@
             type="button"
             class="row-btn"
             appStopClick
-            appBlurClick
             appA11yTitle="{{ 'toggleVisibility' | i18n }}"
             [attr.aria-pressed]="f.showValue"
             (click)="toggleFieldValue(f)"
diff --git a/src/app/vault/add-edit.component.html b/src/app/vault/add-edit.component.html
index d694e810..6f78e0ce 100644
--- a/src/app/vault/add-edit.component.html
+++ b/src/app/vault/add-edit.component.html
@@ -39,17 +39,15 @@
                 />
               </div>
               <div class="action-buttons">
-                <a
+                <button
+                  type="button"
                   class="row-btn"
-                  href="#"
                   appStopClick
-                  appBlurClick
-                  role="button"
                   appA11yTitle="{{ 'generateUsername' | i18n }}"
                   (click)="generateUsername()"
                 >
                   <i class="bwi bwi-lg bwi-generate" aria-hidden="true"></i>
-                </a>
+                </button>
               </div>
             </div>
             <div class="box-content-row box-content-row-flex" appBoxRow>
@@ -70,7 +68,6 @@
                   type="button"
                   #checkPasswordBtn
                   class="row-btn btn"
-                  appBlurClick
                   appA11yTitle="{{ 'checkPassword' | i18n }}"
                   (click)="checkPassword()"
                   [appApiAction]="checkPasswordPromise"
@@ -91,7 +88,6 @@
                   type="button"
                   class="row-btn"
                   appStopClick
-                  appBlurClick
                   appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                   [attr.aria-pressed]="showPassword"
                   (click)="togglePassword()"
@@ -106,7 +102,6 @@
                   type="button"
                   class="row-btn"
                   appStopClick
-                  appBlurClick
                   appA11yTitle="{{ 'generatePassword' | i18n }}"
                   (click)="generatePassword()"
                 >
@@ -155,7 +150,6 @@
                   type="button"
                   class="row-btn"
                   appStopClick
-                  appBlurClick
                   appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                   [attr.aria-pressed]="showCardNumber"
                   (click)="toggleCardNumber()"
@@ -209,7 +203,6 @@
                   type="button"
                   class="row-btn"
                   appStopClick
-                  appBlurClick
                   appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                   [attr.aria-pressed]="showCardCode"
                   (click)="toggleCardCode()"
@@ -440,22 +433,18 @@
                   type="button"
                   class="row-btn"
                   appStopClick
-                  appBlurClick
                   appA11yTitle="{{ 'toggleOptions' | i18n }}"
                   (click)="toggleUriOptions(u)"
+                  [attr.aria-expanded]="
+                    !(u.showOptions === false || (u.showOptions == null && u.match == null))
+                  "
                 >
                   <i class="bwi bwi-lg bwi-cog" aria-hidden="true"></i>
                 </button>
               </div>
             </div>
           </ng-container>
-          <button
-            type="button"
-            appStopClick
-            appBlurClick
-            (click)="addUri()"
-            class="box-content-row"
-          >
+          <button type="button" appStopClick (click)="addUri()" class="box-content-row">
             <i class="bwi bwi-plus-circle bwi-fw bwi-lg" aria-hidden="true"></i>
             {{ "newUri" | i18n }}
           </button>
@@ -496,7 +485,6 @@
             type="button"
             class="box-content-row box-content-row-flex text-default"
             appStopClick
-            appBlurClick
             (click)="attachments()"
             *ngIf="editMode && !cloneMode"
           >
@@ -507,7 +495,6 @@
             type="button"
             class="box-content-row box-content-row-flex text-default"
             appStopClick
-            appBlurClick
             (click)="editCollections()"
             *ngIf="editMode && !cloneMode && cipher.organizationId"
           >
@@ -578,7 +565,6 @@
   </div>
   <div class="footer">
     <button
-      appBlurClick
       type="submit"
       class="primary"
       appA11yTitle="{{ 'save' | i18n }}"
@@ -591,12 +577,11 @@
         aria-hidden="true"
       ></i>
     </button>
-    <button appBlurClick type="button" (click)="cancel()">
+    <button type="button" (click)="cancel()">
       {{ "cancel" | i18n }}
     </button>
     <div class="right">
       <button
-        appBlurClick
         type="button"
         (click)="share()"
         appA11yTitle="{{ 'moveToOrganization' | i18n }}"
@@ -606,7 +591,6 @@
       </button>
       <button
         #deleteBtn
-        appBlurClick
         type="button"
         (click)="delete()"
         class="danger"
diff --git a/src/app/vault/attachments.component.html b/src/app/vault/attachments.component.html
index b322f060..5981b2b6 100644
--- a/src/app/vault/attachments.component.html
+++ b/src/app/vault/attachments.component.html
@@ -17,7 +17,6 @@
                   class="row-btn btn"
                   type="button"
                   appStopClick
-                  appBlurClick
                   appA11yTitle="{{ 'delete' | i18n }}"
                   (click)="delete(a)"
                   #deleteBtn
@@ -56,7 +55,6 @@
       </div>
       <div class="modal-footer">
         <button
-          appBlurClick
           type="submit"
           class="primary"
           appA11yTitle="{{ 'save' | i18n }}"
diff --git a/src/app/vault/ciphers.component.html b/src/app/vault/ciphers.component.html
index 90a70360..fe153dda 100644
--- a/src/app/vault/ciphers.component.html
+++ b/src/app/vault/ciphers.component.html
@@ -54,7 +54,6 @@
 </div>
 <div class="footer">
   <button
-    appBlurClick
     (click)="addCipher()"
     (contextmenu)="addCipherOptions()"
     class="block primary"
diff --git a/src/app/vault/collections.component.html b/src/app/vault/collections.component.html
index 8b37c798..acdc5ea0 100644
--- a/src/app/vault/collections.component.html
+++ b/src/app/vault/collections.component.html
@@ -28,7 +28,6 @@
       </div>
       <div class="modal-footer">
         <button
-          appBlurClick
           type="submit"
           class="primary"
           appA11yTitle="{{ 'save' | i18n }}"
diff --git a/src/app/vault/export.component.html b/src/app/vault/export.component.html
index 26325a02..09e21b06 100644
--- a/src/app/vault/export.component.html
+++ b/src/app/vault/export.component.html
@@ -31,7 +31,6 @@
       </div>
       <div class="modal-footer">
         <button
-          appBlurClick
           type="submit"
           class="primary"
           appA11yTitle="{{ 'submit' | i18n }}"
diff --git a/src/app/vault/folder-add-edit.component.html b/src/app/vault/folder-add-edit.component.html
index b853d110..6457b223 100644
--- a/src/app/vault/folder-add-edit.component.html
+++ b/src/app/vault/folder-add-edit.component.html
@@ -22,7 +22,6 @@
       </div>
       <div class="modal-footer">
         <button
-          appBlurClick
           type="submit"
           class="primary"
           appA11yTitle="{{ 'save' | i18n }}"
@@ -43,7 +42,6 @@
         <div class="right">
           <button
             #deleteBtn
-            appBlurClick
             type="button"
             (click)="delete()"
             class="danger"
diff --git a/src/app/vault/generator.component.html b/src/app/vault/generator.component.html
index 79c9bf5b..6d530e59 100644
--- a/src/app/vault/generator.component.html
+++ b/src/app/vault/generator.component.html
@@ -326,7 +326,6 @@
                   <a
                     href="#"
                     appStopClick
-                    appBlurClick
                     (click)="usernameTypesLearnMore()"
                     appA11yTitle="{{ 'learnMore' | i18n }}"
                   >
@@ -556,7 +555,6 @@
         <button
           type="button"
           class="primary"
-          appBlurClick
           *ngIf="comingFromAddEdit"
           (click)="select()"
           appA11yTitle="{{ 'select' | i18n }}"
diff --git a/src/app/vault/groupings.component.html b/src/app/vault/groupings.component.html
index 148c21d1..9d878295 100644
--- a/src/app/vault/groupings.component.html
+++ b/src/app/vault/groupings.component.html
@@ -3,13 +3,7 @@
     <h2 class="sr-only">{{ "filters" | i18n }}</h2>
     <ul>
       <li [ngClass]="{ active: selectedAll }">
-        <button
-          type="button"
-          [attr.aria-pressed]="selectedAll"
-          appStopClick
-          appBlurClick
-          (click)="selectAll()"
-        >
+        <button type="button" [attr.aria-pressed]="selectedAll" appStopClick (click)="selectAll()">
           <i class="bwi bwi-fw bwi-filter" aria-hidden="true"></i>&nbsp;{{ "allItems" | i18n }}
         </button>
       </li>
@@ -18,7 +12,6 @@
           type="button"
           [attr.aria-pressed]="selectedFavorites"
           appStopClick
-          appBlurClick
           (click)="selectFavorites()"
         >
           <i class="bwi bwi-fw bwi-star" aria-hidden="true"></i>&nbsp;{{ "favorites" | i18n }}
@@ -29,7 +22,6 @@
           type="button"
           [attr.aria-pressed]="selectedTrash"
           appStopClick
-          appBlurClick
           (click)="selectTrash()"
         >
           <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>&nbsp;{{ "trash" | i18n }}
@@ -43,7 +35,6 @@
           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 }}
@@ -54,7 +45,6 @@
           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 }}
@@ -65,7 +55,6 @@
           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 }}
@@ -76,7 +65,6 @@
           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;{{
@@ -89,7 +77,7 @@
     <ng-container *ngIf="loaded">
       <div class="heading">
         <h2>{{ "folders" | i18n }}</h2>
-        <button appBlurClick (click)="addFolder()" appA11yTitle="{{ 'addFolder' | i18n }}">
+        <button (click)="addFolder()" appA11yTitle="{{ 'addFolder' | i18n }}">
           <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
         </button>
       </div>
@@ -103,7 +91,6 @@
               type="button"
               [attr.aria-pressed]="selectedFolder && f.node.id === selectedFolderId"
               appStopClick
-              appBlurClick
               (click)="selectFolder(f.node)"
             >
               <i
@@ -160,7 +147,6 @@
                 type="button"
                 [attr.aria-pressed]="c.node.id === selectedCollectionId"
                 appStopClick
-                appBlurClick
                 (click)="selectCollection(c.node)"
               >
                 <i
diff --git a/src/app/vault/password-generator-history.component.html b/src/app/vault/password-generator-history.component.html
index b23dd18e..8bef68a6 100644
--- a/src/app/vault/password-generator-history.component.html
+++ b/src/app/vault/password-generator-history.component.html
@@ -38,7 +38,6 @@
         <button type="button" data-dismiss="modal">{{ "close" | i18n }}</button>
         <div class="right">
           <button
-            appBlurClick
             type="button"
             (click)="clear()"
             class="danger"
diff --git a/src/app/vault/share.component.html b/src/app/vault/share.component.html
index d2e10917..0f78ae87 100644
--- a/src/app/vault/share.component.html
+++ b/src/app/vault/share.component.html
@@ -54,7 +54,6 @@
       </div>
       <div class="modal-footer">
         <button
-          appBlurClick
           type="submit"
           class="primary"
           appA11yTitle="{{ 'save' | i18n }}"
diff --git a/src/app/vault/view.component.html b/src/app/vault/view.component.html
index 255d0e76..a033cdd8 100644
--- a/src/app/vault/view.component.html
+++ b/src/app/vault/view.component.html
@@ -56,7 +56,6 @@
                 type="button"
                 #checkPasswordBtn
                 class="row-btn btn"
-                appBlurClick
                 appA11yTitle="{{ 'checkPassword' | i18n }}"
                 (click)="checkPassword()"
                 [appApiAction]="checkPasswordPromise"
@@ -333,7 +332,6 @@
           class="box-content-row box-content-row-flex text-default"
           *ngFor="let attachment of cipher.attachments"
           appStopClick
-          appBlurCLick
           (click)="downloadAttachment(attachment)"
         >
           <span class="row-main">{{ attachment.fileName }}</span>
@@ -378,7 +376,6 @@
 </div>
 <div class="footer" *ngIf="cipher">
   <button
-    appBlurClick
     class="primary"
     (click)="edit()"
     appA11yTitle="{{ 'edit' | i18n }}"
@@ -387,7 +384,6 @@
     <i class="bwi bwi-pencil bwi-fw bwi-lg" aria-hidden="true"></i>
   </button>
   <button
-    appBlurClick
     class="primary"
     (click)="restore()"
     appA11yTitle="{{ 'restore' | i18n }}"
@@ -396,7 +392,6 @@
     <i class="bwi bwi-undo bwi-fw bwi-lg" aria-hidden="true"></i>
   </button>
   <button
-    appBlurClick
     class="primary"
     *ngIf="!cipher?.organizationId && !cipher.isDeleted"
     (click)="clone()"
@@ -406,7 +401,6 @@
   </button>
   <div class="right">
     <button
-      appBlurClick
       type="button"
       (click)="delete()"
       class="danger"
diff --git a/src/scss/buttons.scss b/src/scss/buttons.scss
index 8ff2d676..3d7ccfe2 100644
--- a/src/scss/buttons.scss
+++ b/src/scss/buttons.scss
@@ -53,7 +53,6 @@
 
   &:focus:not([disabled]) {
     cursor: pointer;
-    outline: 0;
 
     @include themify($themes) {
       background-color: darken(themed("buttonBackgroundColor"), 6%);
diff --git a/src/scss/vault.scss b/src/scss/vault.scss
index adef1984..dad10af2 100644
--- a/src/scss/vault.scss
+++ b/src/scss/vault.scss
@@ -363,6 +363,16 @@ app-root {
       flex-direction: column;
       height: 100%;
     }
+
+    .footer {
+      button {
+        margin-right: 10px;
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
   }
 
   > .logo {
@@ -414,14 +424,6 @@ app-root {
       border-top-color: themed("borderColor");
     }
 
-    button {
-      margin-right: 10px;
-
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-
     .right {
       margin-left: auto;
       display: flex;