Skip Links: Add to body and create style

refs #7933

application/layouts/scripts/body.phtml

@@ -7,6 +7,22 @@ use Icinga\Authentication\Manager as Auth;
 
 if (Auth::getInstance()->isAuthenticated()): ?>
  <div id="header">
+   <div class="skip-links">
+     <nav>
+       <h1 class="sr-only"><?= t('Accessibility Skip Links'); ?></h1>
+       <ul>
+         <li>
+           <a tabindex="0" href="#main"><?= t('Skip to Content'); ?></a>
+         </li>
+         <li>
+           <a tabindex="0" href="#search"><?= t('Skip to Search'); ?></a>
+         </li>
+         <li>
+           <a tabindex="0" href="#navigation"><?= t('Skip to Navigation'); ?></a>
+         </li>
+       </ul>
+     </nav>
+   </div>
    <ul id="notifications"><?php
 
 $moduleName = $this->layout()->moduleName;

application/views/scripts/layout/menu.phtml

@@ -5,9 +5,10 @@ use Icinga\Web\Widget\SearchDashboard;
 <? if (SearchDashboard::search('dummy')->getPane('search')->hasDashlets()): ?>
     <form action="<?= $this->href('search') ?>" method="get" role="search">
         <input
-            type="text" name="q" class="search" placeholder="<?= $this->translate('Search...') ?>"
+            type="text" name="q" id="search" class="search" placeholder="<?= $this->translate('Search...') ?>"
             autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
         />
     </form>
 <? endif; ?>
 <?= $menuRenderer; ?>
+

public/css/icinga/defaults.less

@@ -1,5 +1,31 @@
 /*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
 
+/* Color definitions */
+@colorGray: #f9f9f9;
+@colorLinkDefault: #049baf;
+@colorTextDefault: #666;
+@colorTextDarkDefault: #555;
+@colorPetrol: #049baf;
+@colorOk: #44bb77;
+@colorWarning: #ffaa44;
+@colorWarningHandled: #ffcc66;
+@colorCritical: #ff5566;
+@colorCriticalHandled: #ff99aa;
+/*
+@colorUnknown: #dd66ff;
+@colorUnknownHandled: #ee99ff;
+@colorUnreachable: #dd66ff;
+@colorUnreachableHandled: #ee99ff;
+*/
+@colorUnknown: #aa44ff;
+@colorUnknownHandled: #cc77ff;
+@colorUnreachable: #aa44ff;
+@colorUnreachableHandled: #cc77ff;
+@colorPending: #77aaff;
+@colorInvalid: #999;
+
+
+
 /*** Base rules ***/
 * {
   font-size: 100%;

public/css/icinga/layout-colors.less

@@ -39,26 +39,3 @@
   }
 }
 
-@colorLinkDefault: #049baf;
-@colorTextDefault: #666;
-@colorTextDarkDefault: #555;
-@colorPetrol: #049baf;
-@colorOk: #44bb77;
-@colorWarning: #ffaa44;
-@colorWarningHandled: #ffcc66;
-@colorCritical: #ff5566;
-@colorCriticalHandled: #ff99aa;
-/*
-@colorUnknown: #dd66ff;
-@colorUnknownHandled: #ee99ff;
-@colorUnreachable: #dd66ff;
-@colorUnreachableHandled: #ee99ff;
-*/
-@colorUnknown: #aa44ff;
-@colorUnknownHandled: #cc77ff;
-@colorUnreachable: #aa44ff;
-@colorUnreachableHandled: #cc77ff;
-
-@colorPending: #77aaff;
-@colorInvalid: #999;
-

public/css/icinga/layout-structure.less

@@ -355,3 +355,18 @@ html {
   vertical-align: top;
   width: 2em;
 }
+
+/*
+ * Class to hide content from users but available for screen reader
+ * @todo(mh): Replace .audible class
+ */
+.sr-only {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}

public/css/icinga/menu.less

@@ -267,3 +267,36 @@ a:focus {
   color: #21b5ad;
   outline: none;
 }
+
+/* Accessibility Skip Links */
+.skip-links {
+  position: absolute;
+  opacity: 1;
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    li {
+      display: inline;
+      margin: 0;
+      padding: 0;
+      a {
+        position: absolute;
+        display: block;
+        left: -999em;
+        width: 10.4em;
+        top: 0.4em;
+        padding: 0.8em;
+        background-color: white;
+        z-index: 4;
+        border: 1px @colorGray solid;
+        &:focus {
+          left: 0;
+        }
+      }
+    }
+  }
+}
+.skip-links-inline {
+  margin-top: -3.5em;
+}