Skip to content

Commit

Permalink
Trap focus in dialogs
Browse files Browse the repository at this point in the history
Signed-off-by: Christopher Ng <chrng8@gmail.com>
  • Loading branch information
Pytal committed Jun 6, 2023
1 parent a5222a6 commit 056c0a9
Show file tree
Hide file tree
Showing 6 changed files with 34 additions and 10 deletions.
23 changes: 21 additions & 2 deletions core/src/jquery/ocdialog.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@
*/

import $ from 'jquery'
import { isA11yActivation } from '../Util/a11y'
import { createFocusTrap } from 'focus-trap'
import { isA11yActivation } from '../Util/a11y.js'

$.widget('oc.ocdialog', {
options: {
Expand Down Expand Up @@ -114,9 +115,9 @@ $.widget('oc.ocdialog', {

this._setOptions(this.options)
this._createOverlay()
this._useFocusTrap()
},
_init() {
this.$dialog.focus()
this._trigger('open')
},
_setOption(key, value) {
Expand Down Expand Up @@ -252,6 +253,23 @@ $.widget('oc.ocdialog', {
this.overlay = null
}
},
_useFocusTrap() {
// Create global stack if undefined
Object.assign(window, { _nc_focus_trap: window._nc_focus_trap || [] })

const dialogElement = this.$dialog[0]
this.focusTrap = createFocusTrap(dialogElement, {
allowOutsideClick: true,
trapStack: window._nc_focus_trap,
fallbackFocus: dialogElement,
})

this.focusTrap.activate()
},
_clearFocusTrap() {
this.focusTrap?.deactivate()
this.focusTrap = null
},
widget() {
return this.$dialog
},
Expand All @@ -262,6 +280,7 @@ $.widget('oc.ocdialog', {
this.enterCallback = null
},
close() {
this._clearFocusTrap()
this._destroyOverlay()
const self = this
// Ugly hack to catch remaining keyup events.
Expand Down
4 changes: 2 additions & 2 deletions dist/core-common.js

Large diffs are not rendered by default.

9 changes: 7 additions & 2 deletions dist/core-common.js.LICENSE.txt
Original file line number Diff line number Diff line change
Expand Up @@ -316,12 +316,12 @@
*/

/*!
* focus-trap 7.1.0
* focus-trap 7.2.0
* @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
*/

/*!
* focus-trap 7.2.0
* focus-trap 7.4.3
* @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
*/

Expand All @@ -330,6 +330,11 @@
* @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
*/

/*!
* tabbable 6.1.2
* @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
*/

/*! @license DOMPurify 2.4.4 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/2.4.4/LICENSE */

/*! For license information please see NcActionSeparator.js.LICENSE.txt */
Expand Down
2 changes: 1 addition & 1 deletion dist/core-common.js.map

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/core-main.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/core-main.js.map

Large diffs are not rendered by default.

0 comments on commit 056c0a9

Please sign in to comment.