Merge pull request #37780 from nextcloud/enh/a11y-focus-dialog

nextcloud · Apr 25, 2023 · 721de34 · 721de34
2 parents 6d9f785 + 79310bd
commit 721de34
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 4 deletions.
diff --git a/core/src/jquery/ocdialog.js b/core/src/jquery/ocdialog.js
@@ -24,6 +24,7 @@
  */
 
 import $ from 'jquery'
+import { createFocusTrap } from 'focus-trap'
 import { isA11yActivation } from '../Util/a11y.js'
 
 $.widget('oc.ocdialog', {
@@ -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.

diff --git a/dist/core-main.js b/dist/core-main.js
diff --git a/dist/core-main.js.map b/dist/core-main.js.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -69,6 +69,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",