focus-trap 7.1.0 → 7.2.0

package/index.js

@@ -1,7 +1,5 @@
 import { tabbable, focusable, isFocusable, isTabbable } from 'tabbable';
 
-const rooTrapStack = [];
-
 const activeFocusTraps = {
   activateTrap(trapStack, trap) {
     if (trapStack.length > 0) {
@@ -49,6 +47,16 @@ const isTabEvent = function (e) {
   return e.key === 'Tab' || e.keyCode === 9;
 };
 
+// checks for TAB by default
+const isKeyForward = function (e) {
+  return isTabEvent(e) && !e.shiftKey;
+};
+
+// checks for SHIFT+TAB by default
+const isKeyBackward = function (e) {
+  return isTabEvent(e) && e.shiftKey;
+};
+
 const delay = function (fn) {
   return setTimeout(fn, 0);
 };
@@ -94,17 +102,23 @@ const getActualTarget = function (event) {
     : event.target;
 };
 
+// NOTE: this must be _outside_ `createFocusTrap()` to make sure all traps in this
+//  current instance use the same stack if `userOptions.trapStack` isn't specified
+const internalTrapStack = [];
+
 const createFocusTrap = function (elements, userOptions) {
   // SSR: a live trap shouldn't be created in this type of environment so this
   //  should be safe code to execute if the `document` option isn't specified
   const doc = userOptions?.document || document;
 
-  const trapStack = userOptions?.trapStack || rooTrapStack;
+  const trapStack = userOptions?.trapStack || internalTrapStack;
 
   const config = {
     returnFocusOnDeactivate: true,
     escapeDeactivates: true,
     delayInitialFocus: true,
+    isKeyForward,
+    isKeyBackward,
     ...userOptions,
   };
 
@@ -421,12 +435,12 @@ const createFocusTrap = function (elements, userOptions) {
     }
   };
 
-  // Hijack Tab events on the first and last focusable nodes of the trap,
+  // Hijack key nav events on the first and last focusable nodes of the trap,
   // in order to prevent focus from escaping. If it escapes for even a
   // moment it can end up scrolling the page and causing confusion so we
   // kind of need to capture the action at the keydown phase.
-  const checkTab = function (e) {
-    const target = getActualTarget(e);
+  const checkKeyNav = function (event, isBackward = false) {
+    const target = getActualTarget(event);
     updateTabbableNodes();
 
     let destinationNode = null;
@@ -441,8 +455,8 @@ const createFocusTrap = function (elements, userOptions) {
 
       if (containerIndex < 0) {
         // target not found in any group: quite possible focus has escaped the trap,
-        //  so bring it back in to...
-        if (e.shiftKey) {
+        //  so bring it back into...
+        if (isBackward) {
           // ...the last node in the last group
           destinationNode =
             state.tabbableGroups[state.tabbableGroups.length - 1]
@@ -451,7 +465,7 @@ const createFocusTrap = function (elements, userOptions) {
           // ...the first node in the first group
           destinationNode = state.tabbableGroups[0].firstTabbableNode;
         }
-      } else if (e.shiftKey) {
+      } else if (isBackward) {
         // REVERSE
 
         // is the target the first tabbable node in a group?
@@ -487,6 +501,10 @@ const createFocusTrap = function (elements, userOptions) {
 
           const destinationGroup = state.tabbableGroups[destinationGroupIndex];
           destinationNode = destinationGroup.lastTabbableNode;
+        } else if (!isTabEvent(event)) {
+          // user must have customized the nav keys so we have to move focus manually _within_
+          //  the active group: do this based on the order determined by tabbable()
+          destinationNode = containerGroup.nextTabbableNode(target, false);
         }
       } else {
         // FORWARD
@@ -524,33 +542,43 @@ const createFocusTrap = function (elements, userOptions) {
 
           const destinationGroup = state.tabbableGroups[destinationGroupIndex];
           destinationNode = destinationGroup.firstTabbableNode;
+        } else if (!isTabEvent(event)) {
+          // user must have customized the nav keys so we have to move focus manually _within_
+          //  the active group: do this based on the order determined by tabbable()
+          destinationNode = containerGroup.nextTabbableNode(target);
         }
       }
     } else {
+      // no groups available
       // NOTE: the fallbackFocus option does not support returning false to opt-out
       destinationNode = getNodeForOption('fallbackFocus');
     }
 
     if (destinationNode) {
-      e.preventDefault();
+      if (isTabEvent(event)) {
+        // since tab natively moves focus, we wouldn't have a destination node unless we
+        //  were on the edge of a container and had to move to the next/previous edge, in
+        //  which case we want to prevent default to keep the browser from moving focus
+        //  to where it normally would
+        event.preventDefault();
+      }
       tryFocus(destinationNode);
     }
     // else, let the browser take care of [shift+]tab and move the focus
   };
 
-  const checkKey = function (e) {
+  const checkKey = function (event) {
     if (
-      isEscapeEvent(e) &&
-      valueOrHandler(config.escapeDeactivates, e) !== false
+      isEscapeEvent(event) &&
+      valueOrHandler(config.escapeDeactivates, event) !== false
     ) {
-      e.preventDefault();
+      event.preventDefault();
       trap.deactivate();
       return;
     }
 
-    if (isTabEvent(e)) {
-      checkTab(e);
-      return;
+    if (config.isKeyForward(event) || config.isKeyBackward(event)) {
+      checkKeyNav(event, config.isKeyBackward(event));
     }
   };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "focus-trap",
-  "version": "7.1.0",
+  "version": "7.2.0",
   "description": "Trap focus within a DOM node.",
   "main": "dist/focus-trap.js",
   "module": "dist/focus-trap.esm.js",
@@ -67,33 +67,33 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/preset-env": "^7.20.2",
     "@changesets/cli": "^2.25.2",
-    "@rollup/plugin-babel": "^6.0.2",
-    "@rollup/plugin-commonjs": "^23.0.2",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-commonjs": "^23.0.3",
     "@rollup/plugin-node-resolve": "^15.0.1",
-    "@testing-library/cypress": "^8.0.3",
+    "@testing-library/cypress": "^8.0.7",
     "@types/jquery": "^3.5.14",
     "all-contributors-cli": "^6.24.0",
     "babel-loader": "^9.1.0",
     "cross-env": "^7.0.3",
-    "cypress": "^10.11.0",
+    "cypress": "^11.2.0",
     "cypress-plugin-tab": "^1.0.5",
-    "eslint": "^8.27.0",
+    "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-jest": "^27.1.4",
+    "eslint-plugin-jest": "^27.1.6",
     "onchange": "^7.1.0",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.0",
     "rollup": "^2.79.1",
     "rollup-plugin-inject-process-env": "^1.3.1",
     "rollup-plugin-livereload": "^2.0.5",
-    "rollup-plugin-serve": "^2.0.1",
+    "rollup-plugin-serve": "^2.0.2",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-terser": "^7.0.1",
     "start-server-and-test": "^1.14.0",
-    "typescript": "^4.8.4"
+    "typescript": "^4.9.3"
   }
 }