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.

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

Modals lose focus #859

Open
jamesperrin opened this issue Sep 12, 2024 · 6 comments
Open

Modals lose focus #859

jamesperrin opened this issue Sep 12, 2024 · 6 comments

Comments

@jamesperrin
Copy link

jamesperrin commented Sep 12, 2024

Bootbox.js lacks the ability for modals to trap focus within an opened modal. This is a web accessibility issue that should to be resolved.

Bootstrap.js version v5.x has a built-in ability to trap focus to an opened model.

Requested Features:

  1. When a modal is opened, there should be the ability to set the initial focus.
  2. As a User Tabs or Shirt+Tabs through the opened modal elements, focus should remain within the opened modal.
  3. When a modal is closed, focus should be returned to the element that triggered opening of the modal.

References:

WCAG 2.4.3 Focus Order | If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.

WCAG 3.2.1 On Focus | When any user interface component receives focus, it does not initiate a change of context.

Bootstrap util/focustrap.js
https://github.com/twbs/bootstrap/blob/fecd219983539aa0110a7e09d31b8aa4d5fb4348/js/src/util/focustrap.js

@tiesont
Copy link
Member

tiesont commented Sep 15, 2024

Is there a question in there?

PRs are welcome.

@tarlepp
Copy link
Collaborator

tarlepp commented Sep 21, 2024

@jamesperrin does this also happen with pure bootstrap modals? If yes, then it's issue on bootstrap itself.

@jamesperrin
Copy link
Author

The modal losing focus was fixed in pure Bootstrap v5.x modals.

If you look in the file Bootstrap modal.js on line 72, you see they are invoking this._focustrap = this._initializeFocusTrap() to initialize the trapping of the focus.

Bootstrap modal.js
https://github.com/twbs/bootstrap/blob/fecd219983539aa0110a7e09d31b8aa4d5fb4348/js/src/modal.js

Bootstrap util/focustrap.js
https://github.com/twbs/bootstrap/blob/fecd219983539aa0110a7e09d31b8aa4d5fb4348/js/src/util/focustrap.js

@tarlepp
Copy link
Collaborator

tarlepp commented Sep 21, 2024

Hmm, latest bootbox is using that 5.x version of bootstrap, so what is that we could do to fix this on bootbox code?

@tiesont
Copy link
Member

tiesont commented Sep 21, 2024

@jamesperrin Just to be clear, Bootbox is primarily a dynamic Bootstrap modal generator. We do have custom code that handles things in our alert, prompt, and confirm helpers, but otherwise most of the heavy lifting is done by whatever version of Bootstrap and/or Popper.js that's being used.

If what you're after is that list of three items in your question, then... I'd have to see some indication of interest from the rest of the community (assuming there still is one) to justify the effort to add those items.

This isn't to say that the request isn't valid, I (and @tarlepp) just don't have a ton of free time to add features for which no one else has asked.

@tarlepp
Copy link
Collaborator

tarlepp commented Sep 21, 2024

And PR's are always welcome, if you spot some issue and you know how to fix that just create PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants