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..e129780 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 ], @@ -174,6 +176,16 @@ '_computeDate(month,year)' ], + keyBindings: { + 'a': '_selectYear', + '@': '_selectYear', + '/': '_selectYear' + }, + + _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..1d09c09 100644 --- a/test/basic.html +++ b/test/basic.html @@ -152,6 +152,16 @@ assert.equal(year.getAttribute('aria-labelledby'), label + ' yearLabel'); }); + test('/ key advances', function() { + var input = fixture('basic'); + var dateInput = input.$$('.paper-input-input'); + var month = dateInput.$$('input:nth-of-type(1)'); + var year = dateInput.$$('input:nth-of-type(2)'); + MockInteractions.focus(input.inputElement); + assert.isTrue(input.focused); + debugger; + }); + });