Controling tabbing focus within popup javascript widget context

Question

Hello,

I'm working on a lightbox style javascript plugin that pops up an image with next+previous buttons and a close button. I want to make it so that tabbing will only jump between the three presented buttons in the popup, not go through the three of them and then continue on the page content in the background.

Does anyone have any suggestions on the best way to do this, currently I'm thinking that the best way is to make an array of tabbable elements when the popup appears and just capture tabs to iterate through that array setting focus on each one and preventing default tab behaviour.

Anyone know if there are any best practices regarding this?

Answer 1

I tried doing the following when showing the popup window, it seems to work in Firefox 3. It may be enough to get you started:

$('#nonpopup a').attr('disabled','true');
$('#nonpopup input').attr('disabled','true');

The JQuery selector finds all the A and input elements that are in the div with id nonpopup and sets the html attribute disabled to true. If you are not using JQuery you will need some other way to find all these elements but it may be as simple as document.getElementsByTagName().

What this accomplishes is preventing the browser from tabbing to those elements. The tab order still leaves the page and goes all through the browser chrome, such as the URL bar.

Answer 2

A possible solution seems to be setting the tabindex property of the elements you don't want to be tabbable to -1.

<div>
    <input type="button" value="tabbable one" />
    <input type="button" value="tabbable two" />
</div>
<div>
    <input type="button" value="not tabbable" tabindex="-1"/>
    <input type="button" value="also not tabbable" tabindex="-1"/>
</div>

Although I did not find this in any documentation so far it seems to work in all tested browsers (FF 3.5, IE 6 & 7, Opera 9.64).

Another approach would be to blur() when an unwanted element gets the focus:

<div>
    <input type="button" value="tabbable one" />
    <input type="button" value="tabbable two" />
</div>
<div>
    <input type="button" value="not tabbable" onfocus="blur()"/>
    <input type="button" value="also not tabbable" onfocus="blur()"/>
</div>

The disadvantage of this approach is that as soon as you hit an "untabbable" element, no element will be selected and the next tab will start at the very first element. This is especially tricky when tabbing backwards, which is not possible anymore. The solution to this would be to actively focus the correct following element:

<div>
    <input id="firstTabbable" type="button" value="tabbable one" />
    <input type="button" value="tabbable two" />
    <input id="lastTabbable" type="button" value="tabbable three" />
</div>
<div>
    <input type="button" value="not tabbable" onfocus="blur(); $('firstTabbable').focus();"/>
    <input type="button" value="also not tabbable" onfocus="blur(); $('lastTabbable').focus();"/>
</div>

However, in my opinion this is a bit too complicated.