[Event.buttonclick] make buttonclick work on RETURN/SPACE keydown

lib/OpenLayers/Events.js

@@ -20,6 +20,12 @@ OpenLayers.Event = {
      * element._eventCacheID 
      */
     observers: false,
+
+    /**
+     * Constant: KEY_SPACE
+     * {int}
+     */
+    KEY_SPACE: 32,
     
     /** 
      * Constant: KEY_BACKSPACE 
@@ -388,7 +394,8 @@ OpenLayers.Events = OpenLayers.Class({
         "mousedown", "mouseup", "mousemove", 
         "click", "dblclick", "rightclick", "dblrightclick",
         "resize", "focus", "blur",
-        "touchstart", "touchmove", "touchend"
+        "touchstart", "touchmove", "touchend",
+        "keydown"
     ],
 
     /** 

lib/OpenLayers/Events/buttonclick.js

@@ -39,7 +39,7 @@ OpenLayers.Events.buttonclick = OpenLayers.Class({
      */
     events: [
         'mousedown', 'mouseup', 'click', 'dblclick',
-        'touchstart', 'touchmove', 'touchend'
+        'touchstart', 'touchmove', 'touchend', 'keydown'
     ],
     
     /**
@@ -112,6 +112,18 @@ OpenLayers.Events.buttonclick = OpenLayers.Class({
                 element = element.parentNode;
             }
             if (OpenLayers.Element.hasClass(element, "olButton")) {
+                if (evt.type === "keydown") {
+                    switch (evt.keyCode) {
+                    case OpenLayers.Event.KEY_RETURN:
+                    case OpenLayers.Event.KEY_SPACE:
+                        this.target.triggerEvent("buttonclick", {
+                            buttonElement: element
+                        });
+                        OpenLayers.Event.stop(evt);
+                        propagate = false;
+                        break;
+                    }
+                }
                 if (this.startEvt) {
                     if (this.completeRegEx.test(evt.type)) {
                         var pos = OpenLayers.Util.pagePosition(element);

tests/Events/buttonclick.html

@@ -29,7 +29,7 @@
     }
     
     function test_ButtonClick_buttonClick(t) {
-        t.plan(23);
+        t.plan(27);
         events = new OpenLayers.Events({}, element);
         events.on({
             "buttonclick": logEvent,
@@ -38,7 +38,8 @@
             "click": logEvent,
             "dblclick": logEvent,
             "touchstart": logEvent,
-            "touchend": logEvent
+            "touchend": logEvent,
+            "keydown": logEvent
         });
         buttonClick = events.extensions["buttonclick"];
         
@@ -111,12 +112,26 @@
         t.eq(log[1].type, "buttonclick", "buttonclick for 2nd click IE");
 
         // rightclick
-        log = []
+        log = [];
         trigger({type: "mousedown", button: 2});
         trigger({type: "mouseup", button: 2});
         t.eq(log.length, 2, "two events fired for rightclick");
         t.eq(log[0].type, "mousedown", "mousedown from rightclick goes through");
         t.eq(log[1].type, "mouseup", "mouseup from rightclick goes through");
+
+        // keydown RETURN
+        log = [];
+        trigger({type: "keydown", keyCode: OpenLayers.Event.KEY_RETURN});
+        trigger({type: "click"});
+        t.eq(log.length, 1, "one event fired for RETURN keydown");
+        t.eq(log[0].type, "buttonclick", "buttonclick for RETURN keydown");
+
+        // keydown SPACE
+        log = [];
+        trigger({type: "keydown", keyCode: OpenLayers.Event.KEY_SPACE});
+        trigger({type: "click"});
+        t.eq(log.length, 1, "one event fired for SPACE keydown");
+        t.eq(log[0].type, "buttonclick", "buttonclick for SPACE keydown");
     }
   </script>
 </head>