Use button instead of fake button

3 files changed, 26 insertions, 7 deletions

diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js b/app/assets/javascripts/filtered_search/filtered_search_manager.js
index c6118bc1282..4f0bba81e26 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js
@@ -500,6 +500,10 @@ class FilteredSearchManager {
 
   searchState(e) {
     const target = e.currentTarget;
+
+    // remove focus outline after click
+    target.blur();
+
     // return class name that has a prefix of `state-`
     const stateClassName = [].find.call(target.classList, name => name.match(/(state-)(\w+)/g));
     const state = stateClassName.replace('state-', '');
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index f64d9a4cabc..3787ef370b2 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -46,7 +46,7 @@
     display: flex;
 
     a,
-    .div-btn {
+    .btn-link {
       padding: $gl-btn-padding;
       padding-bottom: 11px;
       font-size: 14px;
@@ -68,14 +68,29 @@
       }
     }
 
-    .div-btn {
+    .btn-link {
       padding-top: 16px;
       padding-left: 15px;
       padding-right: 15px;
+      border-left: none;
+      border-right: none;
+      border-top: none;
+      border-radius: 0;
+
+      &:hover,
+      &:active,
+      &:focus {
+        background-color: transparent;
+      }
+
+      &:active {
+        outline: 0;
+        box-shadow: none;
+      }
     }
 
     &.active a,
-    &.active .div-btn {
+    &.active .btn-link {
       border-bottom: 2px solid $link-underline-blue;
       color: $black;
       font-weight: 600;
diff --git a/app/views/shared/issuable/_nav.html.haml b/app/views/shared/issuable/_nav.html.haml
index cacce91280e..a530c0e7f5a 100644
--- a/app/views/shared/issuable/_nav.html.haml
+++ b/app/views/shared/issuable/_nav.html.haml
@@ -5,20 +5,20 @@
 
 %ul.nav-links.issues-state-filters
   %li{ class: active_when(params[:state] == 'opened') }>
-    .div-btn.state-opened{ id: 'state-opened', title: "Filter by #{page_context_word} that are currently opened.", role: 'button' }
+    %button.btn.btn-link.state-opened{ id: 'state-opened', title: "Filter by #{page_context_word} that are currently opened.", type: 'button' }
       #{issuables_state_counter_text(type, :opened)}
 
   - if type == :merge_requests
     %li{ class: active_when(params[:state] == 'merged') }>
-      .div-btn.state-merged{ id: 'state-merged', title: 'Filter by merge requests that are currently merged.', role: 'button' }
+      %button.btn.btn-link.state-merged{ id: 'state-merged', title: 'Filter by merge requests that are currently merged.', type: 'button' }
         #{issuables_state_counter_text(type, :merged)}
 
     - closed_title = 'Filter by merge requests that are currently closed and unmerged.'
 
   %li{ class: active_when(params[:state] == 'closed') }>
-    .div-btn.state-closed{ id: 'state-closed', title: closed_title, role: 'button' }
+    %button.btn.btn-link.state-closed{ id: 'state-closed', title: closed_title, type: 'button' }
       #{issuables_state_counter_text(type, :closed)}
 
   %li{ class: active_when(params[:state] == 'all') }>
-    .div-btn.state-all{ id: 'state-all', title: "Show all #{page_context_word}.", role: 'button' }
+    %button.btn.btn-link.state-all{ id: 'state-all', title: "Show all #{page_context_word}.", type: 'button' }
       #{issuables_state_counter_text(type, :all)}