diff --git a/bower.json b/bower.json
index 281691b..768ce19 100644
--- a/bower.json
+++ b/bower.json
@@ -21,6 +21,7 @@
"homepage": "https://github.com/PolymerElements/gold-cc-expiration-input",
"ignore": [],
"dependencies": {
+ "iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.1.2",
"iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
"iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
diff --git a/date-input.html b/date-input.html
index b882cca..0cba771 100644
--- a/date-input.html
+++ b/date-input.html
@@ -8,6 +8,7 @@
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
+
@@ -96,6 +97,7 @@
is: 'date-input',
behaviors: [
+ Polymer.IronA11yKeysBehavior,
Polymer.IronValidatableBehavior
],
@@ -170,10 +172,18 @@
}
},
+ keyBindings: {
+ '/': '_selectYear'
+ },
+
observers: [
'_computeDate(month,year)'
],
+ _selectYear: function() {
+ this.$.expirationYear.focus();
+ },
+
_computeDate: function(month, year) {
// Months are 0-11.
this.date = {month: month, year: year};
diff --git a/test/basic.html b/test/basic.html
index 7bf261b..2d719c8 100644
--- a/test/basic.html
+++ b/test/basic.html
@@ -131,6 +131,16 @@
assert.equal(year.placeholder, 'YY', 'year placeholder is YY');
});
+ test('/ key advances to year input', function() {
+ var input = fixture('basic');
+ forceXIfStamp(input);
+ var dateInput = Polymer.dom(input.root).querySelector('date-input');
+ var month = Polymer.dom(dateInput.root).querySelector('#expirationMonth');
+ var year = Polymer.dom(dateInput.root).querySelector('#expirationYear');
+ MockInteractions.pressAndReleaseKeyOn(dateInput, 191, [], '/');
+ assert.equal(Polymer.dom(dateInput.root).activeElement, year, 'year is focused');
+ });
+
});
suite('a11y', function() {