From bbc77cbcc2b83905541ec31eacd6b80a324bc898 Mon Sep 17 00:00:00 2001
From: Stacey Gammon <gammon@elastic.co>
Date: Thu, 27 Jul 2017 11:24:26 -0400
Subject: [PATCH 1/5] Fix accessibility issues with saved object finder

and use new kui styles
---
 .../public/dashboard/top_nav/add_panel.html   | 38 ++++++++++---------
 .../public/directives/saved_object_finder.js  | 10 -----
 2 files changed, 20 insertions(+), 28 deletions(-)

diff --git a/src/core_plugins/kibana/public/dashboard/top_nav/add_panel.html b/src/core_plugins/kibana/public/dashboard/top_nav/add_panel.html
index 7888e7cae886b..e80a860d8af34 100644
--- a/src/core_plugins/kibana/public/dashboard/top_nav/add_panel.html
+++ b/src/core_plugins/kibana/public/dashboard/top_nav/add_panel.html
@@ -4,24 +4,26 @@
 >
   <div class="kuiLocalDropdownTitle">Add Panels</div>
 
-  <ul class="nav nav-tabs">
-    <li ng-class="{active: mode == 'visualization'}">
-      <a
-        ng-click="mode='visualization'"
-        aria-label="List visualizations"
-      >
-        Visualization
-      </a>
-    </li>
-    <li ng-class="{active: mode == 'search'}">
-      <a
-        ng-click="mode='search'"
-        aria-label="List saved searches"
-      >
-        Saved Search
-      </a>
-    </li>
-  </ul>
+  <div class="kuiTabs">
+    <div
+      kbn-accessible-click
+      ng-class="{ 'kuiTab-isSelected': mode == 'visualization'}"
+      class="kuiTab"
+      ng-click="mode='visualization'"
+      aria-label="List visualizations"
+    >
+      Visualization
+    </div>
+    <div
+      kbn-accessible-click
+      ng-class="{ 'kuiTab-isSelected': mode == 'search' }"
+      class="kuiTab"
+      ng-click="mode='search'"
+      aria-label="List saved searches"
+    >
+      Saved Search
+    </div>
+  </div>
 
   <div class="list-group-item list-group-item--noBorder" ng-switch-when="visualization">
     <saved-object-finder
diff --git a/src/ui/public/directives/saved_object_finder.js b/src/ui/public/directives/saved_object_finder.js
index ef1892641a1a8..74861250ca943 100644
--- a/src/ui/public/directives/saved_object_finder.js
+++ b/src/ui/public/directives/saved_object_finder.js
@@ -134,16 +134,6 @@ module.directive('savedObjectFinder', function ($location, $injector, kbnUrl, Pr
       //key handler for the filter text box
       self.filterKeyDown = function ($event) {
         switch (keyMap[$event.keyCode]) {
-          case 'tab':
-            if (self.hitCount === 0) return;
-
-            self.selector.index = 0;
-            self.selector.enabled = true;
-
-            selectTopHit();
-
-            $event.preventDefault();
-            break;
           case 'enter':
             if (self.hitCount !== 1) return;
 

From d0d39721f54b73ef7c111d030b771fc7d674cf6d Mon Sep 17 00:00:00 2001
From: Stacey Gammon <gammon@elastic.co>
Date: Fri, 28 Jul 2017 17:08:45 -0400
Subject: [PATCH 2/5] Dark theme-icy kuiTabs

---
 src/ui/public/styles/dark-theme.less     | 14 ++++++++++++-
 ui_framework/components/tabs/_index.scss |  6 ++++++
 ui_framework/components/tabs/_tabs.scss  | 25 ++++++++++++++++++++++++
 ui_framework/dist/ui_framework.css       | 15 ++++++++++++++
 4 files changed, 59 insertions(+), 1 deletion(-)

diff --git a/src/ui/public/styles/dark-theme.less b/src/ui/public/styles/dark-theme.less
index 19dec70f9bbf8..335f50392460e 100644
--- a/src/ui/public/styles/dark-theme.less
+++ b/src/ui/public/styles/dark-theme.less
@@ -92,12 +92,16 @@
 // /src/ui/public/styles/bootstrap/list-group.less
   .list-group-item {
     background-color: @list-group-bg;
-    border: 0 none transparent;
+    border: 1px solid @gray7;
     &:nth-child(even) {
       background-color: @gray4;
     }
   }
 
+  .list-group-item--noBorder {
+    border-top: 0;
+  }
+
   a.list-group-item,
   button.list-group-item {
     color: @list-group-link-color;
@@ -224,6 +228,14 @@
     }
   }
 
+  saved-object-finder, paginated-selectable-list {
+    ul.li-striped {
+      li {
+        border: none;
+      }
+    }
+  }
+
   .cell-hover {
     background-color: @table-cell-hover-bg;
 
diff --git a/ui_framework/components/tabs/_index.scss b/ui_framework/components/tabs/_index.scss
index 33057a9568bd5..2bb56edcc7ef9 100644
--- a/ui_framework/components/tabs/_index.scss
+++ b/ui_framework/components/tabs/_index.scss
@@ -1,4 +1,10 @@
 $tabBackgroundColor: #FFF;
 $tabHoverBackgroundColor: #F2F2F2;
 
+// Dark theme colors
+$tabColor--darkTheme: #cecece;
+$tabBackgroundColor--darkTheme: #333333;
+$tabHoverBackgroundColor--darkTheme: #777777;
+$tabBorderColor--darkTheme: #777777;
+
 @import "tabs";
diff --git a/ui_framework/components/tabs/_tabs.scss b/ui_framework/components/tabs/_tabs.scss
index 26df739f9d5f3..3f1a5e378a902 100644
--- a/ui_framework/components/tabs/_tabs.scss
+++ b/ui_framework/components/tabs/_tabs.scss
@@ -1,6 +1,10 @@
 .kuiTabs {
   display: flex;
   border-bottom: $globalBorderThin;
+
+  @include darkTheme {
+    border-bottom: 1px solid $tabBorderColor--darkTheme;
+  }
 }
 
 
@@ -23,6 +27,11 @@
   border-radius: 0; /* 1 */
   margin-bottom: -1px; /* 3 */
 
+  @include darkTheme {
+    background-color: $tabBackgroundColor--darkTheme;
+    border-color: $tabBorderColor--darkTheme;
+  }
+
   & + & {
     border-left: none;
 
@@ -44,16 +53,32 @@
     z-index: 1;
     color: $globalLinkColor;
     border: 1px solid $globalSelectedBorderColor !important;
+
+    @include darkTheme {
+      color: $tabColor--darkTheme;
+      background-color: $tabBackgroundColor--darkTheme;
+      border-color: $tabBorderColor--darkTheme !important;
+    }
   }
 
   &:hover:not(.kuiTab-isSelected) {
     color: $globalLinkHoverColor;
     background-color: $tabHoverBackgroundColor;
+
+    @include darkTheme {
+      background-color: $tabHoverBackgroundColor--darkTheme;
+    }
   }
 
   &.kuiTab-isSelected {
     cursor: default;
     color: $globalFontColor;
     border-bottom-color: $tabBackgroundColor;
+
+    @include darkTheme {
+      color: $tabColor--darkTheme;
+      background-color: $tabBackgroundColor--darkTheme;
+      border-bottom-color: $tabBackgroundColor--darkTheme;
+    }
   }
 }
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index cc9213e37281c..9fe94916cf9e9 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -2913,6 +2913,8 @@ main {
   display: -ms-flexbox;
   display: flex;
   border-bottom: 1px solid #D9D9D9; }
+  .theme-dark .kuiTabs {
+    border-bottom: 1px solid #777777; }
 
 /**
  * 1. Override button styles (some of which are from Bootstrap).
@@ -2938,6 +2940,9 @@ main {
   /* 1 */
   margin-bottom: -1px;
   /* 3 */ }
+  .theme-dark .kuiTab {
+    background-color: #333333;
+    border-color: #777777; }
   .kuiTab + .kuiTab {
     border-left: none; }
     .kuiTab + .kuiTab:focus:not(.kuiTab-isSelected):not(:active) {
@@ -2955,13 +2960,23 @@ main {
     z-index: 1;
     color: #0079a5;
     border: 1px solid #0079a5 !important; }
+    .theme-dark .kuiTab:focus:not(.kuiTab-isSelected):not(:active) {
+      color: #cecece;
+      background-color: #333333;
+      border-color: #777777 !important; }
   .kuiTab:hover:not(.kuiTab-isSelected) {
     color: #006E8A;
     background-color: #F2F2F2; }
+    .theme-dark .kuiTab:hover:not(.kuiTab-isSelected) {
+      background-color: #777777; }
   .kuiTab.kuiTab-isSelected {
     cursor: default;
     color: #191E23;
     border-bottom-color: #FFF; }
+    .theme-dark .kuiTab.kuiTab-isSelected {
+      color: #cecece;
+      background-color: #333333;
+      border-bottom-color: #333333; }
 
 /**
  * 1. Allow container to deteermine font-size and line-height.

From 6ac6015b31fece821c955e1dcecc241dd917123a Mon Sep 17 00:00:00 2001
From: Stacey Gammon <gammon@elastic.co>
Date: Mon, 31 Jul 2017 12:25:25 -0400
Subject: [PATCH 3/5] Refer to existing dark theme color variables.  Use dark
 theme hover link color.

---
 ui_framework/components/tabs/_index.scss | 6 +++---
 ui_framework/components/tabs/_tabs.scss  | 2 +-
 ui_framework/dist/ui_framework.css       | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/ui_framework/components/tabs/_index.scss b/ui_framework/components/tabs/_index.scss
index 2bb56edcc7ef9..b011a64a8852e 100644
--- a/ui_framework/components/tabs/_index.scss
+++ b/ui_framework/components/tabs/_index.scss
@@ -2,9 +2,9 @@ $tabBackgroundColor: #FFF;
 $tabHoverBackgroundColor: #F2F2F2;
 
 // Dark theme colors
-$tabColor--darkTheme: #cecece;
+$tabColor--darkTheme: $globalTextColor--darkTheme;
 $tabBackgroundColor--darkTheme: #333333;
-$tabHoverBackgroundColor--darkTheme: #777777;
-$tabBorderColor--darkTheme: #777777;
+$tabHoverBackgroundColor--darkTheme: $globalBackgroundColor--darkTheme;
+$tabBorderColor--darkTheme: $globalBackgroundColor--darkTheme;
 
 @import "tabs";
diff --git a/ui_framework/components/tabs/_tabs.scss b/ui_framework/components/tabs/_tabs.scss
index 3f1a5e378a902..4332e54c6a1ec 100644
--- a/ui_framework/components/tabs/_tabs.scss
+++ b/ui_framework/components/tabs/_tabs.scss
@@ -23,7 +23,6 @@
   color: $globalSubduedTextColor;
   background-color: $tabBackgroundColor; /* 1 */
   border: 1px solid $globalBorderColor;
-  border-bottom-width: 1px;
   border-radius: 0; /* 1 */
   margin-bottom: -1px; /* 3 */
 
@@ -66,6 +65,7 @@
     background-color: $tabHoverBackgroundColor;
 
     @include darkTheme {
+      color: $globalLinkColor-isHover--darkTheme;
       background-color: $tabHoverBackgroundColor--darkTheme;
     }
   }
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index 9fe94916cf9e9..e122e97b47cba 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -2935,7 +2935,6 @@ main {
   background-color: #FFF;
   /* 1 */
   border: 1px solid #D9D9D9;
-  border-bottom-width: 1px;
   border-radius: 0;
   /* 1 */
   margin-bottom: -1px;
@@ -2968,6 +2967,7 @@ main {
     color: #006E8A;
     background-color: #F2F2F2; }
     .theme-dark .kuiTab:hover:not(.kuiTab-isSelected) {
+      color: #def2f6;
       background-color: #777777; }
   .kuiTab.kuiTab-isSelected {
     cursor: default;

From ae0325bd4cc6b2fbb459308ef686e0fb1d0b2889 Mon Sep 17 00:00:00 2001
From: Stacey Gammon <gammon@elastic.co>
Date: Mon, 31 Jul 2017 12:27:18 -0400
Subject: [PATCH 4/5] use button instead of div element so no need for
 kbn-accessible-click

---
 .../kibana/public/dashboard/top_nav/add_panel.html     | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/core_plugins/kibana/public/dashboard/top_nav/add_panel.html b/src/core_plugins/kibana/public/dashboard/top_nav/add_panel.html
index e80a860d8af34..370f6a10c9297 100644
--- a/src/core_plugins/kibana/public/dashboard/top_nav/add_panel.html
+++ b/src/core_plugins/kibana/public/dashboard/top_nav/add_panel.html
@@ -5,24 +5,22 @@
   <div class="kuiLocalDropdownTitle">Add Panels</div>
 
   <div class="kuiTabs">
-    <div
-      kbn-accessible-click
+    <button
       ng-class="{ 'kuiTab-isSelected': mode == 'visualization'}"
       class="kuiTab"
       ng-click="mode='visualization'"
       aria-label="List visualizations"
     >
       Visualization
-    </div>
-    <div
-      kbn-accessible-click
+    </button>
+    <button
       ng-class="{ 'kuiTab-isSelected': mode == 'search' }"
       class="kuiTab"
       ng-click="mode='search'"
       aria-label="List saved searches"
     >
       Saved Search
-    </div>
+    </button>
   </div>
 
   <div class="list-group-item list-group-item--noBorder" ng-switch-when="visualization">

From 98147ae2402de67af89182a14f2f73820480d39d Mon Sep 17 00:00:00 2001
From: Stacey Gammon <gammon@elastic.co>
Date: Wed, 2 Aug 2017 11:04:29 -0400
Subject: [PATCH 5/5] Add dark theme tab variety to ui framework site, lighten
 color of background tabs

---
 ui_framework/components/tabs/_tabs.scss              | 1 +
 ui_framework/dist/ui_framework.css                   | 1 +
 ui_framework/doc_site/src/views/tabs/tabs.js         | 2 +-
 ui_framework/doc_site/src/views/tabs/tabs_example.js | 7 +++++++
 4 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/ui_framework/components/tabs/_tabs.scss b/ui_framework/components/tabs/_tabs.scss
index 4332e54c6a1ec..c8a446d1b8190 100644
--- a/ui_framework/components/tabs/_tabs.scss
+++ b/ui_framework/components/tabs/_tabs.scss
@@ -27,6 +27,7 @@
   margin-bottom: -1px; /* 3 */
 
   @include darkTheme {
+    color: $tabColor--darkTheme;
     background-color: $tabBackgroundColor--darkTheme;
     border-color: $tabBorderColor--darkTheme;
   }
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index e122e97b47cba..77cbe61dcbd37 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -2940,6 +2940,7 @@ main {
   margin-bottom: -1px;
   /* 3 */ }
   .theme-dark .kuiTab {
+    color: #cecece;
     background-color: #333333;
     border-color: #777777; }
   .kuiTab + .kuiTab {
diff --git a/ui_framework/doc_site/src/views/tabs/tabs.js b/ui_framework/doc_site/src/views/tabs/tabs.js
index bbc05bfe48932..75c2bf5cf6218 100644
--- a/ui_framework/doc_site/src/views/tabs/tabs.js
+++ b/ui_framework/doc_site/src/views/tabs/tabs.js
@@ -32,7 +32,7 @@ class KuiTabsExample extends React.Component {
     this.setState({
       selectedTabId: id,
     });
-  }
+  };
 
   renderTabs() {
     return this.tabs.map((tab,index) => (
diff --git a/ui_framework/doc_site/src/views/tabs/tabs_example.js b/ui_framework/doc_site/src/views/tabs/tabs_example.js
index 19042158f8b01..7097c4a70e109 100644
--- a/ui_framework/doc_site/src/views/tabs/tabs_example.js
+++ b/ui_framework/doc_site/src/views/tabs/tabs_example.js
@@ -34,6 +34,13 @@ export default props => (
       <GuideDemo>
         <Tabs />
       </GuideDemo>
+
+      <GuideText>
+        Dark themed tabs
+      </GuideText>
+      <GuideDemo isDarkTheme={true}>
+        <Tabs />
+      </GuideDemo>
     </GuideSection>
 
   </GuidePage>