Modals lose focus

[jamesperrin]

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]

Is there a question in there?

PRs are welcome.

[tarlepp]

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

[jamesperrin]

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]

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]

@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]

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