Add focus trap util

js/package.json

@@ -10,6 +10,7 @@
     "color-thief-browser": "^2.0.2",
     "dayjs": "^1.10.4",
     "expose-loader": "^1.0.3",
+    "focus-trap": "^6.6.0",
     "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';
@@ -114,6 +115,7 @@ export default {
   'utils/mapRoutes': mapRoutes,
   'utils/withAttr': withAttr,
   'utils/throttleDebounce': ThrottleDebounce,
+  '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 };