Add focus trap util

js/package.json

@@ -9,6 +9,7 @@
     "clsx": "^1.1.1",
     "color-thief-browser": "^2.0.2",
     "dayjs": "^1.10.7",
+    "focus-trap": "^6.7.1",
     "jquery": "^3.6.0",
     "jquery.hotkeys": "^0.1.0",
     "mithril": "^2.0.4",

js/src/common/compat.js

@@ -31,6 +31,7 @@ import extractText from './utils/extractText';
 import formatNumber from './utils/formatNumber';
 import mapRoutes from './utils/mapRoutes';
 import withAttr from './utils/withAttr';
+import * as FocusTrap from './utils/focusTrap';
 import Notification from './models/Notification';
 import User from './models/User';
 import Post from './models/Post';
@@ -116,6 +117,7 @@ export default {
   'utils/withAttr': withAttr,
   'utils/throttleDebounce': ThrottleDebounce,
   'utils/isObject': isObject,
+  'utils/focusTrap': FocusTrap,
   'models/Notification': Notification,
   'models/User': User,
   'models/Post': Post,

js/src/common/utils/focusTrap.ts

@@ -0,0 +1,29 @@
+import { createFocusTrap as _createFocusTrap } from 'focus-trap';
+
+/**
+ * Creates a focus trap for the given element with the given options.
+ * 
+ * This function applies some default options that are different to the library.
+ * Your own options still override these custom defaults:
+ * 
+ * ```json
+ * {
+     escapeDeactivates: false,
+ * }
+ * ```
+ * 
+ * @param element The element to be the focus trap, or a selector that will be used to find the element.
+ * 
+ * @see https://github.com/focus-trap/focus-trap#readme - Library documentation
+ */
+function createFocusTrap(...args: Parameters<typeof _createFocusTrap>): ReturnType<typeof _createFocusTrap> {
+  args[1] = {
+    escapeDeactivates: false,
+    ...args[1],
+  };
+
+  return _createFocusTrap(...args);
+}
+
+export * from 'focus-trap';
+export { createFocusTrap };

js/yarn.lock

@@ -1404,6 +1404,7 @@ __metadata:
     expose-loader: ^3.1.0
     flarum-tsconfig: ^1.0.2
     flarum-webpack-config: ^2.0.0
+    focus-trap: ^6.7.1
     jquery: ^3.6.0
     jquery.hotkeys: ^0.1.0
     mithril: ^2.0.4
@@ -2565,6 +2566,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"focus-trap@npm:^6.7.1":
+  version: 6.7.1
+  resolution: "focus-trap@npm:6.7.1"
+  dependencies:
+    tabbable: ^5.2.1
+  checksum: b96c54a6a2976f8509ed8447ce3a8b76db3801b9c170f278f60b0c878478f2bb2ebc6dbe3ccd7157006b9a7ad9a86c18283efff0f3e387e29ba3ea89d8687b9c
+  languageName: node
+  linkType: hard
+
 "follow-redirects@npm:^1.14.0":
   version: 1.14.5
   resolution: "follow-redirects@npm:1.14.5"
@@ -3896,6 +3906,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tabbable@npm:^5.2.1":
+  version: 5.2.1
+  resolution: "tabbable@npm:5.2.1"
+  checksum: d26e9eeb880c4c78b59244bac2c931ad46f6c64a01e5c15ba6da348dc86442222912733846a9e63373342a81fa15d4afb31267606b38431510d10b0fb9ec9bba
+  languageName: node
+  linkType: hard
+
 "tapable@npm:^2.1.1, tapable@npm:^2.2.0":
   version: 2.2.1
   resolution: "tapable@npm:2.2.1"