Merge pull request #223 from camptocamp/access_panelbutton

make it possible to create accessible panel buttons

lib/OpenLayers/Control/Panel.js

@@ -245,26 +245,58 @@ OpenLayers.Control.Panel = OpenLayers.Class(OpenLayers.Control, {
             controls = [controls];
         }
         this.controls = this.controls.concat(controls);
-        
-        // Give each control a panel_div which will be used later.
-        // Access to this div is via the panel_div attribute of the 
-        // control added to the panel.
-        // Also, stop mousedowns and clicks, but don't stop mouseup,
-        // since they need to pass through.
+
         for (var i=0, len=controls.length; i<len; i++) {
-            var element = document.createElement("div");
-            element.className = controls[i].displayClass + "ItemInactive olButton";
-            controls[i].panel_div = element;
-            if (controls[i].title != "") {
-                controls[i].panel_div.title = controls[i].title;
+            var control = controls[i],
+                element = this.createControlMarkup(control);
+            OpenLayers.Element.addClass(element, 
+                                        control.displayClass + "ItemInactive");
+            OpenLayers.Element.addClass(element, "olButton");
+            if (control.title != ""  && !element.title) {
+                element.title = control.title;
             }
-        }    
+            control.panel_div = element;
+        }
 
         if (this.map) { // map.addControl() has already been called on the panel
             this.addControlsToMap(controls);
             this.redraw();
         }
     },
+
+    /**
+     * APIMethod: createControlMarkup
+     * This function just creates a div for the control. If specific HTML
+     * markup is needed this function can be overridden in specific classes,
+     * or at panel instantiation time:
+     *
+     * Example:
+     * (code)
+     * var panel = new OpenLayers.Control.Panel({
+     *     defaultControl: control,
+     *     // ovverride createControlMarkup to create actual buttons
+     *     // including texts wrapped into span elements.
+     *     createControlMarkup: function(control) {
+     *         var button = document.createElement('button'),
+     *             span = document.createElement('span');
+     *         if (control.text) {
+     *             span.innerHTML = control.text;
+     *         }
+     *         return button;
+     *     }
+     *  });
+     * (end)
+     *
+     * Parameters:
+     * control - {<OpenLayers.Control>} The control to create the HTML
+     *     markup for.
+     *
+     * Returns:
+     * {DOMElement} The markup.
+     */
+    createControlMarkup: function(control) {
+        return document.createElement("div");
+    },
    
     /**
      * Method: addControlsToMap

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'
     ],
     
     /**
@@ -97,6 +97,31 @@ OpenLayers.Events.buttonclick = OpenLayers.Class({
         delete this.target;
     },
 
+    /**
+     * Method: getPressedButton
+     * Get the pressed button, if any. Returns undefined if no button
+     * was pressed.
+     *
+     * Arguments:
+     * element - {DOMElement} The event target.
+     *
+     * Returns:
+     * {DOMElement} The button element, or undefined.
+     */
+    getPressedButton: function(element) {
+        var depth = 3, // limit the search depth
+            button;
+        do {
+            if(OpenLayers.Element.hasClass(element, "olButton")) {
+                // hit!
+                button = element;
+                break;
+            }
+            element = element.parentNode;
+        } while(--depth > 0 && element);
+        return button;
+    },
+
     /**
      * Method: buttonClick
      * Check if a button was clicked, and fire the buttonclick event
@@ -108,15 +133,25 @@ OpenLayers.Events.buttonclick = OpenLayers.Class({
         var propagate = true,
             element = OpenLayers.Event.element(evt);
         if (element && (OpenLayers.Event.isLeftClick(evt) || !~evt.type.indexOf("mouse"))) {
-            if (element.nodeType === 3 || OpenLayers.Element.hasClass(element, "olAlphaImg")) {
-                element = element.parentNode;
-            }
-            if (OpenLayers.Element.hasClass(element, "olButton")) {
-                if (this.startEvt) {
-                    if (this.completeRegEx.test(evt.type)) {
-                        var pos = OpenLayers.Util.pagePosition(element);
+            // was a button pressed?
+            var button = this.getPressedButton(element);
+            if (button) {
+                if (evt.type === "keydown") {
+                    switch (evt.keyCode) {
+                    case OpenLayers.Event.KEY_RETURN:
+                    case OpenLayers.Event.KEY_SPACE:
                         this.target.triggerEvent("buttonclick", {
-                            buttonElement: element,
+                            buttonElement: button
+                        });
+                        OpenLayers.Event.stop(evt);
+                        propagate = false;
+                        break;
+                    }
+                } else if (this.startEvt) {
+                    if (this.completeRegEx.test(evt.type)) {
+                        var pos = OpenLayers.Util.pagePosition(button);
+                        this.target.triggerEvent("buttonclick", {
+                            buttonElement: button,
                             buttonXY: {
                                 x: this.startEvt.clientX - pos[0],
                                 y: this.startEvt.clientY - pos[1]