focus-trap 7.8.0 → 8.0.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 8.0.0
+
+### Major Changes
+
+- b6ea4b5: **Breaking:** Fixed a long-standing bug where `onPostActivate()` would be called _before_ the initial focus node was focused and the trap was fully activated. ([#1747](https://github.com/focus-trap/focus-trap/issues/1747))
+  - By default (and for many years now), a trap delays setting focus to the initial focus node to the next frame (`setTimeout(0)`) but wasn't delaying calling `onPostActivate()` until after that delay.
+  - With the new `isolateSubtrees='aria-hidden'` option, the currently-focused node's container (a non-subtree being "disabled") would get hidden before the delay was up, resulting in Chrome preventing the effect of `aria-hidden` on that subtree with a warning in the console due to the container being hidden still containing focus (e.g. the "activate trap" button).
+  - **With the fix**, subtree isolation and the call to `onPostActivate()` await the initial focus delay (if there is one, which is default behavior; remove it with `delayInitialFocus=false`) before being applied/called.
+  - This may cause tests to fail, requiring the addition of slight delays before testing a given state (e.g. `await waitFor(() => expect(initialFocusNode).toBeFocused())`.
+  - It may also disrupt current assumptions about the state of the initial focus node in code that runs in your `onPostActivate()` handler (prior to this change, that node would **not** be focused yet; after this change, **it will be focused**).
+
 ## 7.8.0
 
 ### Minor Changes

package/dist/focus-trap.esm.js

@@ -1,8 +1,8 @@
 /*!
-* focus-trap 7.8.0
+* focus-trap 8.0.0
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
 */
-import { tabbable, focusable, isTabbable, getTabIndex, isFocusable } from 'tabbable';
+import { isFocusable, tabbable, focusable, isTabbable, getTabIndex } from 'tabbable';
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
@@ -12,6 +12,31 @@ function _arrayLikeToArray(r, a) {
 function _arrayWithoutHoles(r) {
   if (Array.isArray(r)) return _arrayLikeToArray(r);
 }
+function asyncGeneratorStep(n, t, e, r, o, a, c) {
+  try {
+    var i = n[a](c),
+      u = i.value;
+  } catch (n) {
+    return void e(n);
+  }
+  i.done ? t(u) : Promise.resolve(u).then(r, o);
+}
+function _asyncToGenerator(n) {
+  return function () {
+    var t = this,
+      e = arguments;
+    return new Promise(function (r, o) {
+      var a = n.apply(t, e);
+      function _next(n) {
+        asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
+      }
+      function _throw(n) {
+        asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
+      }
+      _next(void 0);
+    });
+  };
+}
 function _createForOfIteratorHelper(r, e) {
   var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
   if (!t) {
@@ -95,6 +120,114 @@ function _objectSpread2(e) {
   }
   return e;
 }
+function _regenerator() {
+  /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
+  var e,
+    t,
+    r = "function" == typeof Symbol ? Symbol : {},
+    n = r.iterator || "@@iterator",
+    o = r.toStringTag || "@@toStringTag";
+  function i(r, n, o, i) {
+    var c = n && n.prototype instanceof Generator ? n : Generator,
+      u = Object.create(c.prototype);
+    return _regeneratorDefine(u, "_invoke", function (r, n, o) {
+      var i,
+        c,
+        u,
+        f = 0,
+        p = o || [],
+        y = false,
+        G = {
+          p: 0,
+          n: 0,
+          v: e,
+          a: d,
+          f: d.bind(e, 4),
+          d: function (t, r) {
+            return i = t, c = 0, u = e, G.n = r, a;
+          }
+        };
+      function d(r, n) {
+        for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) {
+          var o,
+            i = p[t],
+            d = G.p,
+            l = i[2];
+          r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0));
+        }
+        if (o || r > 1) return a;
+        throw y = true, n;
+      }
+      return function (o, p, l) {
+        if (f > 1) throw TypeError("Generator is already running");
+        for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) {
+          i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u);
+          try {
+            if (f = 2, i) {
+              if (c || (o = "next"), t = i[o]) {
+                if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object");
+                if (!t.done) return t;
+                u = t.value, c < 2 && (c = 0);
+              } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1);
+              i = e;
+            } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break;
+          } catch (t) {
+            i = e, c = 1, u = t;
+          } finally {
+            f = 1;
+          }
+        }
+        return {
+          value: t,
+          done: y
+        };
+      };
+    }(r, o, i), true), u;
+  }
+  var a = {};
+  function Generator() {}
+  function GeneratorFunction() {}
+  function GeneratorFunctionPrototype() {}
+  t = Object.getPrototypeOf;
+  var c = [][n] ? t(t([][n]())) : (_regeneratorDefine(t = {}, n, function () {
+      return this;
+    }), t),
+    u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c);
+  function f(e) {
+    return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e;
+  }
+  return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine(u), _regeneratorDefine(u, o, "Generator"), _regeneratorDefine(u, n, function () {
+    return this;
+  }), _regeneratorDefine(u, "toString", function () {
+    return "[object Generator]";
+  }), (_regenerator = function () {
+    return {
+      w: i,
+      m: f
+    };
+  })();
+}
+function _regeneratorDefine(e, r, n, t) {
+  var i = Object.defineProperty;
+  try {
+    i({}, "", {});
+  } catch (e) {
+    i = 0;
+  }
+  _regeneratorDefine = function (e, r, n, t) {
+    function o(r, n) {
+      _regeneratorDefine(e, r, function (e) {
+        return this._invoke(r, n, e);
+      });
+    }
+    r ? i ? i(e, r, {
+      value: n,
+      enumerable: !t,
+      configurable: !t,
+      writable: !t
+    }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2));
+  }, _regeneratorDefine(e, r, n, t);
+}
 function _toConsumableArray(r) {
   return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
 }
@@ -649,7 +782,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
   var checkPointerDown = function checkPointerDown(e) {
     var target = getActualTarget(e);
     if (findContainerIndex(target, e) >= 0) {
-      // allow the click since it ocurred inside the trap
+      // allow the click since it occurred inside the trap
       return;
     }
     if (valueOrHandler(config.clickOutsideDeactivates, e)) {
@@ -832,9 +965,15 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
   // EVENT LISTENERS
   //
 
+  /**
+   * Adds listeners to the document necessary for trapping focus and attempts to set focus
+   *  to the configured initial focus node. Does nothing if the trap isn't active.
+   * @returns {Promise<void>} Resolved (always) once the initial focus node has been focused.
+   *  Also resolved if the trap isn't active.
+   */
   var addListeners = function addListeners() {
     if (!state.active) {
-      return;
+      return Promise.resolve();
     }
 
     // There can be only one listening focus trap at a time
@@ -842,9 +981,21 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
 
     // Delay ensures that the focused element doesn't capture the event
     // that caused the focus trap activation.
-    state.delayInitialFocusTimer = config.delayInitialFocus ? delay(function () {
+    /** @type {Promise<void>} */
+    var promise;
+    if (config.delayInitialFocus) {
+      // NOTE: Promise constructor callback is called synchronously, which is what we want
+      //  since we need to capture the timer ID immediately
+      promise = new Promise(function (resolve) {
+        state.delayInitialFocusTimer = delay(function () {
+          _tryFocus(getInitialFocusNode());
+          resolve();
+        });
+      });
+    } else {
+      promise = Promise.resolve();
       _tryFocus(getInitialFocusNode());
-    }) : _tryFocus(getInitialFocusNode());
+    }
     doc.addEventListener('focusin', checkFocusIn, true);
     doc.addEventListener('mousedown', checkPointerDown, {
       capture: true,
@@ -863,7 +1014,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
       passive: false
     });
     doc.addEventListener('keydown', checkEscapeKey);
-    return trap;
+    return promise;
   };
 
   /**
@@ -1022,17 +1173,35 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
         state.paused = false;
         state.nodeFocusedBeforeActivation = _getActiveElement(doc);
         onActivate === null || onActivate === void 0 || onActivate();
-        var finishActivation = function finishActivation() {
-          if (checkCanFocusTrap) {
-            updateTabbableNodes();
-          }
-          addListeners();
-          updateObservedNodes();
-          if (config.isolateSubtrees) {
-            trap._setSubtreeIsolation(true);
-          }
-          onPostActivate === null || onPostActivate === void 0 || onPostActivate();
-        };
+        var finishActivation = /*#__PURE__*/function () {
+          var _ref6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+            return _regenerator().w(function (_context) {
+              while (1) switch (_context.n) {
+                case 0:
+                  if (checkCanFocusTrap) {
+                    updateTabbableNodes();
+                  }
+
+                  // NOTE: wait for initial focus node to get focused before we potentially isolate
+                  //  the subtrees with aria-hidden while focus is still in some other subtree and
+                  //  not yet in the trap, resulting in some browsers (e.g. Chrome) logging to the
+                  //  console that they, "Blocked aria-hidden on an element because its descendant
+                  //  retained focus..."
+                  _context.n = 1;
+                  return addListeners();
+                case 1:
+                  trap._setSubtreeIsolation(true);
+                  updateObservedNodes();
+                  onPostActivate === null || onPostActivate === void 0 || onPostActivate();
+                case 2:
+                  return _context.a(2);
+              }
+            }, _callee);
+          }));
+          return function finishActivation() {
+            return _ref6.apply(this, arguments);
+          };
+        }();
         if (checkCanFocusTrap) {
           checkCanFocusTrap(state.containers.concat()).then(finishActivation, finishActivation);
           return this;
@@ -1124,7 +1293,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
       }
       if (state.active) {
         updateTabbableNodes();
-        if (config.isolateSubtrees && !state.paused) {
+        if (!state.paused) {
           trap._setSubtreeIsolation(true);
         }
       }
@@ -1149,18 +1318,41 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
           var onPostPause = getOption(options, 'onPostPause');
           onPause === null || onPause === void 0 || onPause();
           removeListeners();
-          updateObservedNodes();
           trap._setSubtreeIsolation(false);
+          updateObservedNodes();
           onPostPause === null || onPostPause === void 0 || onPostPause();
         } else {
           var onUnpause = getOption(options, 'onUnpause');
           var onPostUnpause = getOption(options, 'onPostUnpause');
           onUnpause === null || onUnpause === void 0 || onUnpause();
-          trap._setSubtreeIsolation(true);
-          updateTabbableNodes();
-          addListeners();
-          updateObservedNodes();
-          onPostUnpause === null || onPostUnpause === void 0 || onPostUnpause();
+          var finishUnpause = /*#__PURE__*/function () {
+            var _ref7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+              return _regenerator().w(function (_context2) {
+                while (1) switch (_context2.n) {
+                  case 0:
+                    updateTabbableNodes();
+
+                    // NOTE: wait for initial focus node to get focused before we potentially isolate
+                    //  the subtrees with aria-hidden while focus is still in some other subtree and
+                    //  not yet in the trap, resulting in some browsers (e.g. Chrome) logging to the
+                    //  console that they, "Blocked aria-hidden on an element because its descendant
+                    //  retained focus..."
+                    _context2.n = 1;
+                    return addListeners();
+                  case 1:
+                    trap._setSubtreeIsolation(true);
+                    updateObservedNodes();
+                    onPostUnpause === null || onPostUnpause === void 0 || onPostUnpause();
+                  case 2:
+                    return _context2.a(2);
+                }
+              }, _callee2);
+            }));
+            return function finishUnpause() {
+              return _ref7.apply(this, arguments);
+            };
+          }();
+          finishUnpause();
         }
         return this;
       }