From df8b46b2cba55980c3b956dc615e3366724c884f Mon Sep 17 00:00:00 2001
From: Jon Kuperman <jon.kuperman@gmail.com>
Date: Mon, 5 Dec 2016 17:42:39 -0800
Subject: [PATCH] Add focus ring to about page form elements

---
 app/renderer/components/bookmarksToolbar.js | 4 ++--
 less/bookmarksToolbar.less                  | 6 ++++++
 less/button.less                            | 1 -
 less/forms.less                             | 1 -
 less/navigationBar.less                     | 5 +++++
 5 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/app/renderer/components/bookmarksToolbar.js b/app/renderer/components/bookmarksToolbar.js
index 4fddb034127..867d70e310f 100644
--- a/app/renderer/components/bookmarksToolbar.js
+++ b/app/renderer/components/bookmarksToolbar.js
@@ -172,7 +172,7 @@ class BookmarkToolbarButton extends ImmutableComponent {
         : siteDetailLocation
     }
 
-    return <span
+    return <button
       className={cx({
         bookmarkToolbarButton: true,
         draggingOverLeft: this.isDraggingOverLeft && !this.isExpanded,
@@ -217,7 +217,7 @@ class BookmarkToolbarButton extends ImmutableComponent {
         ? <span className='bookmarkFolderChevron fa fa-chevron-down' />
         : null
       }
-    </span>
+    </button>
   }
 }
 
diff --git a/less/bookmarksToolbar.less b/less/bookmarksToolbar.less
index fe513aa0663..c2dd40f1a30 100644
--- a/less/bookmarksToolbar.less
+++ b/less/bookmarksToolbar.less
@@ -61,6 +61,12 @@
       box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
     }
 
+    &:focus {
+      outline-color: rgb(59, 153, 252);
+      outline-style: auto;
+      outline-width: 5px;
+    }
+
     &.draggingOverLeft {
       &:not(.isDragging) {
         margin-left: 25px;
diff --git a/less/button.less b/less/button.less
index 247e075399b..058974edb29 100644
--- a/less/button.less
+++ b/less/button.less
@@ -6,7 +6,6 @@
 
 button[class*="Button"] {
   background: none;
-  outline: none;
   border: none;
   margin: 0;
   white-space: nowrap;
diff --git a/less/forms.less b/less/forms.less
index b780201679e..18741fb8a8e 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -15,7 +15,6 @@ select {
   color: @darkGray;
   font-size: 14.5px;
   height: 2.25em;
-  outline: none;
   padding: 0.4em;
   width: 100%;
 }
diff --git a/less/navigationBar.less b/less/navigationBar.less
index 7f4cdeed542..f4dec074f83 100644
--- a/less/navigationBar.less
+++ b/less/navigationBar.less
@@ -545,6 +545,11 @@
   }
 }
 
+.navbutton,
+.navigationButton {
+  outline: none;
+}
+
 .navigationButton {
   background-color: @buttonColor;
   display: inline-block;