Join GitHub today
GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.
Sign upShift and shift+tab focus items of the body when modal is open #1679
Assignees
Labels
Comments
|
I use 6.4.0 version and the issue is reproducible on the docs page. It
seems you missed the third step "Set focus to the address bar of the
browser". This is the screencast from the docs page:
пн, 21 окт. 2019 г. в 21:52, Evan Sharp <
<https://mail.google.com/mail/u/1?ui=2&ik=8b84160024&attid=0.1&permmsgid=msg-a:r-5147660821919087212&view=att&disp=safe&realattid=f_k21lyazw0>
notifications@github.com>:
… I could not reproduce the issue given your steps. It looks like you are
using an old version of reactstrap while the docs are on the latest version.
The version you are using is 6.3.0, in 6.4.0 the trapping focus was added
(see the release notes
<https://github.com/reactstrap/reactstrap/releases/tag/6.4.0>)
[image: modal-focus-trap]
<https://user-images.githubusercontent.com/664714/67229748-f0012280-f409-11e9-8063-3f6fd8787f20.gif>
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<#1679?email_source=notifications&email_token=ABZMBTCDKKM66TKNIPKTO6TQPXT5PA5CNFSM4JC6K44KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEB3GRNQ#issuecomment-544630966>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ABZMBTA4RPIYTTADXB72OEDQPXT5PANCNFSM4JC6K44A>
.
|
|
It looks like bootstrap is capturing all of the focus events and looking to see if the element focused is within the modal or not. If the element focused is not within the modal, it will focus the modal. This works for when tabbing from the address bar, but is completely broken when shift-tabbing. Bootstrap is planning a new implementation with v5. |
|
can I work on this? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
modal#6.4.0es#16.4.0#4.1.1What is happening?
If you open the modal, focus any browser element (e.g. address bar), and start to press the tab key to move the focus forward body elements get the focus as usual.
What should be happening?
As described in https://www.w3.org/TR/wai-aria-practices/#dialog_modal elements outside the modal dialog should not be interactive:
Additionally, here is an example of implementation: https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html
Steps to reproduce the issue