Add focus ring to about page form elements

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>
   }
 }
 

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;

less/button.less

@@ -6,7 +6,6 @@
 
 button[class*="Button"] {
   background: none;
-  outline: none;
   border: none;
   margin: 0;
   white-space: nowrap;

less/forms.less

@@ -15,7 +15,6 @@ select {
   color: @darkGray;
   font-size: 14.5px;
   height: 2.25em;
-  outline: none;
   padding: 0.4em;
   width: 100%;
 }

less/navigationBar.less

@@ -545,6 +545,11 @@
   }
 }
 
+.navbutton,
+.navigationButton {
+  outline: none;
+}
+
 .navigationButton {
   background-color: @buttonColor;
   display: inline-block;