More information about the Underscore mailing list

[_] Tabbing within javascript widgets

Tim Beadle tim.beadle at gmail.com
Tue Dec 1 15:03:07 GMT 2009

2009/12/1 Sam Dwyer <underscore404 at live.co.uk>:
> 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.
>
> 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.
>
> The only other thing I can think of is to dynamically change the tabindex of
> the elements as the user tabs, so when it gets to the end element I set the
> first element to be the next tabbed location.
>
> Anyone know if there are any best practices regarding this?

I've done this recently. It was an IE-only app, but this should be
cross-browser: we set disabled="true" on the non-lightbox content when
the lightbox opened, and back to "false" when it closed.

Be sure to record which element had focus prior to the lightbox
opening, so you can focus it again when it closes.

Cheers,

Tim