Overlay background links are accesible Created Mar 30, 2010

Yes indeed the modal overlay is not actually modal. Even though the user cannot use the mouse to click background items such as buttons and links, they can certainly tab to those controls in the background and invoke them, which is definitely unexpected.

This really shouldn't be very difficult to patch - the dialog for jquery ui already does this.

See the code commented "// prevent tabbing out of modal dialogs"

http://code.google.com/p/jquery-ui/source/browse/trunk/ui/jquery.ui.dialog.js

Here's a temporary fix that I wrote:

/**
 * Author: Brett Birschbach - HS2 Solutions, Inc.
 */
(function($) {
    $.fn.overlay__orig = $.fn.overlay;
    $.fn.overlay = function(args) { 
        var overlay = this.overlay__orig(args);
        if (overlay.load__orig == undefined) {overlay.load__orig = overlay.load};
        if (overlay.close__orig == undefined) {overlay.close__orig = overlay.close};
        overlay.load = function() {
            var loaded = this.load__orig();
            if (!this.getConf().closeOnClick) {
                /*
                 * NOTE THAT THE FOLLOWING CODE WAS PULLED FROM jquery.ui.dialog.js 
                 *  
                 * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
                 * Dual licensed under the MIT (MIT-LICENSE.txt)
                 * and GPL (GPL-LICENSE.txt) licenses.
                 *
                 * http://docs.jquery.com/UI/Dialog
                 */
                this.getOverlay().bind('keypress.overlay', function(event) {
                    if (event.keyCode !== $.ui.keyCode.TAB) {
                        return;
                    }
    
                    var tabbables = $(':tabbable', this);
                    var first = tabbables.filter(':first');
                    var last  = tabbables.filter(':last');
    
                    if (event.target === last[0] && !event.shiftKey) {
                        first.focus(1);
                        return false;
                    } else if (event.target === first[0] && event.shiftKey) {
                        last.focus(1);
                        return false;
                    }
                });
                /* END CODE from http://docs.jquery.com/UI/Dialog */
            }
            return loaded;
        };
        overlay.close = function() {
            this.getOverlay().unbind('keypress.overlay');
            return this.close__orig();
        };
        return overlay;
    };
})(jQuery);

I believe you will need the jQuery UI plugin for the ":tabbable" selector to work.