Lost tab stop when keyboard cycling thru modal dialog

[becka11y]

Using the demo page, open the modal dialog example. Note that when you tab and reach the save changes button, pressing tab one more time does not show anything visibly focused. Pressing tab again with cycle to the close X button at the top of the dialog. The extra tab stop is problematic and should be removed. In my use of the modal in Readium, the extra tab stop goes to the URL bar (tested in Safari).

The same problem happens when shift-tabbing through the modal dialog. With focus on the close x, pressing shift-tab causes focus to be lost. Pressing shift-tab again will reach the Save Changes button in the modal dialog.

[patrick-huber]

+1 on this issue.

This appears to be a bug. Focus is being placed back on the modal container and the anchor/button that triggered the modal. Investigating from my end and will report back with any updates, but for now here's a little script to help diagnose if others want to take a look as well

Running this from console:

$('*').on('focus', function() {
  console.log($(this));
});

And a little screencast showing the odd focus behavior coming back on the modal and mysterious button that triggered the modal somehow: http://youtu.be/RycKVnmaKtE

[mpnkhan]

This was some hack done to support shift+tab behaviour. http://getbootstrap.com/javascript/#modals doesn't support shift+tabbing inside modal container.

[becka11y]

Will this ever be fixed correctly? It really isn't usable to a screen reader user and is confusing to a keyboard user because focus gets lost (even if it is temporary).

[mpnkhan]

Please ignore #69 (comment).

Even if i remove modal plugin code, the problem exists. This problem is inherited from http://getbootstrap.com/javascript/#modals .

In order to test:
1.) Navigate to url "http://getbootstrap.com/javascript/#modals"
2.) Activate "Launch Demo Modal" button
3.) Start tabbing
Result:
(a.) Focus is placed on Modal container " <div id="myModal" class="modal fade in" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" style="display: block; padding-left: 0px;">"
(b.) Shift+Tabbing will not work:

Screen shot from firebug:

The plugin will just make shift+tab work.