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() {