Opened 8 years ago

Closed 4 years ago

Last modified 4 years ago

#3123 closed bug (fixed)

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)

Change History (11)

comment:1 Changed 8 years ago by paul

  • Component changed from ui.core to ui.dialog
  • Owner changed from paul to scott.gonzalez

comment:2 Changed 7 years ago by Cloudream

  • Milestone set to TDB

comment:3 Changed 7 years ago by scottgonzalez

  • Status changed from new to 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.

comment:4 Changed 7 years ago by scottgonzalez

This must also handle reverse order tabbing.

comment:5 Changed 7 years ago by scottgonzalez

  • Milestone changed from TBD to 1.6
  • Resolution set to fixed
  • Status changed from accepted to closed

Fixed in [662].

comment:6 Changed 7 years ago by rdworth

  • Milestone changed from 1.6 to 1.6rc1

comment:7 Changed 4 years ago by gnarf

  • Milestone 1.6rc1 deleted
  • Resolution fixed deleted
  • Status changed from closed to reopened

comment:8 Changed 4 years ago by Corey Frang

  • Resolution set to fixed
  • Status changed from reopened to 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

comment:9 Changed 4 years ago by Corey Frang

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

comment:10 Changed 4 years ago by millman

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

comment:11 Changed 4 years ago by scottgonzalez

  • Milestone set to 1.9

This works in master.

Note: See TracTickets for help on using tickets.