Improve tab styles for accessibility

library/Icinga/Web/Widget/Tabs.php

@@ -35,9 +35,9 @@ EOT;
      * @var string
      */
     private $dropdownTpl = <<< 'EOT'
-<li class="dropdown">
+<li class="dropdown-nav-item">
   <a href="#" class="dropdown-toggle"><i aria-hidden="true" class="icon-down-open"></i></a>
-  <ul class="dropdown-menu">
+  <ul class="nav">
     {TABS}
   </ul>
 </li>
@@ -50,7 +50,7 @@ EOT;
      */
     private $closeTpl = <<< 'EOT'
 <li class="dropdown" style="float: right;">
-  <a href="#" class="dropdown-toggle close-container-control">
+  <a href="#" class="close-container-control">
     <i aria-hidden="true" class="icon-cancel"></i>
   </a>
 </li>
@@ -63,7 +63,7 @@ EOT;
      */
     private $refreshTpl = <<< 'EOT'
 <li>
-  <a class="spinner" href="{URL}" title="{TITLE}" aria-label="{LABEL}">
+  <a class="refresh-container-control spinner" href="{URL}" title="{TITLE}" aria-label="{LABEL}">
     <i aria-hidden="true" class="icon-cw"></i>
   </a>
 </li>

public/css/icinga/nav.less

@@ -10,12 +10,14 @@
   }
 }
 
-.nav-item {
+.dropdown-nav-item > ul {
-  > a,
+  display: none;
-  > span {
+  position: absolute;
-    // Rollover
+}
-    display: block;
+
-  }
+.dropdown-nav-item.active > ul,
+.dropdown-nav-item:hover > ul {
+  display: block;
 }
 
 .nav {
@@ -23,12 +25,18 @@
   list-style-type: none;
   margin: 0;
   padding: 0;
+
+  li > a,
+  li > span {
+    // Rollover
+    display: block;
+  }
 }
 
 .tab-nav {
   .clearfix();
 
-  > .nav-item {
+  > li {
     float: left;
   }
 }

public/css/icinga/tabs.less

@@ -1,130 +1,107 @@
 /*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
 
-ul.tabs li {
+// Styles for tab navigation of containers
+
+.tabs {
+  letter-spacing: -0.417em;
+}
+
+.tabs > li {
   display: inline-block;
+  letter-spacing: normal;
 }
 
-ul.tabs li a {
+.tabs {
-  text-decoration: none;
+  height: 2.6em;
-  display: block;
+
-  padding: 0 1em;
+  a {
-  line-height: 2.6em;
+    padding: 0 1em;
-  white-space: nowrap;
+    line-height: 2.6em;
-  color: #ddd;
+
-  outline: 0;
+    &:focus {
+      outline-offset: -0.5em;
+    }
+  }
+}
+
+.tabs > li {
   margin-right: 0.5em;
+
+  > a {
+    color: @body-bg-color;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &.active {
+    background-color: @body-bg-color;
+
+    > a {
+      color: @text-color;
+    }
+  }
+
+  &:last-child {
+    margin-right: 0;
+  }
 }
 
-ul.tabs > li > a {
+.tabs > .dropdown-nav-item > a,
-  color: white;
+.tabs > li > .close-container-control,
+.tabs > li > .refresh-container-control {
+  text-align: center;
+  width: 3em;
 }
 
-ul.tabs > li > a:focus {
+.tabs > .dropdown-nav-item:hover > a,
-  color: @colorTextDefault;
+.tabs > .dropdown-nav-item > a:focus,
-  text-shadow: none;
+.tabs > li > .close-container-control:focus,
+.tabs > li > .close-container-control:hover,
+.tabs > li > .refresh-container-control:focus,
+.tabs > li > .refresh-container-control:hover {
+  background-color: @body-bg-color;
+  color: @text-color;
+  text-decoration: none;
 }
 
-ul.tabs > li.active > a:focus {
+.tabs > .dropdown-nav-item > ul {
-  text-shadow: none;
+  .box-shadow();
-  color: @colorTextDefault;
+  .rounded-corners(0 0 0.3em 0.3em);
-}
 
-ul.tabs li.dropdown > a{
+  background-color: @body-bg-color;
-  padding: 0 0.4em;
+  border: 1px solid @gray-light;
-}
-
-ul.tabs li.active a, ul.tabs li.dropdown:hover a, ul.tabs li.dropdown.hover a {
-  background-color: white;
-  color: black;
-}
-
-ul.tabs li a:hover {
-  text-decoration: underline;
-}
-
-ul.dropdown-menu {
-  margin: 0;
-  padding: 0;
-  background-color: #eee;
-  position: absolute;
-  overflow: hidden;
-  z-index: 1000;
-  border: 1px solid #d9d9d9;
   border-top: none;
   margin-left: -1px;
+  width: 14em;
 }
 
-/* Dropdown tabs after the fourth title should be right-aligned */
+.tabs > .dropdown-nav-item > ul > li:hover {
-ul.tabs li:nth-child(n+5) ul.dropdown-menu {
+  > a {
-  width: 13em;
+    background-color: @gray-lighter;
-  margin-left: -11em;
+    text-decoration: none;
+  }
 }
 
-ul.dropdown-menu {
+// Dropdown tabs after the fourth title should be right-aligned
-  box-shadow: 0.2em 0.2em 0.3em -0.2em #555;
+.tabs > li:nth-child(n+5).dropdown-nav-item > ul {
-  -moz-box-shadow: 0.2em 0.2em 0.3em -0.2em #555;
+  // Offset according to width
-  -webkit-box-shadow: 0.2em 0.2em 0.3em -0.2em #555;
+  margin-left: -10.95em;
-  border-radius: 0 0 3px 3px;
+  margin-right: 1px;
-  -moz-border-radius: 0 0 3px 3px;
-  -webkit-border-radius: 0 0 3px 3px;
 }
 
-ul.dropdown-menu li {
+// TODO(el): Rename display-on-hover and move it to main.less
-  background-color: white;
+.display-on-hover {
-}
+  font-size: @font-size-small;
-
+  left: -999em;
-ul.dropdown-menu li {
-  display: block;
-}
-
-ul.tabs ul.dropdown-menu {
-  display: none;
-}
-
-ul.tabs ul.dropdown-menu li a {
-  color: @colorTextDarkDefault;
-  margin: 0em;
-}
-
-ul.tabs ul.dropdown-menu li a:focus {
-  color: #333;
-}
-
-ul.tabs ul.dropdown-menu li a:hover, ul.tabs ul.dropdown-menu li a:focus {
-  background-color: #ccc;
-  color: #333;
-}
-
-ul.tabs li.dropdown:hover a {
-  text-decoration: none;
-  color: @colorTextDarkDefault;
-}
-
-li.dropdown:hover ul.dropdown-menu, li.dropdown.hover ul.dropdown-menu {
-  display: block;
-}
-
-ul.tabs img.icon {
-    margin-right: 4px;
-    margin-top: -4px;
-}
-
-a.close-tab {
-  display: none;
-}
-
-span.display-on-hover {
-  font-size: 0.8em;
-  left: -9000px;
   position: relative;
-  display: inline;
+
-  width: 0;
+  &:focus {
-  overflow: hidden;
+    position: static;
-  color: #000000;
+  }
-  text-decoration: none;
 }
 
-:hover > span.display-on-hover, :focus > span.display-on-hover {
+li:hover > a > .display-on-hover {
-  left:1em; width:12em;
+  position: static;
-  text-align: center
 }