Fix accessibility issues with saved object finder (elastic#13152)

* Fix accessibility issues with saved object finder and use new kui styles * Dark theme-icy kuiTabs * Refer to existing dark theme color variables. Use dark theme hover link color. * use button instead of div element so no need for kbn-accessible-click * Add dark theme tab variety to ui framework site, lighten color of background tabs
stacey-gammon · Aug 7, 2017 · b109ed1 · b109ed1
1 parent 84a34e3
commit b109ed1
Show file tree

Hide file tree

Showing 8 changed files with 89 additions and 32 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
@@ -4,24 +4,24 @@
 >
   <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">
+    <button
+      ng-class="{ 'kuiTab-isSelected': mode == 'visualization'}"
+      class="kuiTab"
+      ng-click="mode='visualization'"
+      aria-label="List visualizations"
+    >
+      Visualization
+    </button>
+    <button
+      ng-class="{ 'kuiTab-isSelected': mode == 'search' }"
+      class="kuiTab"
+      ng-click="mode='search'"
+      aria-label="List saved searches"
+    >
+      Saved Search
+    </button>
+  </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
@@ -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;
 

diff --git 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
@@ -1,4 +1,10 @@
 $tabBackgroundColor: #FFF;
 $tabHoverBackgroundColor: #F2F2F2;
 
+// Dark theme colors
+$tabColor--darkTheme: $globalTextColor--darkTheme;
+$tabBackgroundColor--darkTheme: #333333;
+$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
@@ -1,6 +1,10 @@
 .kuiTabs {
   display: flex;
   border-bottom: $globalBorderThin;
+
+  @include darkTheme {
+    border-bottom: 1px solid $tabBorderColor--darkTheme;
+  }
 }
 
 
@@ -19,10 +23,15 @@
   color: $globalSubduedTextColor;
   background-color: $tabBackgroundColor; /* 1 */
   border: 1px solid $globalBorderColor;
-  border-bottom-width: 1px;
   border-radius: 0; /* 1 */
   margin-bottom: -1px; /* 3 */
 
+  @include darkTheme {
+    color: $tabColor--darkTheme;
+    background-color: $tabBackgroundColor--darkTheme;
+    border-color: $tabBorderColor--darkTheme;
+  }
+
   & + & {
     border-left: none;
 
@@ -44,16 +53,33 @@
     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 {
+      color: $globalLinkColor-isHover--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
@@ -2921,6 +2921,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).
@@ -2941,11 +2943,14 @@ main {
   background-color: #FFF;
   /* 1 */
   border: 1px solid #D9D9D9;
-  border-bottom-width: 1px;
   border-radius: 0;
   /* 1 */
   margin-bottom: -1px;
   /* 3 */ }
+  .theme-dark .kuiTab {
+    color: #cecece;
+    background-color: #333333;
+    border-color: #777777; }
   .kuiTab + .kuiTab {
     border-left: none; }
     .kuiTab + .kuiTab:focus:not(.kuiTab-isSelected):not(:active) {
@@ -2963,13 +2968,24 @@ 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) {
+      color: #def2f6;
+      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.

diff --git 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
@@ -34,6 +34,13 @@ export default props => (
       <GuideDemo>
         <Tabs />
       </GuideDemo>
+
+      <GuideText>
+        Dark themed tabs
+      </GuideText>
+      <GuideDemo isDarkTheme={true}>
+        <Tabs />
+      </GuideDemo>
     </GuideSection>
 
   </GuidePage>