Polymer element's on-keypress won't fire - polymer

Question

I bind a on-keypress event on my element with Declarative event mapping, but the keypressHandler wont fire. I did try the answer from another question, still the same. Here is my DOME, my element is gdg-slider.html, and all the codes are on github.
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/core-icons/core-icons.html">
<link href="bower_components/core-animated-pages/core-animated-pages.html" rel="import">
<link href="bower_components/core-animated-pages/transitions/cross-fade.html" rel="import">
<link href="bower_components/core-animated-pages/transitions/slide-from-right.html" rel="import">
<link rel="import" href="bower_components/paper-shadow/paper-shadow.html">
<link rel="import" href="bower_components/paper-fab/paper-fab.html">
<polymer-element name="gdg-slider" on-keypress="{{keypressHandler}}">
<template>
<style>
core-animated-pages{
position: absolute;
top: 0px;
right: 0;
bottom: 0;
left: 0;
font-size: 32px;
overflow: hidden;
background-color: #222;
color: #eee;
}
p,h1,h2,h3,h4,h5{
padding: 5px;
margin: 0;
word-break: break-all;
}
h1{
padding: 10px;
}
section{
width: 100%;
}
section > div {
height: 100%;
padding: 0 30px;
}
section.nav{
position: absolute;
bottom: 30px;
left: 0;
}
section.nav>div{
padding: 0 30px;
}
section.nav>div:first-child{
padding-right: 0;
}
#preBtn{
background: #999;
}
.me{
border-radius: 500px;
}
code{
color: #9f499b;
padding: 0 5px;
}
div{
padding: 5px;
}
a,a:active,a:visited,a:link{
padding: 0 5px;
color: #e7ad52 !important;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
.right{
position: absolute;
top: -90px;
left: -90px;
width: 170px;
height: 170px;
-webkit-transform: rotate(-45deg);
font-size: 14px;
background: #999;
font-weight: bold;
color: #fff;
}
</style>
<core-animated-pages id="pages" transitions="slide-from-right" selected="{{pageIndex}}">
<section style="overflow: hidden;">
<p class="right" layout vertical center end-justified><span>Powered by Polymer</span><paper-shadow z="5"></paper-shadow></p>
<div layout vertical center center-justified>
<img src="resources/images/p-logo.svg"/>
<h1>Polymer</h1>
<p>Welcome To The World Of Tomorrow!</p>
</div>
</section>
<section>
<div layout vertical center-justified>
</div>
</section>
//more sections...
</core-animated-pages>
<section class="nav" layout horizontal end-justified>
<div layout horizontal><paper-fab start-justified icon="icons:arrow-back" id="preBtn" on-click="{{prePage}}"><paper-shadow z="5"></paper-shadow></paper-fab></div>
<div layout horizontal><paper-fab icon="icons:arrow-forward" id="nextBtn" on-click="{{nextPage}}"><paper-shadow z="5"></paper-shadow></paper-fab></div>
</section>
</template>
<script>
Polymer('gdg-slider',{
pageIndex: 0,
pageMax: 0,
ready: function(){
this.pageMax = this.$.pages.children.length-1;
this.$.pages.focus();
this.pageIndex = parseInt(window.location.hash.replace('#','') || 0);
this.toggleBtns();
},
keypressHandler: function(event, detail, sender){
var code = event.keyCode;
if(code==32 || code==39){
this.nextPage();
}else if(code==37){
this.prePage();
}
},
prePage: function(){
this.pageIndex -= 1;
if(this.pageIndex <= 0) {
this.pageIndex = 0;
}
window.location.hash = this.pageIndex;
this.toggleBtns();
},
nextPage: function() {
this.pageIndex += 1;
if(this.pageIndex >= this.pageMax) {
this.pageIndex = this.pageMax;
}
window.location.hash = this.pageIndex;
this.toggleBtns();
},
toggleBtns: function(){
if(this.pageIndex >= this.pageMax) {
this.$.nextBtn.hidden = true;
}else{
this.$.nextBtn.removeAttribute('hidden');
}
if(this.pageIndex <= 0) {
this.$.preBtn.hidden = true;
}else{
this.$.preBtn.removeAttribute('hidden');
}
}
});
</script>
</polymer-element>

Answer 1

You're calling this.$.pages.focus(), but you haven't given #pages a tabindex, so it's not focusable. That's why your keypress events aren't firing.
Add tabindex="0" to #pages to fix it.
Here's a working jsbin.