Shift-tab within Bootstrap dialogs does not cycle around

[becka11y]

With the Settings dialog open, press tab to cycle focus around all of the elements in the settings pane. Note that focus will circle from the Save Changes button at the bottom right to the close button in the upper right of the dialog. Shift-tab should work the same in the opposite direction. However, with focus on the close button, pressing shift-tab appears to do nothing, focus leaves the close button and seems to go no where.

Tested with VoiceOver on OS X 10.9.4 with Chrome Extension readium-js-viewer sha = eedd52e (Tue, Aug 5, 2014)

[danielweck]

This is a "standard" behaviour in the Bootstrap library (try their demo):

http://getbootstrap.com/javascript/#modals

Also, I noticed that "forward" tab reaches outside the modal dialog, into the EPUB3 HTML Content Document (when there are hyperlinks) in Safari OSX when full tab navigation is enabled (equivalent to Option-Tab):
#147

[becka11y]

There is an accessibility plugin for bootstrap: http://paypal.github.io/bootstrap-accessibility-plugin/demo.html. Unfortunately that doesn't fix the problem either but does make some accessibility enhancements to the modal dialog.

[danielweck]

@becka11y thanks, now recorded here:
#152

[becka11y]

We still need to fix this issue. Please re-open.

[danielweck]

That's right @becka11y, even though this is a standard Bootstrap behaviour, it would be nice to address it. I don't think ReadiumJS can afford to switch to a new UI library, but there may be some "hacks" we can apply to achieve the desired effect?

[danielweck]

My gut feeling is that at this stage of the development cycle for v1, we do not have the spare capacity to address this UI library behaviour (finding the workaround, testing the web browser + screen reader combinations). I would rather refrain from rushing a specific solution for the Chrome extension. Thoughts?

[becka11y]

Yes, it is fine as V1+, I just didn't want to lose it as an issue. I agree we can't switch UI libraries at this point but we do need to address the issue either by updating bootstrap or other means.

[danielweck]

Talking about upgrading Bootstrap: my feature branch / Pull Request:
#155
...actually includes the latest Bootstrap JS library and CSS stylesheet. Unfortunately the SHIFT-TAB "stuck" behaviour is still there.

[becka11y]

I submitted a pull request: #165 I assume it didn't get posted here because it failed the Travis build (which I assume is because I don't have the right permissions?)

[becka11y]

Fixed via: Merge pull request #165 from becka11y/feature/tabTrap146 …
ryanackley authored 3 days ago 450beb8

Closed

[danielweck]

Thank you @becka11y
However, there are other Bootstrap dialogs that suffer from the same problem (about, add book, details). I think we should ensure that the tab-cycling behaviour is consistent in all dialogs.

#165

a01abd3

[danielweck]

Thanks @becka11y for the initial fix. I replicated your method into the other dialogs:
1a77755
1fae05c