Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Tabbing outside the modal can cause the page to scroll #19642

Closed
supachailllpay opened this issue Mar 30, 2016 · 7 comments
Closed

Tabbing outside the modal can cause the page to scroll #19642

supachailllpay opened this issue Mar 30, 2016 · 7 comments
Labels
accessibility js v3

Comments

@supachailllpay
Copy link

When I continue press tab until the last tab pressed then it seems go out of modal.

Example:
https://jsfiddle.net/7p330rgs/

I look at the code about enforceFocus function. I think one of easiest way to do is create the dummy focus (last focus on modal) if this dummy focused then force focus back to modal. BTW I don't have any test about it.

Thank you.
@cvrebert
Copy link
Collaborator

@supachailllpay What browser and OS are you using?

@cvrebert
Copy link
Collaborator

Hmm, on OS X, this only reproduced for me on Chrome. And the link never gets fully focused such that the user could interact with it, but it does get scrolled into view.
Anyone test this on Windows?

@cvrebert cvrebert changed the title Modal the last tab go out. Tabbing outside the modal can cause the page to scroll Mar 31, 2016
@patrickhlauke
Copy link
Member

using https://jsfiddle.net/w7o3bmxe/3/ i can confirm that on Windows in Chrome, Firefox, IE, Edge the link receives focus (but cannot be activated)

@cvrebert
Copy link
Collaborator

the link receives focus

Well, FWICT that seems to be unavoidable, assuming I understand HTML's focus model correctly; none of the focus-related events are cancelable (WTF spec writers...). So what matters is whether the focus is immediately shifted back to the modal via an event handler, such that the user cannot possibly interact with the link.

Noodling about it more, I think the bug here is that we ought to record (when opening the modal) and restore the scroll position of the <body> when we refocus the modal. Probably we haven't noticed this bug before since it's a fairly rare case: the next focusable element after the modal is offscreen, thus causing a scroll, which doesn't get counteracted when we refocus the modal. Most pages have enough focusable elements that this situation doesn't occur.

@patrickhlauke
Copy link
Member

Longer term, integrating something like ally.js may be worth considering - see http://allyjs.io/tutorials/accessible-dialog.html (assuming we don't want to code our own "make any other focusable element in the main page programmatically non-focusable, hide everything with aria-hidden="true")

@rodneyrehm
Copy link

Focusing algorithm is missing a "scroll the element into view" step is the issue trying to get the scroll-on-focus thing to be specified.

Since the scoll happens on focus, it would've been possible to redirect focus upon focusin, if browsers followed the DOM Level3 FocusEvent order - which they don't.

The only way to prevent this from happening is to prevent the focus itself. This can be achieved by

You can recover from the scroll-on-focus by observing the document's scroll-position on keydown and resetting on blur on the element outside of the dialog. Not a nice approach, imho.

@mdo
Copy link
Member

mdo commented Sep 5, 2016

Bootstrap 3 is no longer being officially developed or supported.

All work has moved onto our next major release, v4. As such, this issue or pull request is being closed as a "won't fix." For additional help and support, we recommend utilizing our community resources. Thanks for your understanding, and see you on the other side of v4!

<3,
@mdo and team

@mdo mdo closed this as completed Sep 5, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
accessibility js v3
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@mdo @rodneyrehm @cvrebert @patrickhlauke @supachailllpay