Skip Links: Add anchor handlint to events

refs #7933

application/views/scripts/layout/menu.phtml

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

public/js/icinga/events.js

@@ -334,6 +334,17 @@
             return false;
         },
 
+        handleAnchor: function(query) {
+            var element = $(query);
+            if (element.length > 0) {
+                // If we want to focus an element which has no tabindex
+                // add one that we can focus is
+                if (element.prop('tabindex') < 0) {
+                    element.prop('tabindex', 0);
+                }
+                element.focus();
+            }
+        },
 
         /**
          * Someone clicked a link or tr[href]
@@ -383,7 +394,6 @@
                 return;
             }
 
-
             // ignore multiselect table row clicks
             if ($a.is('tr') && $a.closest('table.multiselect').length > 0) {
                 return;
@@ -393,6 +403,12 @@
             event.stopPropagation();
             event.preventDefault();
 
+            // This is an anchor only
+            if (href.substr(0, 1) === '#' && href.substr(1, 1) !== '!') {
+                self.handleAnchor(href);
+                return;
+            }
+
             // If link has hash tag...
             if (href.match(/#/)) {
                 if (href === '#') {