focus-trap 6.8.0-beta.0 → 6.8.0

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 = [];
@@ -108,16 +108,29 @@ const createFocusTrap = function (elements, userOptions) {
   };
 
   const state = {
+    // containers given to createFocusTrap()
     // @type {Array<HTMLElement>}
     containers: [],
 
-    // list of objects identifying the first and last tabbable nodes in all containers/groups in
-    //  the trap
+    // list of objects identifying tabbable nodes in `containers` in the trap
     // NOTE: it's possible that a group has no tabbable nodes if nodes get removed while the trap
     //  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,
+    //   tabbableNodes: Array<HTMLElement>, // empty if none
+    //   focusableNodes: Array<HTMLElement>, // empty if none
+    //   firstTabbableNode: HTMLElement|null,
+    //   lastTabbableNode: HTMLElement|null,
+    //   nextTabbableNode: (node: HTMLElement, forward: boolean) => HTMLElement|undefined
+    // }>}
+    containerGroups: [], // same order/length as `containers` list
+
+    // references to objects in `containerGroups`, but only those that actually have
+    //  tabbable nodes in them
+    // NOTE: same order as `containers` and `containerGroups`, but __not necessarily__
+    //  the same length
     tabbableGroups: [],
 
     nodeFocusedBeforeActivation: null,
@@ -147,10 +160,25 @@ const createFocusTrap = function (elements, userOptions) {
       : config[configOptionName || optionName];
   };
 
-  const containersContain = function (element) {
-    return !!(
-      element &&
-      state.containers.some((container) => container.contains(element))
+  /**
+   * Finds the index of the container that contains the element.
+   * @param {HTMLElement} element
+   * @returns {number} Index of the container in either `state.containers` or
+   *  `state.containerGroups` (the order/length of these lists are the same); -1
+   *  if the element isn't found.
+   */
+  const findContainerIndex = function (element) {
+    // NOTE: search `containerGroups` because it's possible a group contains no tabbable
+    //  nodes, but still contains focusable nodes (e.g. if they all have `tabindex=-1`)
+    //  and we still need to find the element in there
+    return state.containerGroups.findIndex(
+      ({ container, tabbableNodes }) =>
+        container.contains(element) ||
+        // fall back to explicit tabbable search which will take into consideration any
+        //  web components if the `tabbableOptions.getShadowRoot` option was used for
+        //  the trap, enabling shadow DOM support in tabbable (`Node.contains()` doesn't
+        //  look inside web components even if open)
+        tabbableNodes.find((node) => node === element)
     );
   };
 
@@ -209,7 +237,7 @@ const createFocusTrap = function (elements, userOptions) {
 
     if (node === undefined) {
       // option not specified: use fallback options
-      if (containersContain(doc.activeElement)) {
+      if (findContainerIndex(doc.activeElement) >= 0) {
         node = doc.activeElement;
       } else {
         const firstTabbableGroup = state.tabbableGroups[0];
@@ -231,23 +259,66 @@ const createFocusTrap = function (elements, userOptions) {
   };
 
   const updateTabbableNodes = function () {
-    state.tabbableGroups = state.containers
-      .map((container) => {
-        const tabbableNodes = tabbable(container, {
-          getShadowRoot: config.tabbableOptions?.getShadowRoot,
-        });
+    state.containerGroups = state.containers.map((container) => {
+      const tabbableNodes = tabbable(container, {
+        getShadowRoot: config.tabbableOptions?.getShadowRoot,
+      });
 
-        if (tabbableNodes.length > 0) {
-          return {
-            container,
-            firstTabbableNode: tabbableNodes[0],
-            lastTabbableNode: tabbableNodes[tabbableNodes.length - 1],
-          };
-        }
+      // NOTE: if we have tabbable nodes, we must have focusable nodes; focusable nodes
+      //  are a superset of tabbable nodes
+      const focusableNodes = focusable(container, {
+        getShadowRoot: config.tabbableOptions?.getShadowRoot,
+      });
 
-        return undefined;
-      })
-      .filter((group) => !!group); // remove groups with no tabbable nodes
+      return {
+        container,
+        tabbableNodes,
+        focusableNodes,
+        firstTabbableNode: tabbableNodes.length > 0 ? tabbableNodes[0] : null,
+        lastTabbableNode:
+          tabbableNodes.length > 0
+            ? tabbableNodes[tabbableNodes.length - 1]
+            : null,
+
+        /**
+         * 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 (nodeIdx < 0) {
+            return undefined;
+          }
+
+          if (forward) {
+            return focusableNodes.slice(nodeIdx + 1).find((n) => isTabbable(n));
+          }
+
+          return focusableNodes
+            .slice(0, nodeIdx)
+            .reverse()
+            .find((n) => isTabbable(n));
+        },
+      };
+    });
+
+    state.tabbableGroups = state.containerGroups.filter(
+      (group) => group.tabbableNodes.length > 0
+    );
 
     // throw if no groups have tabbable nodes and we don't have a fallback focus node either
     if (
@@ -292,7 +363,7 @@ const createFocusTrap = function (elements, userOptions) {
   const checkPointerDown = function (e) {
     const target = getActualTarget(e);
 
-    if (containersContain(target)) {
+    if (findContainerIndex(target) >= 0) {
       // allow the click since it ocurred inside the trap
       return;
     }
@@ -331,7 +402,7 @@ const createFocusTrap = function (elements, userOptions) {
   // In case focus escapes the trap for some strange reason, pull it back in.
   const checkFocusIn = function (e) {
     const target = getActualTarget(e);
-    const targetContained = containersContain(target);
+    const targetContained = findContainerIndex(target) >= 0;
 
     // In Firefox when you Tab out of an iframe the Document is briefly focused.
     if (targetContained || target instanceof Document) {
@@ -359,9 +430,9 @@ const createFocusTrap = function (elements, userOptions) {
       // make sure the target is actually contained in a group
       // NOTE: the target may also be the container itself if it's focusable
       //  with tabIndex='-1' and was given initial focus
-      const containerIndex = findIndex(state.tabbableGroups, ({ container }) =>
-        container.contains(target)
-      );
+      const containerIndex = findContainerIndex(target);
+      const containerGroup =
+        containerIndex >= 0 ? state.containerGroups[containerIndex] : undefined;
 
       if (containerIndex < 0) {
         // target not found in any group: quite possible focus has escaped the trap,
@@ -386,12 +457,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;
@@ -420,12 +494,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;
@@ -479,7 +556,7 @@ const createFocusTrap = function (elements, userOptions) {
 
     const target = getActualTarget(e);
 
-    if (containersContain(target)) {
+    if (findContainerIndex(target) >= 0) {
       return;
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "focus-trap",
-  "version": "6.8.0-beta.0",
+  "version": "6.8.0",
   "description": "Trap focus within a DOM node.",
   "main": "dist/focus-trap.js",
   "module": "dist/focus-trap.esm.js",
@@ -38,6 +38,7 @@
     "test:chrome": "CYPRESS_BROWSER=chrome yarn test:cypress:ci",
     "test": "yarn format:check && yarn lint && yarn test:unit && yarn test:types && CYPRESS_BROWSER=chrome yarn test:cypress:ci",
     "prepare": "yarn build",
+    "prepublishOnly": "yarn test && yarn build",
     "release": "yarn build && changeset publish"
   },
   "repository": {
@@ -62,36 +63,36 @@
   },
   "homepage": "https://github.com/focus-trap/focus-trap#readme",
   "dependencies": {
-    "tabbable": "5.3.0-beta.0"
+    "tabbable": "5.3.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.16.8",
-    "@babel/core": "^7.16.12",
-    "@babel/eslint-parser": "^7.16.5",
+    "@babel/cli": "^7.17.6",
+    "@babel/core": "^7.17.9",
+    "@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",
+    "@changesets/cli": "^2.22.0",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^21.1.0",
+    "@rollup/plugin-node-resolve": "^13.2.1",
     "@testing-library/cypress": "^8.0.2",
-    "@types/jquery": "^3.5.13",
+    "@types/jquery": "^3.5.14",
     "all-contributors-cli": "^6.20.0",
-    "babel-loader": "^8.2.3",
+    "babel-loader": "^8.2.5",
     "cross-env": "^7.0.3",
-    "cypress": "^9.3.1",
+    "cypress": "^9.5.4",
     "cypress-plugin-tab": "^1.0.5",
-    "eslint": "^8.7.0",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint": "^8.13.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
     "onchange": "^7.1.0",
-    "prettier": "^2.5.1",
-    "rollup": "^2.66.1",
+    "prettier": "^2.6.2",
+    "rollup": "^2.70.2",
     "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.5"
+    "typescript": "^4.6.3"
   }
 }