Fix for Select Elements with Inaccessible Onchange Events

/**********************************************************************************
 * $URL: $
 * $Id: $
 ***********************************************************************************
 *
 * Copyright (c) 2010 The Sakai Foundation
 *
 * Licensed under the Educational Community License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *       http://www.osedu.org/licenses/ECL-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 *********************************************************************************/
/*
 * a11ySelectHandler.js -- Brian Richwine, Indiana University
 * Version 1.0, 2010.October.15
 * Enhanced version of code by Cameron Adams from 19.October.2004 as found on at:
 * http://themaninblue.com/writing/perspective/2004/10/19/
 *
 * Interaction manager for select elements with onchange event handlers that
 * attempts to ensure their accessibility for keyboard only users using IE. 
 * In Internet Explorer, the onchange event is fired each time the user
 * uses the up/down arrow keys to scroll through the various options of a 
 * select element. When the select element includes an onchange event handler
 * that changes the context (i.e.: submits a form, etc.), then the keyboard user
 * is prevented from exploring all of the options.
 *
 * This handler models its user interaction behavior after Mozilla Firefox 
 * 3.6 on the PC.
 *
 * Call with the following code from the bottom of the HTML body:
 *   <!--[if IE]>
 *     <script type="text/javascript" defer="defer" src="/library/js/a11ySelectHandler.js"></script>
 *   <![endif]-->
 * Notes: 
 *   - Be sure to load jQuery first!
 *   - This routine is needed only for Internet Explorer. Other supported web browsers (Safari, 
 *     Chrome, and Firefox) handle keyboard interactions with select elements in an accessible manner. 
 *   - This code adds an "a11ySelect" object to each select element that has an onchange event handler.
 *   - This code assumes existing onchange events are all DOM Level 0 or 1 (only one event handler allowed)
 *      DOM Level 0 events are assigned in the HTML like this: 
 *          onchange="alert('hello!');"
 *      DOM Level 1 events are assigned like this: 
 *          document.getElementById('selectMenu1').onchange = function() {
 *            alert('Hello!');
 *          }
 *
 *      This code has not been tested where DOM Level 2 events are handling the select element's onchange event.
 *      DOM Level 2 events are assigned like this:
 *          document.getElementById('myButton').addEventListener( 'click', function(){
 *             alert('Hello!');
 *           }, false); 
 *
 *
 * This code and the results of interactions testing performed on 11.August.2010 are
 * documented on the Sakai Accessibility Working Group confluence space. 
 *
 * Tested against:
 *  XP: IE 6, IE 7, IE 8, 
 *  Win7: IE 9 (Preview 3)
 */

(function ($) {
    if ($.browser.msie) {
	    $(document).ready(function () { // Scan document and install handler once document is loaded and ready
            $("select").each(function (index, objElement) { // "select[onchange]" didn't work, is Sakai using an old version of jQuery?
                if (objElement && objElement.onchange) {
                    objElement.a11ySelect = {
                        allowOnchangeEvent : false,
                        enterKeyWasPressed : false,
                        initValue : null,
                        lastInteractionWasAClick : true,
                        allowPossibleOpenMenuChange : false,
                        oSelect : null,
                        origOnfocus : null,
                        origOnchange : null,
                        origOnkeydown : null,
                        origOnclick : null,
                        origOnblur : null,
                        handleChanged : function (ob) {
                            var oSelect = (ob && ob.a11ySelect) ? ob : this,
                                a11ySelect = oSelect.a11ySelect;
                    
                            if (!a11ySelect.allowOnchangeEvent && !a11ySelect.allowPossibleOpenMenuChange) {
                                return false; // Abort calling the original onchange event handler
                            }
                            a11ySelect.allowOnchangeEvent = false; // Prevent redundant calls to orig onchange event
                            a11ySelect.initValue = a11ySelect.oSelect.value; // Store current value as init since calling onchange

                            if (a11ySelect.origOnchange) {
                                return a11ySelect.origOnchange(ob);
                            }
                            return false;
                        },
                        handleClick : function (e) {
                            // Handles clicks on menus opened by keyboard (alt+down arrow)
                            if (this.value !== this.a11ySelect.initValue && !this.a11ySelect.lastInteractionWasAClick) {
                                this.a11ySelect.allowOnchangeEvent = true;
                                this.a11ySelect.handleChanged(this);
                            }

                            this.a11ySelect.lastInteractionWasAClick = true;
                            this.a11ySelect.allowOnchangeEvent = true;
                            this.a11ySelect.enterKeyWasPressed = false;
                            this.a11ySelect.allowPossibleOpenMenuChange = false;

                            if (this.a11ySelect.origOnclick) {
                                return this.a11ySelect.origOnclick(e);
                            }
                        },
                        handleFocus : function (e) {
                            // Reset everything...
                            this.a11ySelect.initValue = this.value;
                            this.a11ySelect.allowOnchangeEvent = false;
                            this.a11ySelect.enterKeyWasPressed = false;
                            this.a11ySelect.lastInteractionWasAClick = true;
                            this.a11ySelect.allowPossibleOpenMenuChange = false;

                            if (this.a11ySelect.origOnfocus) {
                                return this.a11ySelect.origOnfocus(e);
                            }
                            return true;
                        },
                        handleBlur : function (e) {
                            // Call orig onChange event when focus is lost if needed
                            if (this.value !== this.a11ySelect.initValue && !this.a11ySelect.enterKeyWasPressed) {
                                this.a11ySelect.allowOnchangeEvent = true;
                                this.a11ySelect.handleChanged(this); 
                            }
                        
                            if (this.a11ySelect.origOnblur) {
                                return this.a11ySelect.origOnblur(e);
                            }

                            return true;
                        },
                        handleKeydown : function (e) {
                            var evt = (e) ? e : window.event,
                                keyCodeEnter = 13,
                                keyCodeEsc = 27;

                            this.a11ySelect.lastInteractionWasAClick = false;
                            this.a11ySelect.allowPossibleOpenMenuChange = false;

                            if (evt.keyCode === keyCodeEnter && this.value !== this.a11ySelect.initValue) {
                                this.a11ySelect.allowOnchangeEvent = true;
                                this.a11ySelect.enterKeyWasPressed = true;
                                this.a11ySelect.handleChanged(this);
                            }
                            else if (evt.keyCode === keyCodeEnter) {
                                // Expanded select menus (alt+down arrow key or by click) don't update value until after keypress event
                                // This allows menus opened by a mouse, but set with an enter key to work
                                this.a11ySelect.allowPossibleOpenMenuChange = true;
                                this.a11ySelect.enterKeyWasPressed = true;
                            }
                            else {
                                this.a11ySelect.enterKeyWasPressed = false;
                            }

                            if (evt.keyCode === keyCodeEsc) {
                                // restore original value when escape is pressed
								this.value = this.a11ySelect.initValue; 
                            }

                            this.a11ySelect.allowOnchangeEvent = false;
                            return true;
                        },
                        init : function (oSel) {
	                        // Keep a reference to the select element object
                            oSel.a11ySelect.oSelect = oSel;
                    
                            oSel.a11ySelect.initValue = oSel.value;
                            oSel.a11ySelect.allowOnchangeEvent = false;
                            oSel.a11ySelect.enterKeyWasPressed = false;
                            oSel.a11ySelect.allowPossibleOpenMenuChange = false;

                            // Store original handlers
                            oSel.a11ySelect.origOnfocus = oSel.onfocus;
                            oSel.a11ySelect.origOnkeydown = oSel.onkeydown;
                            oSel.a11ySelect.origOnclick = oSel.onclick;
                            oSel.a11ySelect.origOnchange = oSel.onchange;
                            oSel.a11ySelect.origOnblur = oSel.onblur;

                            // Install handlers
                            oSel.onfocus = oSel.a11ySelect.handleFocus;
                            oSel.onkeydown = oSel.a11ySelect.handleKeydown;
                            oSel.onclick = oSel.a11ySelect.handleClick;
                            oSel.onchange = oSel.a11ySelect.handleChanged;
                            oSel.onblur = oSel.a11ySelect.handleBlur;
                    
                            $(oSel).css("outline", "1px dotted red");
                        }
                    };
                    objElement.a11ySelect.init(objElement);   
                }           
            });
        });
    }
})(jQuery);