bug(ngAria): native controls fire a single click event

Author: Marcy Sutton

src/ngAria/aria.js

@@ -83,7 +83,8 @@ function $AriaProvider() {
     ariaMultiline: true,
     ariaValue: true,
     tabindex: true,
-    bindKeypress: true
+    bindKeypress: true,
+    keypressNodeNames: ['DIV', 'LI']
   };
 
   /**
@@ -303,11 +304,18 @@ ngAriaModule.directive('ngShow', ['$aria', function($aria) {
     compile: function(elem, attr) {
       var fn = $parse(attr.ngClick, /* interceptorFn */ null, /* expensiveChecks */ true);
       return function(scope, elem, attr) {
+
+        function isNodeOneOf(elem, nodeTypeArray) {
+          if (nodeTypeArray.indexOf(elem[0].nodeName) !== -1) {
+            return true;
+          }
+        }
+
         if ($aria.config('tabindex') && !elem.attr('tabindex')) {
           elem.attr('tabindex', 0);
         }
 
-        if ($aria.config('bindKeypress') && !attr.ngKeypress) {
+        if ($aria.config('bindKeypress') && !attr.ngKeypress && isNodeOneOf(elem, $aria.config('keypressNodeNames'))) {
           elem.on('keypress', function(event) {
             if (event.keyCode === 32 || event.keyCode === 13) {
               scope.$apply(callback);

test/ngAria/ariaSpec.js

@@ -488,12 +488,24 @@ describe('$aria', function() {
 
     it('should a trigger click from the keyboard', function() {
       scope.someAction = function() {};
-      compileInput('<div ng-click="someAction()" tabindex="0"></div>');
+
+      var elements = $compile('<section>' +
+                  '<div class="div-click" ng-click="someAction(\'div\')" tabindex="0"></div>' +
+                  '<ul><li ng-click="someAction( \'li\')" tabindex="0"></li></ul>' +
+                  '</section>')(scope);
+
+      scope.$digest();
+
       clickFn = spyOn(scope, 'someAction');
 
-      element.triggerHandler({type: 'keypress', keyCode: 32});
+      var divElement = elements.find('div');
+      var liElement = elements.find('li');
+
+      divElement.triggerHandler({type: 'keypress', keyCode: 32});
+      liElement.triggerHandler({type: 'keypress', keyCode: 32});
 
-      expect(clickFn).toHaveBeenCalled();
+      expect(clickFn).toHaveBeenCalledWith('div');
+      expect(clickFn).toHaveBeenCalledWith('li');
     });
 
     it('should not override existing ng-keypress', function() {
@@ -526,6 +538,31 @@ describe('$aria', function() {
       element.triggerHandler({ type: 'keypress', keyCode: 13 });
       expect(element.text()).toBe('keypress13');
     });
+
+    it('should not bind keypress to non-div elements', function() {
+      compileInput('<button ng-click="event = $event">{{event.type}}{{event.keyCode}}</button>');
+      expect(element.text()).toBe('');
+      element.triggerHandler({ type: 'keypress', keyCode: 13 });
+      expect(element.text()).toBe('');
+    });
+  });
+
+  describe('actions for different configured elements', function() {
+    beforeEach(configAriaProvider({
+      keypressNodeNames: ['DIV']
+    }));
+    beforeEach(injectScopeAndCompiler);
+
+    it('should not a trigger click', function() {
+      scope.someAction = function() {};
+      var clickFn = spyOn(scope, 'someAction');
+
+      element = $compile('<li ng-click="someAction()" tabindex="0"></li>')(scope);
+
+      element.triggerHandler({type: 'keypress', keyCode: 32});
+
+      expect(clickFn).not.toHaveBeenCalled();
+    });
   });
 
   describe('actions when bindKeypress set to false', function() {
@@ -534,11 +571,11 @@ describe('$aria', function() {
     }));
     beforeEach(injectScopeAndCompiler);
 
-    it('should not a trigger click from the keyboard', function() {
+    it('should not a trigger click', function() {
       scope.someAction = function() {};
       var clickFn = spyOn(scope, 'someAction');
 
-      element = $compile('<div ng-click="someAction()" tabindex="0">></div>')(scope);
+      element = $compile('<div ng-click="someAction()" tabindex="0"></div>')(scope);
 
       element.triggerHandler({type: 'keypress', keyCode: 32});