@khanacademy/wonder-blocks-modal 2.3.5 → 2.3.6

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-modal
 
+## 2.3.6
+
+### Patch Changes
+
+-   2546b126: Fix the focus trap navigation to be able to work properly in all scenarios
+
 ## 2.3.5
 
 ### Patch Changes

package/dist/es/index.js

@@ -205,9 +205,10 @@ const styleSheets$2 = {
   })
 };
 
+const FOCUSABLE_ELEMENTS$1 = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
 class FocusTrap extends React.Component {
-  constructor(props) {
-    super(props);
+  constructor(...args) {
+    super(...args);
 
     this.getModalRoot = node => {
       if (!node) {
@@ -223,87 +224,31 @@ class FocusTrap extends React.Component {
       this.modalRoot = modalRoot;
     };
 
-    this.handleGlobalFocus = e => {
-      if (this.ignoreFocusChanges) {
-        return;
-      }
-
-      const target = e.target;
-
-      if (!(target instanceof Node)) {
-        return;
-      }
-
-      const modalRoot = this.modalRoot;
-
-      if (!modalRoot) {
-        return;
-      }
-
-      if (modalRoot.contains(target)) {
-        this.lastNodeFocusedInModal = target;
-      } else {
-        this.focusFirstElementIn(modalRoot);
-
-        if (document.activeElement === this.lastNodeFocusedInModal) {
-          this.focusLastElementIn(modalRoot);
-        }
-
-        this.lastNodeFocusedInModal = document.activeElement;
-      }
+    this.handleFocusMoveToLast = () => {
+      this.focusElementIn(false);
     };
 
-    this.lastNodeFocusedInModal = null;
-    this.ignoreFocusChanges = false;
-  }
-
-  componentDidMount() {
-    window.addEventListener("focus", this.handleGlobalFocus, true);
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener("focus", this.handleGlobalFocus, true);
+    this.handleFocusMoveToFirst = () => {
+      this.focusElementIn(true);
+    };
   }
 
   tryToFocus(node) {
     if (node instanceof HTMLElement) {
-      this.ignoreFocusChanges = true;
-
       try {
         node.focus();
       } catch (e) {}
 
-      this.ignoreFocusChanges = false;
       return document.activeElement === node;
     }
   }
 
-  focusFirstElementIn(currentParent) {
-    const children = currentParent.childNodes;
-
-    for (let i = 0; i < children.length; i++) {
-      const child = children[i];
-
-      if (this.tryToFocus(child) || this.focusFirstElementIn(child)) {
-        return true;
-      }
-    }
-
-    return false;
-  }
-
-  focusLastElementIn(currentParent) {
-    const children = currentParent.childNodes;
-
-    for (let i = children.length - 1; i >= 0; i--) {
-      const child = children[i];
-
-      if (this.tryToFocus(child) || this.focusLastElementIn(child)) {
-        return true;
-      }
-    }
-
-    return false;
+  focusElementIn(isLast) {
+    const modalRootAsHtmlEl = this.modalRoot;
+    const focusableNodes = Array.from(modalRootAsHtmlEl.querySelectorAll(FOCUSABLE_ELEMENTS$1));
+    const nodeIndex = !isLast ? focusableNodes.length - 1 : 0;
+    const focusableNode = focusableNodes[nodeIndex];
+    this.tryToFocus(focusableNode);
   }
 
   render() {
@@ -312,6 +257,8 @@ class FocusTrap extends React.Component {
     } = this.props;
     return React.createElement(React.Fragment, null, React.createElement("div", {
       tabIndex: "0",
+      className: "modal-focus-trap-first",
+      onFocus: this.handleFocusMoveToLast,
       style: {
         position: "fixed"
       }
@@ -320,6 +267,8 @@ class FocusTrap extends React.Component {
       ref: this.getModalRoot
     }, this.props.children), React.createElement("div", {
       tabIndex: "0",
+      className: "modal-focus-trap-last",
+      onFocus: this.handleFocusMoveToFirst,
       style: {
         position: "fixed"
       }