mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-26 06:44:35 +02:00
Code Issues Releases Wiki Activity

Add shift-tab keyboard support for dialogs (modal & Offcanvas components) (#33865)

Browse Source 
* consolidate dialog focus trap logic

* add shift-tab support to focustrap

* remove redundant null check of trap element

Co-authored-by: GeoSot <geo.sotis@gmail.com>

* remove area support forom focusableChildren

* fix no expectations warning in focustrap tests

Co-authored-by: GeoSot <geo.sotis@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
Ryan Berliner
2021-07-27 01:01:04 -04:00
committed by GitHub
parent 8536474583
commit 7646f6bd33
9 changed files with 499 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
js/src/modal.js
View File

@@ -19,6 +19,7 @@ import SelectorEngine from './dom/selector-engine'
import ScrollBarHelper from './util/scrollbar'
import BaseComponent from './base-component'
import Backdrop from './util/backdrop'
import FocusTrap from './util/focustrap'
/**
* ------------------------------------------------------------------------
@@ -49,7 +50,6 @@ const EVENT_HIDE_PREVENTED = `hidePrevented${EVENT_KEY}`
const EVENT_HIDDEN = `hidden${EVENT_KEY}`
const EVENT_SHOW = `show${EVENT_KEY}`
const EVENT_SHOWN = `shown${EVENT_KEY}`
const EVENT_FOCUSIN = `focusin${EVENT_KEY}`
const EVENT_RESIZE = `resize${EVENT_KEY}`
const EVENT_CLICK_DISMISS = `click.dismiss${EVENT_KEY}`
const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`
@@ -81,6 +81,7 @@ class Modal extends BaseComponent {
this._config = this._getConfig(config)
this._dialog = SelectorEngine.findOne(SELECTOR_DIALOG, this._element)
this._backdrop = this._initializeBackDrop()
this._focustrap = this._initializeFocusTrap()
this._isShown = false
this._ignoreBackdropClick = false
this._isTransitioning = false
@@ -167,7 +168,7 @@ class Modal extends BaseComponent {
this._setEscapeEvent()
this._setResizeEvent()
EventHandler.off(document, EVENT_FOCUSIN)
this._focustrap.deactivate()
this._element.classList.remove(CLASS_NAME_SHOW)
@@ -182,14 +183,8 @@ class Modal extends BaseComponent {
.forEach(htmlElement => EventHandler.off(htmlElement, EVENT_KEY))
this._backdrop.dispose()
this._focustrap.deactivate()
super.dispose()
/**
* `document` has 2 events `EVENT_FOCUSIN` and `EVENT_CLICK_DATA_API`
* Do not move `document` in `htmlElements` array
* It will remove `EVENT_CLICK_DATA_API` event that should remain
*/
EventHandler.off(document, EVENT_FOCUSIN)
}
handleUpdate() {
@@ -205,6 +200,12 @@ class Modal extends BaseComponent {
})
}
_initializeFocusTrap() {
return new FocusTrap({
trapElement: this._element
})
}
_getConfig(config) {
config = {
...Default,
@@ -240,13 +241,9 @@ class Modal extends BaseComponent {
this._element.classList.add(CLASS_NAME_SHOW)
if (this._config.focus) {
this._enforceFocus()
}
const transitionComplete = () => {
if (this._config.focus) {
this._element.focus()
this._focustrap.activate()
}
this._isTransitioning = false
@@ -258,17 +255,6 @@ class Modal extends BaseComponent {
this._queueCallback(transitionComplete, this._dialog, isAnimated)
}
_enforceFocus() {
EventHandler.off(document, EVENT_FOCUSIN) // guard against infinite focus loop
EventHandler.on(document, EVENT_FOCUSIN, event => {
if (document !== event.target &&
this._element !== event.target &&
!this._element.contains(event.target)) {
this._element.focus()
}
})
}
_setEscapeEvent() {
if (this._isShown) {
EventHandler.on(this._element, EVENT_KEYDOWN_DISMISS, event => {