focus-trap - npm Package Compare versions

Comparing version 6.3.0 to 6.4.0

CHANGELOG.md

 # Changelog
 
+## 6.4.0
+
+### Minor Changes
+
+- 21c82ce: Bump tabbable from 5.1.6 to 5.2.0. There should be no changes in behavior as a result of this upgrade as `focus-trap` does not currently leverage the new `displayCheck` option.
+
+### Patch Changes
+
+- 1baf62e: Fix focus trapped on initial focus container with tabindex=-1 when pressing shift+tab (#363)
+
 ## 6.3.0
@@ -4,0 +14,0 @@

dist/focus-trap.esm.js

 /*!
-* focus-trap 6.3.0
+* focus-trap 6.4.0
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
@@ -334,2 +334,4 @@ */
       // make sure the target is actually contained in a group
+      // NOTE: the target may also be the container itself if it's tabbable
+      //  with tabIndex='-1' and was given initial focus
       var containerIndex = findIndex(state.tabbableGroups, function (_ref) {
@@ -352,2 +354,3 @@ var container = _ref.container;
         // REVERSE
+        // is the target the first tabbable node in a group?
         var startOfGroupIndex = findIndex(state.tabbableGroups, function (_ref2) {
@@ -358,3 +361,13 @@ var firstTabbableNode = _ref2.firstTabbableNode;
 
+        if (startOfGroupIndex < 0 && state.tabbableGroups[containerIndex].container === e.target) {
+          // an exception case where the target is the container itself, 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;
+        }
+
         if (startOfGroupIndex >= 0) {
+          // YES: then shift+tab should go to the last tabbable node in the
+          //  previous group (and wrap around to the last tabbable node of
+          //  the LAST group if it's the first tabbable node of the FIRST group)
           var destinationGroupIndex = startOfGroupIndex === 0 ? state.tabbableGroups.length - 1 : startOfGroupIndex - 1;
@@ -366,2 +379,3 @@ var destinationGroup = state.tabbableGroups[destinationGroupIndex];
         // FORWARD
+        // is the target the last tabbable node in a group?
         var lastOfGroupIndex = findIndex(state.tabbableGroups, function (_ref3) {
@@ -372,3 +386,13 @@ var lastTabbableNode = _ref3.lastTabbableNode;
 
+        if (lastOfGroupIndex < 0 && state.tabbableGroups[containerIndex].container === e.target) {
+          // an exception case where the target is the container itself, 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;
+        }
+
         if (lastOfGroupIndex >= 0) {
+          // YES: then tab should go to the first tabbable node in the next
+          //  group (and wrap around to the first tabbable node of the FIRST
+          //  group if it's the last tabbable node of the LAST group)
           var _destinationGroupIndex = lastOfGroupIndex === state.tabbableGroups.length - 1 ? 0 : lastOfGroupIndex + 1;
@@ -387,3 +411,4 @@
       tryFocus(destinationNode);
-    }
+    } // else, let the browser take care of [shift+]tab and move the focus
+
   };
@@ -390,0 +415,0 @@

dist/focus-trap.esm.min.js

 /*!
-* focus-trap 6.3.0
+* focus-trap 6.4.0
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
 */
-import{tabbable as e,isFocusable as t}from"tabbable";function n(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}var a,o,i=(o=[],{activateTrap:function(e){if(o.length>0){var t=o[o.length-1];t!==e&&t.pause()}var n=o.indexOf(e);-1===n||o.splice(n,1),o.push(e)},deactivateTrap:function(e){var t=o.indexOf(e);-1!==t&&o.splice(t,1),o.length>0&&o[o.length-1].unpause()}}),c=function(e){return setTimeout(e,0)},u=function(e,t){var n=-1;return e.every((function(e,r){return!t(e)||(n=r,!1)})),n},s=function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];return"function"==typeof e?e.apply(void 0,n):e},l=function(o,l){var f,b=document,v=function(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?r(Object(a),!0).forEach((function(t){n(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):r(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}({returnFocusOnDeactivate:!0,escapeDeactivates:!0,delayInitialFocus:!0},l),p={containers:[],tabbableGroups:[],nodeFocusedBeforeActivation:null,mostRecentlyFocusedNode:null,active:!1,paused:!1},d=function(e){return p.containers.some((function(t){return t.contains(e)}))},m=function(e){var t=v[e];if(!t)return null;var n=t;if("string"==typeof t&&!(n=b.querySelector(t)))throw new Error("`".concat(e,"` refers to no known node"));if("function"==typeof t&&!(n=t()))throw new Error("`".concat(e,"` did not return a node"));return n},y=function(){var e;if(null!==m("initialFocus"))e=m("initialFocus");else if(d(b.activeElement))e=b.activeElement;else{var t=p.tabbableGroups[0];e=t&&t.firstTabbableNode||m("fallbackFocus")}if(!e)throw new Error("Your focus-trap needs to have at least one focusable element");return e},h=function(){if(p.tabbableGroups=p.containers.map((function(t){var n=e(t);if(n.length>0)return{container:t,firstTabbableNode:n[0],lastTabbableNode:n[n.length-1]}})).filter((function(e){return!!e})),p.tabbableGroups.length<=0&&!m("fallbackFocus"))throw new Error("Your focus-trap must have at least one container with at least one tabbable node in it at all times")},g=function e(t){t!==b.activeElement&&(t&&t.focus?(t.focus({preventScroll:!!v.preventScroll}),p.mostRecentlyFocusedNode=t,function(e){return e.tagName&&"input"===e.tagName.toLowerCase()&&"function"==typeof e.select}(t)&&t.select()):e(y()))},O=function(e){d(e.target)||(s(v.clickOutsideDeactivates,e)?f.deactivate({returnFocus:v.returnFocusOnDeactivate&&!t(e.target)}):s(v.allowOutsideClick,e)||e.preventDefault())},w=function(e){var t=d(e.target);t||e.target instanceof Document?t&&(p.mostRecentlyFocusedNode=e.target):(e.stopImmediatePropagation(),g(p.mostRecentlyFocusedNode||y()))},E=function(e){if(!1!==v.escapeDeactivates&&function(e){return"Escape"===e.key||"Esc"===e.key||27===e.keyCode}(e))return e.preventDefault(),void f.deactivate();(function(e){return"Tab"===e.key||9===e.keyCode})(e)&&function(e){h();var t=null;if(p.tabbableGroups.length>0)if(u(p.tabbableGroups,(function(t){return t.container.contains(e.target)}))<0)t=e.shiftKey?p.tabbableGroups[p.tabbableGroups.length-1].lastTabbableNode:p.tabbableGroups[0].firstTabbableNode;else if(e.shiftKey){var n=u(p.tabbableGroups,(function(t){var n=t.firstTabbableNode;return e.target===n}));if(n>=0){var r=0===n?p.tabbableGroups.length-1:n-1;t=p.tabbableGroups[r].lastTabbableNode}}else{var a=u(p.tabbableGroups,(function(t){var n=t.lastTabbableNode;return e.target===n}));if(a>=0){var o=a===p.tabbableGroups.length-1?0:a+1;t=p.tabbableGroups[o].firstTabbableNode}}else t=m("fallbackFocus");t&&(e.preventDefault(),g(t))}(e)},F=function(e){s(v.clickOutsideDeactivates,e)||d(e.target)||s(v.allowOutsideClick,e)||(e.preventDefault(),e.stopImmediatePropagation())},D=function(){if(p.active)return i.activateTrap(f),a=v.delayInitialFocus?c((function(){g(y())})):g(y()),b.addEventListener("focusin",w,!0),b.addEventListener("mousedown",O,{capture:!0,passive:!1}),b.addEventListener("touchstart",O,{capture:!0,passive:!1}),b.addEventListener("click",F,{capture:!0,passive:!1}),b.addEventListener("keydown",E,{capture:!0,passive:!1}),f},k=function(){if(p.active)return b.removeEventListener("focusin",w,!0),b.removeEventListener("mousedown",O,!0),b.removeEventListener("touchstart",O,!0),b.removeEventListener("click",F,!0),b.removeEventListener("keydown",E,!0),f};return(f={activate:function(e){if(p.active)return this;h(),p.active=!0,p.paused=!1,p.nodeFocusedBeforeActivation=b.activeElement;var t=e&&e.onActivate?e.onActivate:v.onActivate;return t&&t(),D(),this},deactivate:function(e){if(!p.active)return this;clearTimeout(a),k(),p.active=!1,p.paused=!1,i.deactivateTrap(f);var t=e&&void 0!==e.onDeactivate?e.onDeactivate:v.onDeactivate;return t&&t(),(e&&void 0!==e.returnFocus?e.returnFocus:v.returnFocusOnDeactivate)&&c((function(){var e;g((e=p.nodeFocusedBeforeActivation,m("setReturnFocus")||e))})),this},pause:function(){return p.paused||!p.active||(p.paused=!0,k()),this},unpause:function(){return p.paused&&p.active?(p.paused=!1,h(),D(),this):this},updateContainerElements:function(e){var t=[].concat(e).filter(Boolean);return p.containers=t.map((function(e){return"string"==typeof e?b.querySelector(e):e})),p.active&&h(),this}}).updateContainerElements(o),f};export{l as createFocusTrap};
+import{tabbable as e,isFocusable as t}from"tabbable";function n(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}var r,o,i=(o=[],{activateTrap:function(e){if(o.length>0){var t=o[o.length-1];t!==e&&t.pause()}var n=o.indexOf(e);-1===n||o.splice(n,1),o.push(e)},deactivateTrap:function(e){var t=o.indexOf(e);-1!==t&&o.splice(t,1),o.length>0&&o[o.length-1].unpause()}}),c=function(e){return setTimeout(e,0)},u=function(e,t){var n=-1;return e.every((function(e,a){return!t(e)||(n=a,!1)})),n},s=function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),a=1;a<t;a++)n[a-1]=arguments[a];return"function"==typeof e?e.apply(void 0,n):e},l=function(o,l){var f,b=document,v=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?a(Object(r),!0).forEach((function(t){n(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):a(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({returnFocusOnDeactivate:!0,escapeDeactivates:!0,delayInitialFocus:!0},l),p={containers:[],tabbableGroups:[],nodeFocusedBeforeActivation:null,mostRecentlyFocusedNode:null,active:!1,paused:!1},d=function(e){return p.containers.some((function(t){return t.contains(e)}))},m=function(e){var t=v[e];if(!t)return null;var n=t;if("string"==typeof t&&!(n=b.querySelector(t)))throw new Error("`".concat(e,"` refers to no known node"));if("function"==typeof t&&!(n=t()))throw new Error("`".concat(e,"` did not return a node"));return n},g=function(){var e;if(null!==m("initialFocus"))e=m("initialFocus");else if(d(b.activeElement))e=b.activeElement;else{var t=p.tabbableGroups[0];e=t&&t.firstTabbableNode||m("fallbackFocus")}if(!e)throw new Error("Your focus-trap needs to have at least one focusable element");return e},y=function(){if(p.tabbableGroups=p.containers.map((function(t){var n=e(t);if(n.length>0)return{container:t,firstTabbableNode:n[0],lastTabbableNode:n[n.length-1]}})).filter((function(e){return!!e})),p.tabbableGroups.length<=0&&!m("fallbackFocus"))throw new Error("Your focus-trap must have at least one container with at least one tabbable node in it at all times")},h=function e(t){t!==b.activeElement&&(t&&t.focus?(t.focus({preventScroll:!!v.preventScroll}),p.mostRecentlyFocusedNode=t,function(e){return e.tagName&&"input"===e.tagName.toLowerCase()&&"function"==typeof e.select}(t)&&t.select()):e(g()))},O=function(e){d(e.target)||(s(v.clickOutsideDeactivates,e)?f.deactivate({returnFocus:v.returnFocusOnDeactivate&&!t(e.target)}):s(v.allowOutsideClick,e)||e.preventDefault())},w=function(e){var t=d(e.target);t||e.target instanceof Document?t&&(p.mostRecentlyFocusedNode=e.target):(e.stopImmediatePropagation(),h(p.mostRecentlyFocusedNode||g()))},E=function(e){if(!1!==v.escapeDeactivates&&function(e){return"Escape"===e.key||"Esc"===e.key||27===e.keyCode}(e))return e.preventDefault(),void f.deactivate();(function(e){return"Tab"===e.key||9===e.keyCode})(e)&&function(e){y();var t=null;if(p.tabbableGroups.length>0){var n=u(p.tabbableGroups,(function(t){return t.container.contains(e.target)}));if(n<0)t=e.shiftKey?p.tabbableGroups[p.tabbableGroups.length-1].lastTabbableNode:p.tabbableGroups[0].firstTabbableNode;else if(e.shiftKey){var a=u(p.tabbableGroups,(function(t){var n=t.firstTabbableNode;return e.target===n}));if(a<0&&p.tabbableGroups[n].container===e.target&&(a=n),a>=0){var r=0===a?p.tabbableGroups.length-1:a-1;t=p.tabbableGroups[r].lastTabbableNode}}else{var o=u(p.tabbableGroups,(function(t){var n=t.lastTabbableNode;return e.target===n}));if(o<0&&p.tabbableGroups[n].container===e.target&&(o=n),o>=0){var i=o===p.tabbableGroups.length-1?0:o+1;t=p.tabbableGroups[i].firstTabbableNode}}}else t=m("fallbackFocus");t&&(e.preventDefault(),h(t))}(e)},F=function(e){s(v.clickOutsideDeactivates,e)||d(e.target)||s(v.allowOutsideClick,e)||(e.preventDefault(),e.stopImmediatePropagation())},D=function(){if(p.active)return i.activateTrap(f),r=v.delayInitialFocus?c((function(){h(g())})):h(g()),b.addEventListener("focusin",w,!0),b.addEventListener("mousedown",O,{capture:!0,passive:!1}),b.addEventListener("touchstart",O,{capture:!0,passive:!1}),b.addEventListener("click",F,{capture:!0,passive:!1}),b.addEventListener("keydown",E,{capture:!0,passive:!1}),f},k=function(){if(p.active)return b.removeEventListener("focusin",w,!0),b.removeEventListener("mousedown",O,!0),b.removeEventListener("touchstart",O,!0),b.removeEventListener("click",F,!0),b.removeEventListener("keydown",E,!0),f};return(f={activate:function(e){if(p.active)return this;y(),p.active=!0,p.paused=!1,p.nodeFocusedBeforeActivation=b.activeElement;var t=e&&e.onActivate?e.onActivate:v.onActivate;return t&&t(),D(),this},deactivate:function(e){if(!p.active)return this;clearTimeout(r),k(),p.active=!1,p.paused=!1,i.deactivateTrap(f);var t=e&&void 0!==e.onDeactivate?e.onDeactivate:v.onDeactivate;return t&&t(),(e&&void 0!==e.returnFocus?e.returnFocus:v.returnFocusOnDeactivate)&&c((function(){var e;h((e=p.nodeFocusedBeforeActivation,m("setReturnFocus")||e))})),this},pause:function(){return p.paused||!p.active||(p.paused=!0,k()),this},unpause:function(){return p.paused&&p.active?(p.paused=!1,y(),D(),this):this},updateContainerElements:function(e){var t=[].concat(e).filter(Boolean);return p.containers=t.map((function(e){return"string"==typeof e?b.querySelector(e):e})),p.active&&y(),this}}).updateContainerElements(o),f};export{l as createFocusTrap};
 //# sourceMappingURL=focus-trap.esm.min.js.map

dist/focus-trap.js

 /*!
-* focus-trap 6.3.0
+* focus-trap 6.4.0
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
@@ -338,2 +338,4 @@ */
       // make sure the target is actually contained in a group
+      // NOTE: the target may also be the container itself if it's tabbable
+      //  with tabIndex='-1' and was given initial focus
       var containerIndex = findIndex(state.tabbableGroups, function (_ref) {
@@ -356,2 +358,3 @@ var container = _ref.container;
         // REVERSE
+        // is the target the first tabbable node in a group?
         var startOfGroupIndex = findIndex(state.tabbableGroups, function (_ref2) {
@@ -362,3 +365,13 @@ var firstTabbableNode = _ref2.firstTabbableNode;
 
+        if (startOfGroupIndex < 0 && state.tabbableGroups[containerIndex].container === e.target) {
+          // an exception case where the target is the container itself, 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;
+        }
+
         if (startOfGroupIndex >= 0) {
+          // YES: then shift+tab should go to the last tabbable node in the
+          //  previous group (and wrap around to the last tabbable node of
+          //  the LAST group if it's the first tabbable node of the FIRST group)
           var destinationGroupIndex = startOfGroupIndex === 0 ? state.tabbableGroups.length - 1 : startOfGroupIndex - 1;
@@ -370,2 +383,3 @@ var destinationGroup = state.tabbableGroups[destinationGroupIndex];
         // FORWARD
+        // is the target the last tabbable node in a group?
         var lastOfGroupIndex = findIndex(state.tabbableGroups, function (_ref3) {
@@ -376,3 +390,13 @@ var lastTabbableNode = _ref3.lastTabbableNode;
 
+        if (lastOfGroupIndex < 0 && state.tabbableGroups[containerIndex].container === e.target) {
+          // an exception case where the target is the container itself, 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;
+        }
+
         if (lastOfGroupIndex >= 0) {
+          // YES: then tab should go to the first tabbable node in the next
+          //  group (and wrap around to the first tabbable node of the FIRST
+          //  group if it's the last tabbable node of the LAST group)
           var _destinationGroupIndex = lastOfGroupIndex === state.tabbableGroups.length - 1 ? 0 : lastOfGroupIndex + 1;
@@ -391,3 +415,4 @@
       tryFocus(destinationNode);
-    }
+    } // else, let the browser take care of [shift+]tab and move the focus
+
   };
@@ -394,0 +419,0 @@

dist/focus-trap.min.js

 /*!
-* focus-trap 6.3.0
+* focus-trap 6.4.0
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
 */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("tabbable");function n(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}var a,o=(a=[],{activateTrap:function(e){if(a.length>0){var t=a[a.length-1];t!==e&&t.pause()}var n=a.indexOf(e);-1===n||a.splice(n,1),a.push(e)},deactivateTrap:function(e){var t=a.indexOf(e);-1!==t&&a.splice(t,1),a.length>0&&a[a.length-1].unpause()}}),i=function(e){return setTimeout(e,0)},c=function(e,t){var n=-1;return e.every((function(e,r){return!t(e)||(n=r,!1)})),n},u=function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];return"function"==typeof e?e.apply(void 0,n):e};exports.createFocusTrap=function(a,s){var l,f=document,b=function(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?r(Object(a),!0).forEach((function(t){n(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):r(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}({returnFocusOnDeactivate:!0,escapeDeactivates:!0,delayInitialFocus:!0},s),v={containers:[],tabbableGroups:[],nodeFocusedBeforeActivation:null,mostRecentlyFocusedNode:null,active:!1,paused:!1},p=function(e){return v.containers.some((function(t){return t.contains(e)}))},d=function(e){var t=b[e];if(!t)return null;var n=t;if("string"==typeof t&&!(n=f.querySelector(t)))throw new Error("`".concat(e,"` refers to no known node"));if("function"==typeof t&&!(n=t()))throw new Error("`".concat(e,"` did not return a node"));return n},y=function(){var e;if(null!==d("initialFocus"))e=d("initialFocus");else if(p(f.activeElement))e=f.activeElement;else{var t=v.tabbableGroups[0];e=t&&t.firstTabbableNode||d("fallbackFocus")}if(!e)throw new Error("Your focus-trap needs to have at least one focusable element");return e},m=function(){if(v.tabbableGroups=v.containers.map((function(e){var n=t.tabbable(e);if(n.length>0)return{container:e,firstTabbableNode:n[0],lastTabbableNode:n[n.length-1]}})).filter((function(e){return!!e})),v.tabbableGroups.length<=0&&!d("fallbackFocus"))throw new Error("Your focus-trap must have at least one container with at least one tabbable node in it at all times")},h=function e(t){t!==f.activeElement&&(t&&t.focus?(t.focus({preventScroll:!!b.preventScroll}),v.mostRecentlyFocusedNode=t,function(e){return e.tagName&&"input"===e.tagName.toLowerCase()&&"function"==typeof e.select}(t)&&t.select()):e(y()))},g=function(e){p(e.target)||(u(b.clickOutsideDeactivates,e)?l.deactivate({returnFocus:b.returnFocusOnDeactivate&&!t.isFocusable(e.target)}):u(b.allowOutsideClick,e)||e.preventDefault())},O=function(e){var t=p(e.target);t||e.target instanceof Document?t&&(v.mostRecentlyFocusedNode=e.target):(e.stopImmediatePropagation(),h(v.mostRecentlyFocusedNode||y()))},w=function(e){if(!1!==b.escapeDeactivates&&function(e){return"Escape"===e.key||"Esc"===e.key||27===e.keyCode}(e))return e.preventDefault(),void l.deactivate();(function(e){return"Tab"===e.key||9===e.keyCode})(e)&&function(e){m();var t=null;if(v.tabbableGroups.length>0)if(c(v.tabbableGroups,(function(t){return t.container.contains(e.target)}))<0)t=e.shiftKey?v.tabbableGroups[v.tabbableGroups.length-1].lastTabbableNode:v.tabbableGroups[0].firstTabbableNode;else if(e.shiftKey){var n=c(v.tabbableGroups,(function(t){var n=t.firstTabbableNode;return e.target===n}));if(n>=0){var r=0===n?v.tabbableGroups.length-1:n-1;t=v.tabbableGroups[r].lastTabbableNode}}else{var a=c(v.tabbableGroups,(function(t){var n=t.lastTabbableNode;return e.target===n}));if(a>=0){var o=a===v.tabbableGroups.length-1?0:a+1;t=v.tabbableGroups[o].firstTabbableNode}}else t=d("fallbackFocus");t&&(e.preventDefault(),h(t))}(e)},E=function(e){u(b.clickOutsideDeactivates,e)||p(e.target)||u(b.allowOutsideClick,e)||(e.preventDefault(),e.stopImmediatePropagation())},F=function(){if(v.active)return o.activateTrap(l),e=b.delayInitialFocus?i((function(){h(y())})):h(y()),f.addEventListener("focusin",O,!0),f.addEventListener("mousedown",g,{capture:!0,passive:!1}),f.addEventListener("touchstart",g,{capture:!0,passive:!1}),f.addEventListener("click",E,{capture:!0,passive:!1}),f.addEventListener("keydown",w,{capture:!0,passive:!1}),l},D=function(){if(v.active)return f.removeEventListener("focusin",O,!0),f.removeEventListener("mousedown",g,!0),f.removeEventListener("touchstart",g,!0),f.removeEventListener("click",E,!0),f.removeEventListener("keydown",w,!0),l};return(l={activate:function(e){if(v.active)return this;m(),v.active=!0,v.paused=!1,v.nodeFocusedBeforeActivation=f.activeElement;var t=e&&e.onActivate?e.onActivate:b.onActivate;return t&&t(),F(),this},deactivate:function(t){if(!v.active)return this;clearTimeout(e),D(),v.active=!1,v.paused=!1,o.deactivateTrap(l);var n=t&&void 0!==t.onDeactivate?t.onDeactivate:b.onDeactivate;return n&&n(),(t&&void 0!==t.returnFocus?t.returnFocus:b.returnFocusOnDeactivate)&&i((function(){var e;h((e=v.nodeFocusedBeforeActivation,d("setReturnFocus")||e))})),this},pause:function(){return v.paused||!v.active||(v.paused=!0,D()),this},unpause:function(){return v.paused&&v.active?(v.paused=!1,m(),F(),this):this},updateContainerElements:function(e){var t=[].concat(e).filter(Boolean);return v.containers=t.map((function(e){return"string"==typeof e?f.querySelector(e):e})),v.active&&m(),this}}).updateContainerElements(a),l};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("tabbable");function n(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}var r,o=(r=[],{activateTrap:function(e){if(r.length>0){var t=r[r.length-1];t!==e&&t.pause()}var n=r.indexOf(e);-1===n||r.splice(n,1),r.push(e)},deactivateTrap:function(e){var t=r.indexOf(e);-1!==t&&r.splice(t,1),r.length>0&&r[r.length-1].unpause()}}),i=function(e){return setTimeout(e,0)},c=function(e,t){var n=-1;return e.every((function(e,a){return!t(e)||(n=a,!1)})),n},u=function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),a=1;a<t;a++)n[a-1]=arguments[a];return"function"==typeof e?e.apply(void 0,n):e};exports.createFocusTrap=function(r,s){var l,b=document,f=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?a(Object(r),!0).forEach((function(t){n(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):a(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({returnFocusOnDeactivate:!0,escapeDeactivates:!0,delayInitialFocus:!0},s),v={containers:[],tabbableGroups:[],nodeFocusedBeforeActivation:null,mostRecentlyFocusedNode:null,active:!1,paused:!1},p=function(e){return v.containers.some((function(t){return t.contains(e)}))},d=function(e){var t=f[e];if(!t)return null;var n=t;if("string"==typeof t&&!(n=b.querySelector(t)))throw new Error("`".concat(e,"` refers to no known node"));if("function"==typeof t&&!(n=t()))throw new Error("`".concat(e,"` did not return a node"));return n},y=function(){var e;if(null!==d("initialFocus"))e=d("initialFocus");else if(p(b.activeElement))e=b.activeElement;else{var t=v.tabbableGroups[0];e=t&&t.firstTabbableNode||d("fallbackFocus")}if(!e)throw new Error("Your focus-trap needs to have at least one focusable element");return e},g=function(){if(v.tabbableGroups=v.containers.map((function(e){var n=t.tabbable(e);if(n.length>0)return{container:e,firstTabbableNode:n[0],lastTabbableNode:n[n.length-1]}})).filter((function(e){return!!e})),v.tabbableGroups.length<=0&&!d("fallbackFocus"))throw new Error("Your focus-trap must have at least one container with at least one tabbable node in it at all times")},m=function e(t){t!==b.activeElement&&(t&&t.focus?(t.focus({preventScroll:!!f.preventScroll}),v.mostRecentlyFocusedNode=t,function(e){return e.tagName&&"input"===e.tagName.toLowerCase()&&"function"==typeof e.select}(t)&&t.select()):e(y()))},h=function(e){p(e.target)||(u(f.clickOutsideDeactivates,e)?l.deactivate({returnFocus:f.returnFocusOnDeactivate&&!t.isFocusable(e.target)}):u(f.allowOutsideClick,e)||e.preventDefault())},O=function(e){var t=p(e.target);t||e.target instanceof Document?t&&(v.mostRecentlyFocusedNode=e.target):(e.stopImmediatePropagation(),m(v.mostRecentlyFocusedNode||y()))},w=function(e){if(!1!==f.escapeDeactivates&&function(e){return"Escape"===e.key||"Esc"===e.key||27===e.keyCode}(e))return e.preventDefault(),void l.deactivate();(function(e){return"Tab"===e.key||9===e.keyCode})(e)&&function(e){g();var t=null;if(v.tabbableGroups.length>0){var n=c(v.tabbableGroups,(function(t){return t.container.contains(e.target)}));if(n<0)t=e.shiftKey?v.tabbableGroups[v.tabbableGroups.length-1].lastTabbableNode:v.tabbableGroups[0].firstTabbableNode;else if(e.shiftKey){var a=c(v.tabbableGroups,(function(t){var n=t.firstTabbableNode;return e.target===n}));if(a<0&&v.tabbableGroups[n].container===e.target&&(a=n),a>=0){var r=0===a?v.tabbableGroups.length-1:a-1;t=v.tabbableGroups[r].lastTabbableNode}}else{var o=c(v.tabbableGroups,(function(t){var n=t.lastTabbableNode;return e.target===n}));if(o<0&&v.tabbableGroups[n].container===e.target&&(o=n),o>=0){var i=o===v.tabbableGroups.length-1?0:o+1;t=v.tabbableGroups[i].firstTabbableNode}}}else t=d("fallbackFocus");t&&(e.preventDefault(),m(t))}(e)},E=function(e){u(f.clickOutsideDeactivates,e)||p(e.target)||u(f.allowOutsideClick,e)||(e.preventDefault(),e.stopImmediatePropagation())},F=function(){if(v.active)return o.activateTrap(l),e=f.delayInitialFocus?i((function(){m(y())})):m(y()),b.addEventListener("focusin",O,!0),b.addEventListener("mousedown",h,{capture:!0,passive:!1}),b.addEventListener("touchstart",h,{capture:!0,passive:!1}),b.addEventListener("click",E,{capture:!0,passive:!1}),b.addEventListener("keydown",w,{capture:!0,passive:!1}),l},D=function(){if(v.active)return b.removeEventListener("focusin",O,!0),b.removeEventListener("mousedown",h,!0),b.removeEventListener("touchstart",h,!0),b.removeEventListener("click",E,!0),b.removeEventListener("keydown",w,!0),l};return(l={activate:function(e){if(v.active)return this;g(),v.active=!0,v.paused=!1,v.nodeFocusedBeforeActivation=b.activeElement;var t=e&&e.onActivate?e.onActivate:f.onActivate;return t&&t(),F(),this},deactivate:function(t){if(!v.active)return this;clearTimeout(e),D(),v.active=!1,v.paused=!1,o.deactivateTrap(l);var n=t&&void 0!==t.onDeactivate?t.onDeactivate:f.onDeactivate;return n&&n(),(t&&void 0!==t.returnFocus?t.returnFocus:f.returnFocusOnDeactivate)&&i((function(){var e;m((e=v.nodeFocusedBeforeActivation,d("setReturnFocus")||e))})),this},pause:function(){return v.paused||!v.active||(v.paused=!0,D()),this},unpause:function(){return v.paused&&v.active?(v.paused=!1,g(),F(),this):this},updateContainerElements:function(e){var t=[].concat(e).filter(Boolean);return v.containers=t.map((function(e){return"string"==typeof e?b.querySelector(e):e})),v.active&&g(),this}}).updateContainerElements(r),l};
 //# sourceMappingURL=focus-trap.min.js.map

dist/focus-trap.umd.js

 /*!
-* focus-trap 6.3.0
+* focus-trap 6.4.0
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
@@ -343,2 +343,4 @@ */
         // make sure the target is actually contained in a group
+        // NOTE: the target may also be the container itself if it's tabbable
+        //  with tabIndex='-1' and was given initial focus
         var containerIndex = findIndex(state.tabbableGroups, function (_ref) {
@@ -361,2 +363,3 @@ var container = _ref.container;
           // REVERSE
+          // is the target the first tabbable node in a group?
           var startOfGroupIndex = findIndex(state.tabbableGroups, function (_ref2) {
@@ -367,3 +370,13 @@ var firstTabbableNode = _ref2.firstTabbableNode;
 
+          if (startOfGroupIndex < 0 && state.tabbableGroups[containerIndex].container === e.target) {
+            // an exception case where the target is the container itself, 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;
+          }
+
           if (startOfGroupIndex >= 0) {
+            // YES: then shift+tab should go to the last tabbable node in the
+            //  previous group (and wrap around to the last tabbable node of
+            //  the LAST group if it's the first tabbable node of the FIRST group)
             var destinationGroupIndex = startOfGroupIndex === 0 ? state.tabbableGroups.length - 1 : startOfGroupIndex - 1;
@@ -375,2 +388,3 @@ var destinationGroup = state.tabbableGroups[destinationGroupIndex];
           // FORWARD
+          // is the target the last tabbable node in a group?
           var lastOfGroupIndex = findIndex(state.tabbableGroups, function (_ref3) {
@@ -381,3 +395,13 @@ var lastTabbableNode = _ref3.lastTabbableNode;
 
+          if (lastOfGroupIndex < 0 && state.tabbableGroups[containerIndex].container === e.target) {
+            // an exception case where the target is the container itself, 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;
+          }
+
           if (lastOfGroupIndex >= 0) {
+            // YES: then tab should go to the first tabbable node in the next
+            //  group (and wrap around to the first tabbable node of the FIRST
+            //  group if it's the last tabbable node of the LAST group)
             var _destinationGroupIndex = lastOfGroupIndex === state.tabbableGroups.length - 1 ? 0 : lastOfGroupIndex + 1;
@@ -396,3 +420,4 @@
         tryFocus(destinationNode);
-      }
+      } // else, let the browser take care of [shift+]tab and move the focus
+
     };
@@ -399,0 +424,0 @@

dist/focus-trap.umd.min.js

 /*!
-* focus-trap 6.3.0
+* focus-trap 6.4.0
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
 */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("tabbable")):"function"==typeof define&&define.amd?define(["exports","tabbable"],t):(e="undefined"!=typeof globalThis?globalThis:e||self,function(){var n=e.focusTrap,a=e.focusTrap={};t(a,e.tabbable),a.noConflict=function(){return e.focusTrap=n,a}}())}(this,(function(e,t){"use strict";function n(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}var r,o,i=(o=[],{activateTrap:function(e){if(o.length>0){var t=o[o.length-1];t!==e&&t.pause()}var n=o.indexOf(e);-1===n||o.splice(n,1),o.push(e)},deactivateTrap:function(e){var t=o.indexOf(e);-1!==t&&o.splice(t,1),o.length>0&&o[o.length-1].unpause()}}),u=function(e){return setTimeout(e,0)},c=function(e,t){var n=-1;return e.every((function(e,a){return!t(e)||(n=a,!1)})),n},s=function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),a=1;a<t;a++)n[a-1]=arguments[a];return"function"==typeof e?e.apply(void 0,n):e};e.createFocusTrap=function(e,o){var l,f=document,b=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?a(Object(r),!0).forEach((function(t){n(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):a(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({returnFocusOnDeactivate:!0,escapeDeactivates:!0,delayInitialFocus:!0},o),v={containers:[],tabbableGroups:[],nodeFocusedBeforeActivation:null,mostRecentlyFocusedNode:null,active:!1,paused:!1},p=function(e){return v.containers.some((function(t){return t.contains(e)}))},d=function(e){var t=b[e];if(!t)return null;var n=t;if("string"==typeof t&&!(n=f.querySelector(t)))throw new Error("`".concat(e,"` refers to no known node"));if("function"==typeof t&&!(n=t()))throw new Error("`".concat(e,"` did not return a node"));return n},y=function(){var e;if(null!==d("initialFocus"))e=d("initialFocus");else if(p(f.activeElement))e=f.activeElement;else{var t=v.tabbableGroups[0];e=t&&t.firstTabbableNode||d("fallbackFocus")}if(!e)throw new Error("Your focus-trap needs to have at least one focusable element");return e},h=function(){if(v.tabbableGroups=v.containers.map((function(e){var n=t.tabbable(e);if(n.length>0)return{container:e,firstTabbableNode:n[0],lastTabbableNode:n[n.length-1]}})).filter((function(e){return!!e})),v.tabbableGroups.length<=0&&!d("fallbackFocus"))throw new Error("Your focus-trap must have at least one container with at least one tabbable node in it at all times")},m=function e(t){t!==f.activeElement&&(t&&t.focus?(t.focus({preventScroll:!!b.preventScroll}),v.mostRecentlyFocusedNode=t,function(e){return e.tagName&&"input"===e.tagName.toLowerCase()&&"function"==typeof e.select}(t)&&t.select()):e(y()))},g=function(e){p(e.target)||(s(b.clickOutsideDeactivates,e)?l.deactivate({returnFocus:b.returnFocusOnDeactivate&&!t.isFocusable(e.target)}):s(b.allowOutsideClick,e)||e.preventDefault())},O=function(e){var t=p(e.target);t||e.target instanceof Document?t&&(v.mostRecentlyFocusedNode=e.target):(e.stopImmediatePropagation(),m(v.mostRecentlyFocusedNode||y()))},w=function(e){if(!1!==b.escapeDeactivates&&function(e){return"Escape"===e.key||"Esc"===e.key||27===e.keyCode}(e))return e.preventDefault(),void l.deactivate();(function(e){return"Tab"===e.key||9===e.keyCode})(e)&&function(e){h();var t=null;if(v.tabbableGroups.length>0)if(c(v.tabbableGroups,(function(t){return t.container.contains(e.target)}))<0)t=e.shiftKey?v.tabbableGroups[v.tabbableGroups.length-1].lastTabbableNode:v.tabbableGroups[0].firstTabbableNode;else if(e.shiftKey){var n=c(v.tabbableGroups,(function(t){var n=t.firstTabbableNode;return e.target===n}));if(n>=0){var a=0===n?v.tabbableGroups.length-1:n-1;t=v.tabbableGroups[a].lastTabbableNode}}else{var r=c(v.tabbableGroups,(function(t){var n=t.lastTabbableNode;return e.target===n}));if(r>=0){var o=r===v.tabbableGroups.length-1?0:r+1;t=v.tabbableGroups[o].firstTabbableNode}}else t=d("fallbackFocus");t&&(e.preventDefault(),m(t))}(e)},E=function(e){s(b.clickOutsideDeactivates,e)||p(e.target)||s(b.allowOutsideClick,e)||(e.preventDefault(),e.stopImmediatePropagation())},F=function(){if(v.active)return i.activateTrap(l),r=b.delayInitialFocus?u((function(){m(y())})):m(y()),f.addEventListener("focusin",O,!0),f.addEventListener("mousedown",g,{capture:!0,passive:!1}),f.addEventListener("touchstart",g,{capture:!0,passive:!1}),f.addEventListener("click",E,{capture:!0,passive:!1}),f.addEventListener("keydown",w,{capture:!0,passive:!1}),l},T=function(){if(v.active)return f.removeEventListener("focusin",O,!0),f.removeEventListener("mousedown",g,!0),f.removeEventListener("touchstart",g,!0),f.removeEventListener("click",E,!0),f.removeEventListener("keydown",w,!0),l};return(l={activate:function(e){if(v.active)return this;h(),v.active=!0,v.paused=!1,v.nodeFocusedBeforeActivation=f.activeElement;var t=e&&e.onActivate?e.onActivate:b.onActivate;return t&&t(),F(),this},deactivate:function(e){if(!v.active)return this;clearTimeout(r),T(),v.active=!1,v.paused=!1,i.deactivateTrap(l);var t=e&&void 0!==e.onDeactivate?e.onDeactivate:b.onDeactivate;return t&&t(),(e&&void 0!==e.returnFocus?e.returnFocus:b.returnFocusOnDeactivate)&&u((function(){var e;m((e=v.nodeFocusedBeforeActivation,d("setReturnFocus")||e))})),this},pause:function(){return v.paused||!v.active||(v.paused=!0,T()),this},unpause:function(){return v.paused&&v.active?(v.paused=!1,h(),F(),this):this},updateContainerElements:function(e){var t=[].concat(e).filter(Boolean);return v.containers=t.map((function(e){return"string"==typeof e?f.querySelector(e):e})),v.active&&h(),this}}).updateContainerElements(e),l},Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("tabbable")):"function"==typeof define&&define.amd?define(["exports","tabbable"],t):(e="undefined"!=typeof globalThis?globalThis:e||self,function(){var n=e.focusTrap,a=e.focusTrap={};t(a,e.tabbable),a.noConflict=function(){return e.focusTrap=n,a}}())}(this,(function(e,t){"use strict";function n(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}var r,o,i=(o=[],{activateTrap:function(e){if(o.length>0){var t=o[o.length-1];t!==e&&t.pause()}var n=o.indexOf(e);-1===n||o.splice(n,1),o.push(e)},deactivateTrap:function(e){var t=o.indexOf(e);-1!==t&&o.splice(t,1),o.length>0&&o[o.length-1].unpause()}}),u=function(e){return setTimeout(e,0)},c=function(e,t){var n=-1;return e.every((function(e,a){return!t(e)||(n=a,!1)})),n},s=function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),a=1;a<t;a++)n[a-1]=arguments[a];return"function"==typeof e?e.apply(void 0,n):e};e.createFocusTrap=function(e,o){var l,f=document,b=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?a(Object(r),!0).forEach((function(t){n(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):a(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({returnFocusOnDeactivate:!0,escapeDeactivates:!0,delayInitialFocus:!0},o),v={containers:[],tabbableGroups:[],nodeFocusedBeforeActivation:null,mostRecentlyFocusedNode:null,active:!1,paused:!1},p=function(e){return v.containers.some((function(t){return t.contains(e)}))},d=function(e){var t=b[e];if(!t)return null;var n=t;if("string"==typeof t&&!(n=f.querySelector(t)))throw new Error("`".concat(e,"` refers to no known node"));if("function"==typeof t&&!(n=t()))throw new Error("`".concat(e,"` did not return a node"));return n},y=function(){var e;if(null!==d("initialFocus"))e=d("initialFocus");else if(p(f.activeElement))e=f.activeElement;else{var t=v.tabbableGroups[0];e=t&&t.firstTabbableNode||d("fallbackFocus")}if(!e)throw new Error("Your focus-trap needs to have at least one focusable element");return e},g=function(){if(v.tabbableGroups=v.containers.map((function(e){var n=t.tabbable(e);if(n.length>0)return{container:e,firstTabbableNode:n[0],lastTabbableNode:n[n.length-1]}})).filter((function(e){return!!e})),v.tabbableGroups.length<=0&&!d("fallbackFocus"))throw new Error("Your focus-trap must have at least one container with at least one tabbable node in it at all times")},h=function e(t){t!==f.activeElement&&(t&&t.focus?(t.focus({preventScroll:!!b.preventScroll}),v.mostRecentlyFocusedNode=t,function(e){return e.tagName&&"input"===e.tagName.toLowerCase()&&"function"==typeof e.select}(t)&&t.select()):e(y()))},m=function(e){p(e.target)||(s(b.clickOutsideDeactivates,e)?l.deactivate({returnFocus:b.returnFocusOnDeactivate&&!t.isFocusable(e.target)}):s(b.allowOutsideClick,e)||e.preventDefault())},O=function(e){var t=p(e.target);t||e.target instanceof Document?t&&(v.mostRecentlyFocusedNode=e.target):(e.stopImmediatePropagation(),h(v.mostRecentlyFocusedNode||y()))},w=function(e){if(!1!==b.escapeDeactivates&&function(e){return"Escape"===e.key||"Esc"===e.key||27===e.keyCode}(e))return e.preventDefault(),void l.deactivate();(function(e){return"Tab"===e.key||9===e.keyCode})(e)&&function(e){g();var t=null;if(v.tabbableGroups.length>0){var n=c(v.tabbableGroups,(function(t){return t.container.contains(e.target)}));if(n<0)t=e.shiftKey?v.tabbableGroups[v.tabbableGroups.length-1].lastTabbableNode:v.tabbableGroups[0].firstTabbableNode;else if(e.shiftKey){var a=c(v.tabbableGroups,(function(t){var n=t.firstTabbableNode;return e.target===n}));if(a<0&&v.tabbableGroups[n].container===e.target&&(a=n),a>=0){var r=0===a?v.tabbableGroups.length-1:a-1;t=v.tabbableGroups[r].lastTabbableNode}}else{var o=c(v.tabbableGroups,(function(t){var n=t.lastTabbableNode;return e.target===n}));if(o<0&&v.tabbableGroups[n].container===e.target&&(o=n),o>=0){var i=o===v.tabbableGroups.length-1?0:o+1;t=v.tabbableGroups[i].firstTabbableNode}}}else t=d("fallbackFocus");t&&(e.preventDefault(),h(t))}(e)},E=function(e){s(b.clickOutsideDeactivates,e)||p(e.target)||s(b.allowOutsideClick,e)||(e.preventDefault(),e.stopImmediatePropagation())},F=function(){if(v.active)return i.activateTrap(l),r=b.delayInitialFocus?u((function(){h(y())})):h(y()),f.addEventListener("focusin",O,!0),f.addEventListener("mousedown",m,{capture:!0,passive:!1}),f.addEventListener("touchstart",m,{capture:!0,passive:!1}),f.addEventListener("click",E,{capture:!0,passive:!1}),f.addEventListener("keydown",w,{capture:!0,passive:!1}),l},T=function(){if(v.active)return f.removeEventListener("focusin",O,!0),f.removeEventListener("mousedown",m,!0),f.removeEventListener("touchstart",m,!0),f.removeEventListener("click",E,!0),f.removeEventListener("keydown",w,!0),l};return(l={activate:function(e){if(v.active)return this;g(),v.active=!0,v.paused=!1,v.nodeFocusedBeforeActivation=f.activeElement;var t=e&&e.onActivate?e.onActivate:b.onActivate;return t&&t(),F(),this},deactivate:function(e){if(!v.active)return this;clearTimeout(r),T(),v.active=!1,v.paused=!1,i.deactivateTrap(l);var t=e&&void 0!==e.onDeactivate?e.onDeactivate:b.onDeactivate;return t&&t(),(e&&void 0!==e.returnFocus?e.returnFocus:b.returnFocusOnDeactivate)&&u((function(){var e;h((e=v.nodeFocusedBeforeActivation,d("setReturnFocus")||e))})),this},pause:function(){return v.paused||!v.active||(v.paused=!0,T()),this},unpause:function(){return v.paused&&v.active?(v.paused=!1,g(),F(),this):this},updateContainerElements:function(e){var t=[].concat(e).filter(Boolean);return v.containers=t.map((function(e){return"string"==typeof e?f.querySelector(e):e})),v.active&&g(),this}}).updateContainerElements(e),l},Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=focus-trap.umd.min.js.map

index.js

@@ -286,2 +286,4 @@ import { tabbable, isFocusable } from 'tabbable';
       // make sure the target is actually contained in a group
+      // NOTE: the target may also be the container itself if it's tabbable
+      //  with tabIndex='-1' and was given initial focus
       const containerIndex = findIndex(state.tabbableGroups, ({ container }) =>
@@ -305,3 +307,5 @@ container.contains(e.target)
         // REVERSE
-        const startOfGroupIndex = findIndex(
+
+        // is the target the first tabbable node in a group?
+        let startOfGroupIndex = findIndex(
           state.tabbableGroups,
@@ -311,3 +315,16 @@ ({ firstTabbableNode }) => e.target === firstTabbableNode
 
+        if (
+          startOfGroupIndex < 0 &&
+          state.tabbableGroups[containerIndex].container === e.target
+        ) {
+          // an exception case where the target is the container itself, 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;
+        }
+
         if (startOfGroupIndex >= 0) {
+          // YES: then shift+tab should go to the last tabbable node in the
+          //  previous group (and wrap around to the last tabbable node of
+          //  the LAST group if it's the first tabbable node of the FIRST group)
           const destinationGroupIndex =
@@ -323,3 +340,5 @@ startOfGroupIndex === 0
         // FORWARD
-        const lastOfGroupIndex = findIndex(
+
+        // is the target the last tabbable node in a group?
+        let lastOfGroupIndex = findIndex(
           state.tabbableGroups,
@@ -329,3 +348,16 @@ ({ lastTabbableNode }) => e.target === lastTabbableNode
 
+        if (
+          lastOfGroupIndex < 0 &&
+          state.tabbableGroups[containerIndex].container === e.target
+        ) {
+          // an exception case where the target is the container itself, 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;
+        }
+
         if (lastOfGroupIndex >= 0) {
+          // YES: then tab should go to the first tabbable node in the next
+          //  group (and wrap around to the first tabbable node of the FIRST
+          //  group if it's the last tabbable node of the LAST group)
           const destinationGroupIndex =
@@ -348,2 +380,3 @@ lastOfGroupIndex === state.tabbableGroups.length - 1
     }
+    // else, let the browser take care of [shift+]tab and move the focus
   };
@@ -350,0 +383,0 @@

package.json

 {
   "name": "focus-trap",
-  "version": "6.3.0",
+  "version": "6.4.0",
   "description": "Trap focus within a DOM node.",
@@ -35,4 +35,5 @@ "main": "dist/focus-trap.js",
     "test:cypress": "start-server-and-test start 9966 'cypress open'",
-    "test:cypress-ci": "start-server-and-test start 9966 'cypress run --browser $CYPRESS_BROWSER --headless'",
-    "test": "yarn format:check && yarn lint && yarn test:unit && yarn test:types && CYPRESS_BROWSER=chrome yarn test:cypress-ci",
+    "test:cypress:ci": "start-server-and-test start 9966 'cypress run --browser $CYPRESS_BROWSER --headless'",
+    "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",
@@ -63,15 +64,15 @@ "release": "yarn build && changeset publish"
   "dependencies": {
-    "tabbable": "^5.1.5"
+    "tabbable": "^5.2.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.12.10",
-    "@babel/core": "^7.12.10",
-    "@babel/preset-env": "^7.12.11",
-    "@changesets/cli": "^2.12.0",
-    "@rollup/plugin-babel": "^5.2.2",
-    "@rollup/plugin-commonjs": "^17.0.0",
-    "@rollup/plugin-node-resolve": "^11.0.1",
-    "@testing-library/cypress": "^7.0.3",
+    "@babel/cli": "^7.13.14",
+    "@babel/core": "^7.13.15",
+    "@babel/preset-env": "^7.13.15",
+    "@changesets/cli": "^2.16.0",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^18.0.0",
+    "@rollup/plugin-node-resolve": "^11.2.1",
+    "@testing-library/cypress": "^7.0.5",
     "@types/jquery": "^3.5.5",
-    "all-contributors-cli": "^6.19.0",
+    "all-contributors-cli": "^6.20.0",
     "babel-eslint": "^10.1.0",
@@ -82,15 +83,15 @@ "babel-loader": "^8.2.2",
     "budo": "^11.6.4",
-    "cypress": "^6.2.1",
+    "cypress": "^7.1.0",
     "cypress-plugin-tab": "^1.0.5",
-    "eslint": "^7.17.0",
-    "eslint-config-prettier": "^7.1.0",
+    "eslint": "^7.24.0",
+    "eslint-config-prettier": "^8.2.0",
     "eslint-plugin-cypress": "^2.11.2",
     "onchange": "^7.1.0",
     "prettier": "^2.2.1",
-    "rollup": "^2.36.1",
+    "rollup": "^2.45.2",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-terser": "^7.0.1",
-    "start-server-and-test": "^1.11.7",
-    "typescript": "^4.1.3"
+    "start-server-and-test": "^1.12.1",
+    "typescript": "^4.2.4"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

296081

increased by6.86%

Lines of code

2093

increased by4.86%

Dependency changes

• Updatedtabbable@^5.2.0