Focus not trapped in several dialogs

[becka11y]

This issue is a Bug

Focus is still not trapped in some of the Readium dialogs:
About
Share Reader Bookmark

Related issue(s) and/or pull request(s)

#146

Expected Behavior

When the user presses tab or shift-tab to change the item with focus in the dialog, focus should not leave the dialog. The focus should cycle through only items in the dialog while the dialog is open.

Observed behavior

With the About dialog open, pressing tab to move focus causes the focus to leave the dialog even though it is still open.

Steps to reproduce

Open the About dialog
Press Tab to cycle through the items in the dialog.
Once you reach the last sha-link, focus will move outside of the dialog.
Tested on Safari Version 9.1.1 (11601.6.17) and focus goes up the to the bookmark list.

Test file(s)

Product

• Readium cloud reader app
  • latest development build
    Tue, 24 May 2016 19:21:16 GMT
    readium-js-viewer@d29fb4546c3a262ac65107da388f870d456edfaa (with local changes)
    readium-js@cd873696ebb8c81e9546dc0720ed9c568ca40207
    readium-shared-js@b84f3363fa7c52eea6f2a3f464b65fb1e758cbf5
    readium-cfi-js@fece36743dd5cefc017559b1be91382cb829a3f7

Additional information

Have only tested in Safari to far but expect the same problem in all browsers.

[danielweck]

To fix, simply replicate this code:

1a77755
("add EPUB" dialog)

1fae05c
("EPUB details" dialog)

[becka11y]

The About dialog doesn't have any buttons to catch the tab press. I can add an id to the last link on the dialog but the first link is in a message. I can add an id into all of the translations of that message - although that may be a bit fragile.
The other option I see is to find the first and last focusable items programmatically and add the tab /shift tab handlers. Do you have a preference?

It also isn't a simple fix for the share reader bookmark "dialog" because this is created programmatically via the dialog.js code. I'm thinking I will generate the id's for the dialog using the title and button type (close, dismiss, etc).

[becka11y]

I submitted a pull request (paypal/bootstrap-accessibility-plugin#103) to fix this in the bootstrap accessibility plugin. We will see what happens....

[danielweck]

Well done Becky! Fixed by #553