cannot add second interaction, openlayers 3

Question

This is my code in Openlayers 3.9.0

<article id="map" class="map"></article>
<script src='/javascripts/js/ol-debug.js'></script>
    <script>


    var layer = new ol.layer.Tile({
        source: new ol.source.OSM()
    });
    var kbz = new ol.interaction.KeyboardZoom();
    var dr = new ol.interaction.DragRotateAndZoom();

var center = ol.proj.transform([-1.812, 52.443], 'EPSG:4326', 'EPSG:3857');
    var view = new ol.View({
        center: center,
        zoom: 6
    });

    var map = new ol.Map({
        target: 'map',
        layers: [layer],
        view: view
    });


    map.addInteraction(kbz);
    map.addInteraction(dr);

</script>

I just want to pass some extra Interactions to the map after I create it. I get no errors in my console. The weird part is that I can dragRotate, this works fine, but the keyboardZoom does not work. I fail to understand why keyboardZoom fails, or how to fix this.

Answer 1

ol.interaction.KeyboardZoom() is enabled by default as docs state:

Allows the user to zoom the map using keyboard + and -. Note that, although this interaction is by default included in maps, the keys can only be used when browser focus is on the element to which the keyboard events are attached. By default, this is the map div, though you can change this with the keyboardEventTarget in ol.Map. document never loses focus but, for any other element, focus will have to be on, and returned to, this element if the keys are to function.

To get it working set a tabindex="0" on you map HTML tag so that your map have focus in. You will click on map and then use + and - keys.