keep focus inside the lightbox

[goetsu]

as explained here :
http://www.w3.org/WAI/PF/aria-practices/#modal_dialog
I think it's better if the focus remain within the lightbox until it is closed instead of continue tabbing through the focusable element in the rest of the page

Aurélien Levy

[fnagel]

Reminder: This issue is about moving the focus out of the opened lightbox, aka caught the focus.

I know this recomendation but its difficult to determine which elements should be set to tabindex="-1". Give (and remove) all possible focusable elements this attribute cant be done due to performance. So if you got any idea how to do this in real life, im glad to hear!

Ive tried something like this so far:

no effect

$(document).chidren().attr("tabindex", -1);


works, but too costs much performance on big sites (see above)

$(document).find("a, button, ...").attr("tabindex", -1);


this block every keyboard event (inluding F5), but filtering every event for its activeTarget could be a solution

$(document).keypress(function(event) {
return false
});


If we find a way to do this (which would be great) i will combine this to the dimmer as you can and should be able to use the gallery mode without the dimmer functionality. Without dimmer the user should be able to tab through all elements.

[alastc]

I think adding the WAI-ARIA role of 'dialogue' should help here:
http://www.w3.org/TR/wai-aria/roles#dialog

In the example here (under the 'dialog' tab):
http://hanshillen.github.com/aegisdemo/

It keeps the keyboard focus within the dialogue by using that role.

Should be quite easy to add, just don't forget the labelled-by aspect.

NB: Browser support is a bit spotty so far, but overall, it looks like the easiest implementation method, and support should catch up. Also, it's certainly no worse for adding it.
So far, support in FF3.6 seems good, but Chrome/Safari IE will be lacking.

[goetsu]

sorry to correct you but adding role dialogue while change nothing.
Here is the js function keeping the keyboard focus within the dialogue

// prevent tabbing out of modal dialogs
        if (options.modal) {
            uiDialog.bind('keypress.ui-dialog', function(event) {
                if (event.keyCode !== $.ui.keyCode.TAB) {
                    return;
                }

                var tabbables = $(':tabbable', this),
                    first = tabbables.filter(':first'),
                    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;
                }
            });
        }

[alastc]

Ah, good point, I misunderstood.

However, would that be a good starting point for implementing it for this project?

[fnagel]

For sure - thats a easy way and I dont know why the hell I dont think of that myself. Thanks goetsu for pointing that out.

I will implement this next dev cycle or just helping me out and adapt this snippet for the lightbox script.

[webhipster]

This is what I did:

    var focusable = [];
    _this.underlayWrapper.find('*').each(function(i, val) {
        if (val.nodeName.match(/^A$|AREA|INPUT|TEXTAREA|SELECT|BUTTON/gim) && parseInt(val.getAttribute("tabIndex")) !== -1) {
            focusable.push(val);
        }
        if ((val.getAttribute("tabIndex") !== null) && (parseInt(val.getAttribute("tabIndex")) >= 0) && (val.getAttribute("tabIndex", 2) !== 32768)) {
            focusable.push(val);
        }
    });

I didn't use jQuery's :focusable or :tabbable selectors because I couldn't get either to work cross browser. The one thing I didn't check with my implementation is if a tab order is set within the dialog. Meh.

You can check out what I did here:
http://webhipster.com/testing/accessibility/modal-dialog-latest/

I mean to finish this modal dialog widget, but have not gotten around to it.

[fnagel]

Closed. See #56

[michael-milette]

webhipster, did you ever notice that in your example, the focus never goes to the submit button?