focus-trap 6.7.2 → 6.7.3

package/index.js

@@ -1,4 +1,4 @@
-import { tabbable, isFocusable, isTabbable } from 'tabbable';
+import { tabbable, focusable, isFocusable, isTabbable } from 'tabbable';
 
 const activeFocusTraps = (function () {
   const trapQueue = [];
@@ -117,7 +117,12 @@ const createFocusTrap = function (elements, userOptions) {
     //  is active, but the trap should never get to a state where there isn't at least one group
     //  with at least one tabbable node in it (that would lead to an error condition that would
     //  result in an error being thrown)
-    // @type {Array<{ container: HTMLElement, firstTabbableNode: HTMLElement|null, lastTabbableNode: HTMLElement|null }>}
+    // @type {Array<{
+    //   container: HTMLElement,
+    //   firstTabbableNode: HTMLElement|null,
+    //   lastTabbableNode: HTMLElement|null,
+    //   nextTabbableNode: (node: HTMLElement, forward: boolean) => HTMLElement|undefined
+    // }>}
     tabbableGroups: [],
 
     nodeFocusedBeforeActivation: null,
@@ -227,11 +232,46 @@ const createFocusTrap = function (elements, userOptions) {
       .map((container) => {
         const tabbableNodes = tabbable(container);
 
+        // NOTE: if we have tabbable nodes, we must have focusable nodes; focusable nodes
+        //  are a superset of tabbable nodes
+        const focusableNodes = focusable(container);
+
         if (tabbableNodes.length > 0) {
           return {
             container,
             firstTabbableNode: tabbableNodes[0],
             lastTabbableNode: tabbableNodes[tabbableNodes.length - 1],
+
+            /**
+             * Finds the __tabbable__ node that follows the given node in the specified direction,
+             *  in this container, if any.
+             * @param {HTMLElement} node
+             * @param {boolean} [forward] True if going in forward tab order; false if going
+             *  in reverse.
+             * @returns {HTMLElement|undefined} The next tabbable node, if any.
+             */
+            nextTabbableNode(node, forward = true) {
+              // NOTE: If tabindex is positive (in order to manipulate the tab order separate
+              //  from the DOM order), this __will not work__ because the list of focusableNodes,
+              //  while it contains tabbable nodes, does not sort its nodes in any order other
+              //  than DOM order, because it can't: Where would you place focusable (but not
+              //  tabbable) nodes in that order? They have no order, because they aren't tabbale...
+              // Support for positive tabindex is already broken and hard to manage (possibly
+              //  not supportable, TBD), so this isn't going to make things worse than they
+              //  already are, and at least makes things better for the majority of cases where
+              //  tabindex is either 0/unset or negative.
+              // FYI, positive tabindex issue: https://github.com/focus-trap/focus-trap/issues/375
+              const nodeIdx = focusableNodes.findIndex((n) => n === node);
+              if (forward) {
+                return focusableNodes
+                  .slice(nodeIdx + 1)
+                  .find((n) => isTabbable(n));
+              }
+              return focusableNodes
+                .slice(0, nodeIdx)
+                .reverse()
+                .find((n) => isTabbable(n));
+            },
           };
         }
 
@@ -352,6 +392,8 @@ const createFocusTrap = function (elements, userOptions) {
       const containerIndex = findIndex(state.tabbableGroups, ({ container }) =>
         container.contains(target)
       );
+      const containerGroup =
+        containerIndex >= 0 ? state.tabbableGroups[containerIndex] : undefined;
 
       if (containerIndex < 0) {
         // target not found in any group: quite possible focus has escaped the trap,
@@ -376,12 +418,15 @@ const createFocusTrap = function (elements, userOptions) {
 
         if (
           startOfGroupIndex < 0 &&
-          (state.tabbableGroups[containerIndex].container === target ||
-            (isFocusable(target) && !isTabbable(target)))
+          (containerGroup.container === target ||
+            (isFocusable(target) &&
+              !isTabbable(target) &&
+              !containerGroup.nextTabbableNode(target, false)))
         ) {
           // an exception case where the target is either the container itself, or
           //  a non-tabbable node that was given focus (i.e. tabindex is negative
-          //  and user clicked on it or node was programmatically given focus), in which
+          //  and user clicked on it or node was programmatically given focus)
+          //  and is not followed by any other tabbable node, in which
           //  case, we should handle shift+tab as if focus were on the container's
           //  first tabbable node, and go to the last tabbable node of the LAST group
           startOfGroupIndex = containerIndex;
@@ -410,12 +455,15 @@ const createFocusTrap = function (elements, userOptions) {
 
         if (
           lastOfGroupIndex < 0 &&
-          (state.tabbableGroups[containerIndex].container === target ||
-            (isFocusable(target) && !isTabbable(target)))
+          (containerGroup.container === target ||
+            (isFocusable(target) &&
+              !isTabbable(target) &&
+              !containerGroup.nextTabbableNode(target)))
         ) {
           // an exception case where the target is the container itself, or
           //  a non-tabbable node that was given focus (i.e. tabindex is negative
-          //  and user clicked on it or node was programmatically given focus), in which
+          //  and user clicked on it or node was programmatically given focus)
+          //  and is not followed by any other tabbable node, in which
           //  case, we should handle tab as if focus were on the container's
           //  last tabbable node, and go to the first tabbable node of the FIRST group
           lastOfGroupIndex = containerIndex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "focus-trap",
-  "version": "6.7.2",
+  "version": "6.7.3",
   "description": "Trap focus within a DOM node.",
   "main": "dist/focus-trap.js",
   "module": "dist/focus-trap.esm.js",
@@ -65,11 +65,11 @@
     "tabbable": "^5.2.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.16.8",
-    "@babel/core": "^7.16.7",
-    "@babel/eslint-parser": "^7.16.5",
-    "@babel/preset-env": "^7.16.8",
-    "@changesets/cli": "^2.19.0",
+    "@babel/cli": "^7.17.0",
+    "@babel/core": "^7.17.2",
+    "@babel/eslint-parser": "^7.17.0",
+    "@babel/preset-env": "^7.16.11",
+    "@changesets/cli": "^2.20.0",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-node-resolve": "^13.1.3",
@@ -78,20 +78,20 @@
     "all-contributors-cli": "^6.20.0",
     "babel-loader": "^8.2.3",
     "cross-env": "^7.0.3",
-    "cypress": "^9.2.1",
+    "cypress": "^9.4.1",
     "cypress-plugin-tab": "^1.0.5",
-    "eslint": "^8.6.0",
+    "eslint": "^8.8.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-cypress": "^2.12.1",
     "onchange": "^7.1.0",
     "prettier": "^2.5.1",
-    "rollup": "^2.63.0",
+    "rollup": "^2.67.1",
     "rollup-plugin-inject-process-env": "^1.3.1",
     "rollup-plugin-livereload": "^2.0.5",
     "rollup-plugin-serve": "^1.1.0",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-terser": "^7.0.1",
     "start-server-and-test": "^1.14.0",
-    "typescript": "^4.5.4"
+    "typescript": "^4.5.5"
   }
 }