search

bootboxjs / bootbox

Wrappers for JavaScript alert(), confirm() and other flexible dialogs using Twitter's bootstrap framework
http://bootboxjs.com
Other
5.04k stars 1.04k forks source link

Modals lose focus #859

Open jamesperrin opened 1 month ago

jamesperrin commented 1 month ago

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 commented 1 month ago

Is there a question in there?

PRs are welcome.

tarlepp commented 1 month ago

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

jamesperrin commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

@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 commented 1 month ago

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