iron a11y keys behavior not working polymer 2.x

Description

When I press a right key, next function should run, but nothing happens
Here is the code

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-image/iron-image.html">
<link rel="import" href="../bower_components/paper-fab/paper-fab.html">
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">

<dom-module id="st-carousal">
  <template>
    <style>
       :host {
        display: block;
        background: var(--st-light-primary-color);
        width: 100%;
        padding: 0;
      }

      .cover-image {
        width: 70%;

        @apply --layout-horizontal;
        @apply --layout-justified;
        @apply --layout-center;
      }

      paper-fab {
        background: var(--st-secondary-color);
        color: #000;
      }
    </style>
    <center>
      <div class="cover-image">
        <paper-fab icon="st-icons:navigate-before" on-tap="prev" id="showPrev"></paper-fab>
        <iron-pages id="ironPage" selected="[[ selected ]]">
          <slot></slot>
        </iron-pages>
        <paper-fab icon="st-icons:navigate-next" on-tap="next" id="showNext"></paper-fab>
      </div>
    </center>
  </template>
  <script>
    'use strict'
    class StCarousal extends Polymer.mixinBehaviors([Polymer.IronA11yKeysBehavior], Polymer.Element) {
      static get is() { return 'st-carousal'; }

      static get properties() {
        return {
          selected: {
            type: Number,
            value: 0
          },
          /**
            * Transition data for all the animations
            * @return {Object}
            */
          transitionData: {
            type: Object,
            value: () => {
              // Declare variables
              var fabScaleUp, fabScaleDown, slideRight, SlideLeft;

              // Set the Scale up animation keyframes for FAB
              fabScaleUp = {
                transform: [
                  'scale(0, 0)',
                  'scale(1, 1)'
                ]
              };

              // Set the Scale down animation keyframes for FAB
              fabScaleDown = {
                transform: [
                  'scale(1, 1)',
                  'scale(0, 0)'
                ]
              };

              // Set the slide right animation keyframe for carousal items
              slideRight = {
                transform: [
                  'translateX(0)',
                  'translateX(100%)'
                ]
              };

              // Set the slide left animation keyframe for carousal items
              SlideLeft = {
                transform: [
                  'translateX(0)',
                  'translateX(-100%)'
                ]
              }

              return {
                fsu: fabScaleUp,
                fsd: fabScaleDown
              };
            }
          },
        };
      }

      static get keyBindings() {
        return {
          'right': 'next'
        };
      }

      ready() {
        super.ready();
      }

      next() {
        this.$.ironPage.selectNext();
      }

      prev() {
        this.$.ironPage.selectPrevious();
      }
    }

    customElements.define(StCarousal.is, StCarousal);
  </script>
</dom-module>
Tested on

[x] Chrome
[ ] Firefox
[ ] Safari 9
[ ] Safari 8
[ ] Safari 7
[ ] Edge
[ ] IE 11
[ ] IE 10
PolymerElements / iron-a11y-keys-behavior

iron a11y keys behavior not working polymer 2.x #80

Description

Here is the code

Tested on
