From bcd488bb872c2070682a8c5c19ed89f360a752fc Mon Sep 17 00:00:00 2001
From: Thomas Rittson <31796059+eliykat@users.noreply.github.com>
Date: Mon, 25 Jan 2021 06:24:09 +1000
Subject: [PATCH] Clearer keyboard focus on input elements (#780)

* Add visible border/shadow if buttons have :focus

* Fix obscured outlines when elements have :focus
---
 src/app/vault/add-edit.component.html |  4 ++--
 src/scss/styles.scss                  | 26 ++++++++++++++++++++++++++
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/app/vault/add-edit.component.html b/src/app/vault/add-edit.component.html
index 3f4d04ea53..45a6956ee7 100644
--- a/src/app/vault/add-edit.component.html
+++ b/src/app/vault/add-edit.component.html
@@ -57,12 +57,12 @@
                             <div class="d-flex">
                                 <label for="loginPassword">{{'password' | i18n}}</label>
                                 <div class="ml-auto d-flex" *ngIf="!cipher.isDeleted && !viewOnly">
-                                    <a href="#" class="d-block mr-2" appStopClick
+                                    <a href="#" class="d-block mr-2 fa-icon-above-input" appStopClick
                                         appA11yTitle="{{'generatePassword' | i18n}}" (click)="generatePassword()"
                                         *ngIf="cipher.viewPassword">
                                         <i class="fa fa-lg fa-fw fa-refresh" aria-hidden="true"></i>
                                     </a>
-                                    <a href="#" class="d-block" #checkPasswordBtn appStopClick
+                                    <a href="#" class="d-block fa-icon-above-input" #checkPasswordBtn appStopClick
                                         appA11yTitle="{{'checkPassword' | i18n}}" (click)="checkPassword()"
                                         [appApiAction]="checkPasswordPromise">
                                         <i class="fa fa-lg fa-fw fa-check-circle" [hidden]="checkPasswordBtn.loading"
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index 55b3c92c1c..ba3aaa3b8e 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -315,6 +315,16 @@ input[type="search"]::-webkit-search-cancel-button {
     }
 }
 
+.btn-link {
+    &:focus,
+    &.focus {
+        outline-color: -webkit-focus-ring-color;
+        outline-offset: 1px;
+        outline-style: auto;
+        outline-width: 1px;
+    }
+}
+
 .btn-outline-secondary {
     color: $text-muted;
 
@@ -325,6 +335,11 @@ input[type="search"]::-webkit-search-cancel-button {
     &:disabled {
         opacity: 1;
     }
+
+    &:focus,
+    &.focus {
+        box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($primary), $primary, 15%), .5);
+    }
 }
 
 .btn-submit {
@@ -352,6 +367,17 @@ input[type="search"]::-webkit-search-cancel-button {
     }
 }
 
+.list-group-item {
+    &:focus,
+    &.focus {
+        z-index: 100;
+    }
+}
+
+.fa-icon-above-input {
+    height: 1.5em;
+}
+
 .table.table-list {
     thead th {
         border-top: none;