Override default behavior tab to keep focus on browser shape

Question

I am creating my first application where I must have respect for keyboard navigation for reasons of accessibility.

My problem should consist of jquery-ui modal dialogs. If the user clicks a tab on the last control of the dialog (cancel button for this application), the focus goes beyond the dialog box. Or press shift-tab on the first control in the dialog box.

When the user does this, it is not always possible to return to the dialog box. In this regard, IE8 and FF8 behave somewhat differently. I tried to capture the tab key with the following event handler -

lastButton.keydown(function (e) { if (e.which === TAB_KEY_CODE) { e.stopPropagation(); $(this).focus(); } }); 

But this does not work, as the browser processes the keystroke after jquery is completed.

Two questions -

• To ensure accessibility, do I even need to worry about this? Although, for reasons of usability, I think I should.
• Is there any way to make this work?

Answer 1

My problem should consist of jquery-ui modal dialogs. If the user clicks a tab on the last control of the dialog (cancel button for this application), the focus goes beyond the dialog box. Or press shift-tab on the first control in the dialog box.

... and then the tab occurs below the modal window under a gray translucent layer with scrolling jumping from bottom to top after a few keystrokes? Yes, this is a problem for sighted users who use the keyboard for viewing and will not know how to return to the modal box without pressing Tab a hundred times. Blind people don’t even know that the modal window is still displayed (they can still see / hear the entire DOM from their screen reader!) And that the page / script is waiting to submit or cancel the solution, this also applies to them.

An example done correctly is displayed on the page http://hanshillen.github.com/jqtest/#goto_dialog (click on the Dialog tab, the direct link to the anchor does not work: /). This will be the tab forever inside the modal box until you click Close or OK and put you on the focused element that caused the modal window (I think that it should focus on the next focusable element after exiting the modal window but nevermind, this ISN is the most big issue of availability here).
This series of scripts is based on jQueryUI and is significantly improved to support keyboard and ARIA and any accessibility problems that may exist in the source scripts. Highly recommended! (I tried to mix the original jQuery UI scripts and these, but I could not do anything, although you do not need to do this: these scripts work fine on their own)

Answer 2

Perhaps you should prevent the default action with preventDefault () instead of stopping the distribution and use keypress instead of keydown.
Thus, there is no need to restore focus.

Propagation stop does not work because it simply prevents a bubble event. You might think about using stopImmediatePropagation (), but I think that changing input to clicking a tab cannot be stopped this way, and preventDefault () is more accurate.

 lastButton.keypress(function (e) { if (e.which === TAB_KEY_CODE) { e.preventDefault(); } }); 

fiddle here: http://jsfiddle.net/jfRzM/