Add focus ring to about page form elements

brave · Jan 17, 2017 · dc7ac81 · dc7ac81
1 parent 9b25725
commit dc7ac81
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -545,6 +545,11 @@
   }
 }
 
+.navbutton,
+.navigationButton {
+  outline: none;
+}
+
 .navigationButton {
   background-color: @buttonColor;
   display: inline-block;