覆盖默认选项卡行为以保持关注浏览器表单

Question

I'm building my first application where I have to have compliance with keyboard navigation for accessibility reasons.

My problem has to do jquery-ui modal dialog boxes. If the user presses tab on the last control of the dialog (cancel button for this app), focus goes outside of the dialog box. Or presses shift-tab on the first control in the dialog box.

When the user does this, it isn't always possible to tab back into dialog box. IE8 and FF8 behave somewhat differently in this respect. I've 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 doesn't work as it appears the browser processes the key press after jquery is done.

Two questions -

1. For Accessibility compliance, do I even have to worry about this? Although, for usability reasons, I think that I should.
2. Is there a way to make this work?

Answer 1

My problem has to do jquery-ui modal dialog boxes. If the user presses tab on the last control of the dialog (cancel button for this app), focus goes outside of the dialog box. Or presses shift-tab on the first control in the dialog box.

... and then tabbing occurs below the modal box, under a grey semi-transparent layer with scrollbar jumping from bottom to top after a few keypresses? Yes, this is a concern for sighted users who use the keyboard to browse and won't know how to go back to the modal box without pressing Tab a hundred times. Blind people won't even know the modal box is still displayed (they still can see/hear the entire DOM with their screen reader!) and that the page/script is waiting for a submit or cancel decision so it's also a concern for them.

An example done right is shown at http://hanshillen.github.com/jqtest/#goto_dialog (click on Dialog tab, direct link with anchor doesn't work :/ ). It'll tab forever inside the modal box till you click on Close or OK and will put you back on the focused element that triggered the modal box (I think it should focus the next focusable element after leaving the modal box but nevermind, this isn't the biggest accessibility problem here).
This serie of scripts is based on jQueryUI and are highly improved for keyboard and ARIA support and any accessibility problem that could exist in the original scripts. Highly recommended! (I tried to mix jQuery UI original scripts and these ones but didn't manage to get anything working, though you don't need to do so: these scripts work fine by themselves)

Answer 2

Im a little late to the party, but I found I had to call preventDefault in the other keyboard events as well.

ex) I was setting the focus in the keyup event. But the browser was still doing its thing in either keydown or keypress. So I had something like this (I used JQuery/Typescript, but the idea should translate to about anything):

elem.keyup(this.onDialogKeyPress);
elem.keydown(this.onDialogPressPreventDefault);
elem.keypress(this.onDialogPressPreventDefault);

...

private onDialogPressPreventDefault = (e: KeyboardEvent) => {
    const keys = [9, 27];

    if (keys.includes(e.which)) {
        e.preventDefault();
        return false;
    }
}

private onDialogKeyPress = (e: KeyboardEvent) => {
    // Tab
    if (e.which == 9) {
        e.preventDefault();
        // Do tab stuff
        return false;
    }
    // Esc
    else if (e.which == 27) {
        e.preventDefault();
        // Do Esc stuff
        return false;
    }
}

Answer 3

Maybe you should prevent the default action with preventDefault() instead of stopping the propagation and use keypress instead of keydown.
In this way there should be no need to regain focus.

Stopping the propagation doesn't work because it just prevent the event from bubbling up. You could think about using stopImmediatePropagation() but i think that changing input on the pression of the tab can't be stopped that way and preventDefault() is more correct.

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

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