Merge pull request #37911 from nextcloud/backport/37780/stable26

[stable26] Trap focus in dialogs

core/src/jquery/ocdialog.js

@@ -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: {
@@ -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) {
@@ -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
 	},
@@ -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.

dist/core-common.js.LICENSE.txt

@@ -330,21 +330,26 @@ object-assign
  * @license MIT
  */
 
-/*!
-* focus-trap 7.1.0
-* @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
-*/
-
 /*!
 * focus-trap 7.2.0
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
 */
 
+/*!
+* focus-trap 7.4.0
+* @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
+*/
+
 /*!
 * tabbable 6.0.1
 * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
 */
 
+/*!
+* tabbable 6.1.1
+* @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
+*/
+
 /*! @license DOMPurify 2.4.3 | (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.3/LICENSE */
 
 /*! For license information please see NcActionSeparator.js.LICENSE.txt */

package-lock.json

@@ -43,6 +43,7 @@
         "debounce": "^1.2.1",
         "dompurify": "^2.3.6",
         "escape-html": "^1.0.3",
+        "focus-trap": "^7.4.0",
         "focus-visible": "^5.2.0",
         "handlebars": "^4.7.7",
         "ical.js": "^1.4.0",
@@ -12318,11 +12319,11 @@
       }
     },
     "node_modules/focus-trap": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.1.0.tgz",
-      "integrity": "sha512-CuJvwUBfJCWcU6fc4xr3UwMF5vWnox4isXAixCwrPzCsPKOQjP9T+nTlYT2t+vOmQL8MOQ16eim99XhjQHAuiQ==",
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.4.0.tgz",
+      "integrity": "sha512-yI7FwUqU4TVb+7t6PaQ3spT/42r/KLEi8mtdGoQo2li/kFzmu9URmalTvw7xCCJtSOyhBxscvEAmvjeN9iHARg==",
       "dependencies": {
-        "tabbable": "^6.0.1"
+        "tabbable": "^6.1.1"
       }
     },
     "node_modules/focus-visible": {
@@ -23845,9 +23846,9 @@
       }
     },
     "node_modules/tabbable": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.0.1.tgz",
-      "integrity": "sha512-SYJSIgeyXW7EuX1ytdneO5e8jip42oHWg9xl/o3oTYhmXusZVgiA+VlPvjIN+kHii9v90AmzTZEBcsEvuAY+TA=="
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.1.1.tgz",
+      "integrity": "sha512-4kl5w+nCB44EVRdO0g/UGoOp3vlwgycUVtkk/7DPyeLZUCuNFFKCFG6/t/DgHLrUPHjrZg6s5tNm+56Q2B0xyg=="
     },
     "node_modules/table": {
       "version": "6.8.0",
@@ -35832,11 +35833,11 @@
       }
     },
     "focus-trap": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.1.0.tgz",
-      "integrity": "sha512-CuJvwUBfJCWcU6fc4xr3UwMF5vWnox4isXAixCwrPzCsPKOQjP9T+nTlYT2t+vOmQL8MOQ16eim99XhjQHAuiQ==",
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.4.0.tgz",
+      "integrity": "sha512-yI7FwUqU4TVb+7t6PaQ3spT/42r/KLEi8mtdGoQo2li/kFzmu9URmalTvw7xCCJtSOyhBxscvEAmvjeN9iHARg==",
       "requires": {
-        "tabbable": "^6.0.1"
+        "tabbable": "^6.1.1"
       }
     },
     "focus-visible": {
@@ -44589,9 +44590,9 @@
       }
     },
     "tabbable": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.0.1.tgz",
-      "integrity": "sha512-SYJSIgeyXW7EuX1ytdneO5e8jip42oHWg9xl/o3oTYhmXusZVgiA+VlPvjIN+kHii9v90AmzTZEBcsEvuAY+TA=="
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.1.1.tgz",
+      "integrity": "sha512-4kl5w+nCB44EVRdO0g/UGoOp3vlwgycUVtkk/7DPyeLZUCuNFFKCFG6/t/DgHLrUPHjrZg6s5tNm+56Q2B0xyg=="
     },
     "table": {
       "version": "6.8.0",

package.json

@@ -68,6 +68,7 @@
     "debounce": "^1.2.1",
     "dompurify": "^2.3.6",
     "escape-html": "^1.0.3",
+    "focus-trap": "^7.4.0",
     "focus-visible": "^5.2.0",
     "handlebars": "^4.7.7",
     "ical.js": "^1.4.0",