[FEATURE] Bootstrap slider: extend keyboard navigation (#356)

* Change html structure of slider:
** slider arrows
** slider navigation
** slider content

Add handler to allow changing the current slide by keyboard (pressing enter)
Make whole dot-nativation selectable

felayout_t3kit/dev/js/main/contentElements/bootstrapSlider.js

@@ -10,6 +10,16 @@
       var $control = $this.find('.carousel-control')
       var $btn = $this.find('.carousel__btn')
 
+      // Set tabindex on quicklinks on init
+      $quickLinks.attr('tabindex', 0)
+
+      // add handler to quickLinks to allow changing the slide via enter key
+      $this.on('keydown', $quickLinks, function (e) {
+        if (e.which === 13) {
+          $(e.target).trigger('click')
+        }
+      })
+
       // Enable swipe for each carousel element
       $this.swipe({
         swipe: function (event, direction) {
@@ -58,9 +68,9 @@
         $quickLinks.each(function () {
           var link = $(this)
           if (link.hasClass('active')) {
-            link.attr({'aria-selected': 'true', 'tabindex': '0'})
+            link.attr('aria-selected', 'true')
           } else {
-            link.attr({'aria-selected': 'false', 'tabindex': '-1'})
+            link.attr('aria-selected', 'false')
           }
         })
       }

felayout_t3kit/dev/styles/main/contentElements/bootstrapCarousel.less

@@ -136,6 +136,7 @@
     top: 0;
     left: 0;
     bottom: 0;
+    z-index: 2;
     width: @carousel-control-width;
     font-size: @carousel-control-font-size;
     color: @carousel-control-color;