Add keyboard navigation for lists (#360)

resolves #106 

## blocked by:
- Icinga/icingaweb2#5049

Author: nilmerg

library/Icingadb/Common/DetailActions.php

@@ -51,6 +51,11 @@ public function initializeDetailActions(): self
             })
             ->registerAttributeCallback('data-icinga-multiselect-count-label', function () {
                 return $this->getDetailActionsDisabled() ? null : t('%d Item(s) selected');
+            })
+            ->registerAttributeCallback('data-icinga-multiselect-hint-label', function () {
+                return $this->getDetailActionsDisabled()
+                    ? null
+                    : t('Use shift/cmd + click/arrow keys to select multiple items');
             });
 
         return $this;

library/Icingadb/Common/LoadMore.php

@@ -100,7 +100,10 @@ protected function getIterator(ResultSet $result): Generator
                     ->setAnchor('page-' . ($pageNumber))
             ))
                 ->setLabel(t('Load More'))
-                ->setAttribute('data-no-icinga-ajax', true);
+                ->setAttributes([
+                    'class' => 'load-more',
+                    'data-no-icinga-ajax' => true
+                ]);
 
             $this->add($showMore->setTag('li')->addAttributes(['class' => 'list-item']));
         }

public/css/common.less

@@ -272,6 +272,10 @@ div.show-more {
 
     .selected-items {
       font-size: 1.25em;
+
+      &.hint {
+        opacity: 0.75;
+      }
     }
   }
 

public/css/list/item-list.less

@@ -8,12 +8,12 @@
     background-color: @gray-lighter;
   }
 
-  .show-more:hover,
+  .load-more:hover,
   .page-separator:hover {
     background: none;
   }
 
-  > .show-more a {
+  > .load-more a {
     .rounded-corners(.25em);
     background: @low-sat-blue;
     text-align: center;
@@ -57,7 +57,7 @@
   .list-item {
     display: flex;
 
-    &.show-more a {
+    &.load-more a {
       flex: 1;
       margin: 1.5em 0;
       padding: .5em 0;