#3123 closed bug (fixed)

Opened July 22, 2008 09:09PM UTC

Closed August 19, 2011 11:06AM UTC

Last modified October 06, 2011 07:40PM UTC

Tabbing stops in modal dialog

Reported by: Jacob Owned by: scottgonzalez
Priority: major Milestone: 1.9.0
Component: ui.dialog Version: 1.5.1
Keywords: accessibility, tabindex Cc:
Blocked by: Blocking:
Description

If you launch a modal dialog and try to use the tab key to select elements in your browser the tabbing will halt on an arbitrary element (in this case, the jQuery UI logo in the top left).

The expected behaviour for a modal dialog would be to be "greedy" for keyboard accessbility and force the tabbing to cycle within the dialog alone.

This is reproducable locally and in the demo page ( http://ui.jquery.com/functional_demos/#ui.dialog with modal dialog selected)

Attachments (0)
Change History (11)

Changed July 25, 2008 03:07AM UTC by paul comment:1

component: ui.core → ui.dialog
owner: paul → scott.gonzalez

Changed August 17, 2008 10:09AM UTC by Cloudream comment:2

milestone: → TDB

Changed September 05, 2008 03:57AM UTC by scottgonzalez comment:3

status: new → accepted

Possible solution:

var $first = $('.ui-dialog :tabbable:first');
var $last = $('.ui-dialog :tabbable:last');
$last.keypress(function(e) {
    if (e.keyCode == $.keyCode.TAB) {
        setTimeout(function() { $first.focus(); }, 1);
    }
});

Using keypress without the timeout will cause the focus to go to the second element (focus will be given to the first element before the default action of the keypress completes).

Using keyup will make it impossible to tab to the last element because the keyup of the tab from the previous element will be triggered immediately after the last element is given focus.

Changed September 05, 2008 04:02AM UTC by scottgonzalez comment:4

This must also handle reverse order tabbing.

Changed September 06, 2008 04:50PM UTC by scottgonzalez comment:5

milestone: TBD → 1.6
resolution: → fixed
status: accepted → closed

Fixed in [662].

Changed November 19, 2008 04:32AM UTC by rdworth comment:6

milestone: 1.6 → 1.6rc1

Changed August 19, 2011 10:07AM UTC by gnarf comment:7

milestone: 1.6rc1
resolution: fixed
status: closed → reopened

Changed August 19, 2011 11:06AM UTC by Corey Frang comment:8

resolution: → fixed
status: reopened → closed

Dialog: Tabbing out of a modal dialog was possible because keypress doesn't fire for tabs everywhere, switched to keyup. Added Unit Test - Caught by @DomenicDenicola - Fixes #3123 - Tabbing stops in modal dialog

Changeset: 96e5c241e1b26224c53738b590e07290db7a3e54

Changed August 19, 2011 11:08AM UTC by Corey Frang comment:9

Dialog: Tabbing out of a modal dialog was possible because keypress doesn't fire for tabs everywhere, switched to keyup. Added Unit Test - Caught by @DomenicDenicola - Fixes #3123 - Tabbing stops in modal dialog

(cherry picked from commit 96e5c241e1b26224c53738b590e07290db7a3e54)

Changeset: 8f16cc304a97c7c3c2b5ab69678d666ec9ebd75a

Changed October 05, 2011 07:12PM UTC by millman comment:10

This issues still exists in IE 9. While tabbing within a dialog the tab falls out of the dialog.

Changed October 06, 2011 07:40PM UTC by scottgonzalez comment:11

milestone: → 1.9

This works in master.