Add focus trap to Modals

Fixes #2663

js/src/common/components/ModalManager.js

@@ -1,11 +1,17 @@
 import Component from '../Component';
+import { createFocusTrap } from '../utils/focusTrap';
 
 /**
  * The `ModalManager` component manages a modal dialog. Only one modal dialog
  * can be shown at once; loading a new component into the ModalManager will
  * overwrite the previous one.
  */
 export default class ModalManager extends Component {
+  /**
+   * @type {import('../utils/focusTrap').FocusTrap | undefined}
+   */
+  focusTrap;
+
   view() {
     const modal = this.attrs.state.modal;
 
@@ -23,13 +29,22 @@ export default class ModalManager extends Component {
     );
   }
 
+  /**
+   * @param {import('mithril').VnodeDOM<{}, this>} vnode
+   */
   oncreate(vnode) {
     super.oncreate(vnode);
 
     // Ensure the modal state is notified about a closed modal, even when the
     // DOM-based Bootstrap JavaScript code triggered the closing of the modal,
     // e.g. via ESC key or a click on the modal backdrop.
     this.$().on('hidden.bs.modal', this.attrs.state.close.bind(this.attrs.state));
+
+    this.focusTrap = createFocusTrap(this.element);
+  }
+
+  onupdate(vnode) {
+    super.onupdate(vnode);
   }
 
   animateShow(readyCallback) {
@@ -50,9 +65,13 @@ export default class ModalManager extends Component {
         keyboard: dismissible,
       })
       .modal('show');
+
+    if (this.focusTrap) this.focusTrap.activate();
   }
 
   animateHide() {
     this.$().modal('hide');
+
+    if (this.focusTrap) this.focusTrap.deactivate();
   }
 }