Menu: Add html5 nav element to menu

refs #7933

application/views/scripts/layout/menu.phtml

@@ -10,6 +10,7 @@ use Icinga\Web\Widget\SearchDashboard;
         />
     </form>
 <? endif; ?>
-<h1 id="navigation" class="sr-only"><?= t('Navigation'); ?></h1>
-<?= $menuRenderer; ?>
-
+<nav>
+    <h1 id="navigation" class="sr-only"><?= t('Navigation'); ?></h1>
+    <?= $menuRenderer; ?>
+</nav>

library/Icinga/Web/MenuRenderer.php

@@ -61,7 +61,7 @@ class MenuRenderer extends RecursiveIteratorIterator
      */
     public function beginIteration()
     {
-        $this->tags[] = '<ul role="navigation">';
+        $this->tags[] = '<ul>';
     }
 
     /**

public/css/icinga/menu.less

@@ -27,55 +27,55 @@
   margin-left: 0.0em;
 }
 
-#menu > ul > li > ul {
+#menu > nav > ul > li > ul {
   display: none;
   padding-left: 6px;
 }
 
-.no-js #menu > ul > li > ul {
+.no-js #menu > nav > ul > li > ul {
   display: block;
 }
 
-#menu > ul > li.active > ul {
+#menu > nav > ul > li.active > ul {
   display: block;
 }
 
-#menu > ul > li.active {
+#menu > nav > ul > li.active {
   background-color: white;
   padding-left: 0.0em;
   margin-left: 0;
   margin-right: 0;
 }
 
-#menu > ul > li > a {
+#menu > nav > ul > li > a {
   font-size: 0.9em;
   text-shadow: none;
 }
 
-#menu > ul > li.active > a {
+#menu > nav > ul > li.active > a {
   color: @colorTextDefault;
   text-shadow: none;
 }
 
-#menu > ul > li.active li.active a {
+#menu > nav > ul > li.active li.active a {
   color: @colorPetrol;
 }
 
-#menu > ul > li.active li a:hover {
+#menu > nav > ul > li.active li a:hover {
   text-decoration: underline;
 }
 
-#menu > ul > li {
+#menu > nav > ul > li {
   border-bottom: 1px solid #d9d9d9;
 }
 
-#menu > ul > li li {
+#menu > nav > ul > li li {
   font-size: 0.8em;
   padding-left: 1.6em;
 }
 
 /* Collapsed menu item color */
-#menu > ul > li > a {
+#menu > nav > ul > li > a {
   color: @colorTextDefault;
 }
 
@@ -110,11 +110,11 @@
   padding-bottom: 1em;
 }
 
-#menu > ul > li {
+#menu > nav > ul > li {
   margin-left: 5px;
 }
 
-#menu > ul > li.active {
+#menu > nav > ul > li.active {
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   box-shadow: none;
@@ -262,7 +262,7 @@ a:focus {
 /* Displaying the outline in the navigation is not possible because of the messed up link borders,
    color those links instead. */
 #menu a:focus,
-#menu > ul > li > a:focus,
+#menu > nav > ul > li > a:focus,
 #menu .active ul li a:focus {
   color: #21b5ad;
   outline: none;