Controling tabbing focus within popup javascript widget context

Question

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

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.