focus-lock - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/es2015/commands.d.ts

@@ -1,1 +0,1 @@
-export declare const focusOn: (target: Element | HTMLFrameElement | HTMLElement, focusOptions?: FocusOptions | undefined) => void;
+export declare const focusOn: (target: Element | HTMLFrameElement | HTMLElement | null, focusOptions?: FocusOptions | undefined) => void;

dist/es2015/commands.js

 export var focusOn = function (target, focusOptions) {
+    if (!target) {
+        // not clear how, but is possible https://github.com/theKashey/focus-lock/issues/53
+        return;
+    }
     if ('focus' in target) {
@@ -3,0 +7,0 @@ target.focus(focusOptions);

dist/es2015/focusSolver.js

 import { NEW_FOCUS, newFocus } from './solver';
-import { getFocusableNodes, getTabbableNodes } from './utils/DOMutils';
+import { getFocusableNodes } from './utils/DOMutils';
 import { getAllAffectedNodes } from './utils/all-affected';
@@ -32,3 +32,3 @@ import { asArray, getFirst } from './utils/array';
     var anyFocusable = getFocusableNodes(entries, visibilityCache);
-    var innerElements = getTabbableNodes(entries, visibilityCache).filter(function (_a) {
+    var innerElements = anyFocusable.filter(function (_a) {
         var node = _a.node;
@@ -38,6 +38,3 @@ return isNotAGuard(node);
     if (!innerElements[0]) {
-        innerElements = anyFocusable;
-        if (!innerElements[0]) {
-            return undefined;
-        }
+        return undefined;
     }
@@ -49,9 +46,17 @@ var outerNodes = getFocusableNodes([commonParent], visibilityCache).map(function (_a) {
     var orderedInnerElements = reorderNodes(outerNodes, innerElements);
-    var innerNodes = orderedInnerElements.map(function (_a) {
+    // collect inner focusable and separately tabbables
+    var innerFocusables = orderedInnerElements.map(function (_a) {
         var node = _a.node;
         return node;
     });
-    var newId = newFocus(innerNodes, outerNodes, activeElement, lastNode);
+    var innerTabbable = orderedInnerElements.filter(function (_a) {
+        var tabIndex = _a.tabIndex;
+        return tabIndex >= 0;
+    }).map(function (_a) {
+        var node = _a.node;
+        return node;
+    });
+    var newId = newFocus(innerFocusables, innerTabbable, outerNodes, activeElement, lastNode);
     if (newId === NEW_FOCUS) {
-        var focusNode = pickAutofocus(anyFocusable, innerNodes, allParentAutofocusables(entries, visibilityCache));
+        var focusNode = pickAutofocus(anyFocusable, innerTabbable, allParentAutofocusables(entries, visibilityCache));
         if (focusNode) {
@@ -58,0 +63,0 @@ return { node: focusNode };

dist/es2015/solver.d.ts

 export declare const NEW_FOCUS = "NEW_FOCUS";
 /**
  * Main solver for the "find next focus" question
- * @param innerNodes
+ * @param innerNodes - used to control "return focus"
+ * @param innerTabbables - used to control "autofocus"
  * @param outerNodes
@@ -10,2 +11,2 @@ * @param activeElement
  */
-export declare const newFocus: (innerNodes: HTMLElement[], outerNodes: HTMLElement[], activeElement: HTMLElement | undefined, lastNode: HTMLElement | null) => number | undefined | typeof NEW_FOCUS;
+export declare const newFocus: (innerNodes: HTMLElement[], innerTabbables: HTMLElement[], outerNodes: HTMLElement[], activeElement: HTMLElement | undefined, lastNode: HTMLElement | null) => number | undefined | typeof NEW_FOCUS;

dist/es2015/solver.js

@@ -7,3 +7,4 @@ import { correctNodes } from './utils/correctFocus';
  * Main solver for the "find next focus" question
- * @param innerNodes
+ * @param innerNodes - used to control "return focus"
+ * @param innerTabbables - used to control "autofocus"
  * @param outerNodes
@@ -14,3 +15,3 @@ * @param activeElement
  */
-export var newFocus = function (innerNodes, outerNodes, activeElement, lastNode) {
+export var newFocus = function (innerNodes, innerTabbables, outerNodes, activeElement, lastNode) {
     var cnt = innerNodes.length;
@@ -27,2 +28,14 @@ var firstFocus = innerNodes[0];
     var lastNodeInside = lastNode ? innerNodes.indexOf(lastNode) : -1;
+    // no active focus (or focus is on the body)
+    if (activeIndex === -1) {
+        // known fallback
+        if (lastNodeInside !== -1) {
+            return lastNodeInside;
+        }
+        return NEW_FOCUS;
+    }
+    // new focus, nothing to calculate
+    if (lastNodeInside === -1) {
+        return NEW_FOCUS;
+    }
     var indexDiff = activeIndex - lastIndex;
@@ -34,8 +47,4 @@ var firstNodeIndex = outerNodes.indexOf(firstFocus);
     var correctedIndexDiff = correctedIndex - (lastNode ? correctedNodes.indexOf(lastNode) : activeIndex);
-    var returnFirstNode = pickFocusable(innerNodes, 0);
-    var returnLastNode = pickFocusable(innerNodes, cnt - 1);
-    // new focus
-    if (activeIndex === -1 || lastNodeInside === -1) {
-        return NEW_FOCUS;
-    }
+    var returnFirstNode = pickFocusable(innerNodes, innerTabbables[0]);
+    var returnLastNode = pickFocusable(innerNodes, innerTabbables[innerTabbables.length - 1]);
     // old focus
@@ -42,0 +51,0 @@ if (!indexDiff && lastNodeInside >= 0) {

dist/es2015/utils/firstFocus.d.ts

 export declare const pickFirstFocus: (nodes: HTMLElement[]) => HTMLElement | undefined;
-export declare const pickFocusable: (nodes: HTMLElement[], index: number) => number;
+export declare const pickFocusable: (nodes: HTMLElement[], node: HTMLElement) => number;

dist/es2015/utils/firstFocus.js

@@ -8,7 +8,4 @@ import { correctNode } from './correctFocus';
 };
-export var pickFocusable = function (nodes, index) {
-    if (nodes.length > 1) {
-        return nodes.indexOf(correctNode(nodes[index], nodes));
-    }
-    return index;
+export var pickFocusable = function (nodes, node) {
+    return nodes.indexOf(correctNode(node, nodes));
 };

dist/es2015/utils/is.js

@@ -25,4 +25,5 @@ import { FOCUS_NO_AUTOFOCUS } from '../constants';
 };
+var isInert = function (node) { return node.hasAttribute('inert'); };
 var isVisibleUncached = function (node, checkParent) {
-    return !node || isTopNode(node) || (!isElementHidden(node) && checkParent(getParentNode(node)));
+    return !node || isTopNode(node) || (!isElementHidden(node) && !isInert(node) && checkParent(getParentNode(node)));
 };
@@ -29,0 +30,0 @@ export var isVisibleCached = function (visibilityCache, node) {

dist/es2015/utils/tabOrder.js

@@ -15,11 +15,25 @@ import { toArray } from './array';
 };
+var getTabIndex = function (node) {
+    if (node.tabIndex < 0) {
+        // all "focusable" elements are already preselected
+        // but some might have implicit negative tabIndex
+        // return 0 for <audio without tabIndex attribute - it is "tabbable"
+        if (!node.hasAttribute('tabindex')) {
+            return 0;
+        }
+    }
+    return node.tabIndex;
+};
 export var orderByTabIndex = function (nodes, filterNegative, keepGuards) {
     return toArray(nodes)
-        .map(function (node, index) { return ({
-        node: node,
-        index: index,
-        tabIndex: keepGuards && node.tabIndex === -1 ? ((node.dataset || {}).focusGuard ? 0 : -1) : node.tabIndex,
-    }); })
+        .map(function (node, index) {
+        var tabIndex = getTabIndex(node);
+        return {
+            node: node,
+            index: index,
+            tabIndex: keepGuards && tabIndex === -1 ? ((node.dataset || {}).focusGuard ? 0 : -1) : tabIndex,
+        };
+    })
         .filter(function (data) { return !filterNegative || data.tabIndex >= 0; })
         .sort(tabSort);
 };

dist/es2019/commands.d.ts

@@ -1,1 +0,1 @@
-export declare const focusOn: (target: Element | HTMLFrameElement | HTMLElement, focusOptions?: FocusOptions | undefined) => void;
+export declare const focusOn: (target: Element | HTMLFrameElement | HTMLElement | null, focusOptions?: FocusOptions | undefined) => void;

dist/es2019/commands.js

 export const focusOn = (target, focusOptions) => {
+    if (!target) {
+        // not clear how, but is possible https://github.com/theKashey/focus-lock/issues/53
+        return;
+    }
     if ('focus' in target) {
@@ -3,0 +7,0 @@ target.focus(focusOptions);

dist/es2019/focusSolver.js

 import { NEW_FOCUS, newFocus } from './solver';
-import { getFocusableNodes, getTabbableNodes } from './utils/DOMutils';
+import { getFocusableNodes } from './utils/DOMutils';
 import { getAllAffectedNodes } from './utils/all-affected';
@@ -32,15 +32,14 @@ import { asArray, getFirst } from './utils/array';
     const anyFocusable = getFocusableNodes(entries, visibilityCache);
-    let innerElements = getTabbableNodes(entries, visibilityCache).filter(({ node }) => isNotAGuard(node));
+    const innerElements = anyFocusable.filter(({ node }) => isNotAGuard(node));
     if (!innerElements[0]) {
-        innerElements = anyFocusable;
-        if (!innerElements[0]) {
-            return undefined;
-        }
+        return undefined;
     }
     const outerNodes = getFocusableNodes([commonParent], visibilityCache).map(({ node }) => node);
     const orderedInnerElements = reorderNodes(outerNodes, innerElements);
-    const innerNodes = orderedInnerElements.map(({ node }) => node);
-    const newId = newFocus(innerNodes, outerNodes, activeElement, lastNode);
+    // collect inner focusable and separately tabbables
+    const innerFocusables = orderedInnerElements.map(({ node }) => node);
+    const innerTabbable = orderedInnerElements.filter(({ tabIndex }) => tabIndex >= 0).map(({ node }) => node);
+    const newId = newFocus(innerFocusables, innerTabbable, outerNodes, activeElement, lastNode);
     if (newId === NEW_FOCUS) {
-        const focusNode = pickAutofocus(anyFocusable, innerNodes, allParentAutofocusables(entries, visibilityCache));
+        const focusNode = pickAutofocus(anyFocusable, innerTabbable, allParentAutofocusables(entries, visibilityCache));
         if (focusNode) {
@@ -47,0 +46,0 @@ return { node: focusNode };

dist/es2019/solver.d.ts

 export declare const NEW_FOCUS = "NEW_FOCUS";
 /**
  * Main solver for the "find next focus" question
- * @param innerNodes
+ * @param innerNodes - used to control "return focus"
+ * @param innerTabbables - used to control "autofocus"
  * @param outerNodes
@@ -10,2 +11,2 @@ * @param activeElement
  */
-export declare const newFocus: (innerNodes: HTMLElement[], outerNodes: HTMLElement[], activeElement: HTMLElement | undefined, lastNode: HTMLElement | null) => number | undefined | typeof NEW_FOCUS;
+export declare const newFocus: (innerNodes: HTMLElement[], innerTabbables: HTMLElement[], outerNodes: HTMLElement[], activeElement: HTMLElement | undefined, lastNode: HTMLElement | null) => number | undefined | typeof NEW_FOCUS;

dist/es2019/solver.js

@@ -7,3 +7,4 @@ import { correctNodes } from './utils/correctFocus';
  * Main solver for the "find next focus" question
- * @param innerNodes
+ * @param innerNodes - used to control "return focus"
+ * @param innerTabbables - used to control "autofocus"
  * @param outerNodes
@@ -14,3 +15,3 @@ * @param activeElement
  */
-export const newFocus = (innerNodes, outerNodes, activeElement, lastNode) => {
+export const newFocus = (innerNodes, innerTabbables, outerNodes, activeElement, lastNode) => {
     const cnt = innerNodes.length;
@@ -27,2 +28,14 @@ const firstFocus = innerNodes[0];
     const lastNodeInside = lastNode ? innerNodes.indexOf(lastNode) : -1;
+    // no active focus (or focus is on the body)
+    if (activeIndex === -1) {
+        // known fallback
+        if (lastNodeInside !== -1) {
+            return lastNodeInside;
+        }
+        return NEW_FOCUS;
+    }
+    // new focus, nothing to calculate
+    if (lastNodeInside === -1) {
+        return NEW_FOCUS;
+    }
     const indexDiff = activeIndex - lastIndex;
@@ -34,8 +47,4 @@ const firstNodeIndex = outerNodes.indexOf(firstFocus);
     const correctedIndexDiff = correctedIndex - (lastNode ? correctedNodes.indexOf(lastNode) : activeIndex);
-    const returnFirstNode = pickFocusable(innerNodes, 0);
-    const returnLastNode = pickFocusable(innerNodes, cnt - 1);
-    // new focus
-    if (activeIndex === -1 || lastNodeInside === -1) {
-        return NEW_FOCUS;
-    }
+    const returnFirstNode = pickFocusable(innerNodes, innerTabbables[0]);
+    const returnLastNode = pickFocusable(innerNodes, innerTabbables[innerTabbables.length - 1]);
     // old focus
@@ -42,0 +51,0 @@ if (!indexDiff && lastNodeInside >= 0) {

dist/es2019/utils/firstFocus.d.ts

 export declare const pickFirstFocus: (nodes: HTMLElement[]) => HTMLElement | undefined;
-export declare const pickFocusable: (nodes: HTMLElement[], index: number) => number;
+export declare const pickFocusable: (nodes: HTMLElement[], node: HTMLElement) => number;

dist/es2019/utils/firstFocus.js

@@ -8,7 +8,4 @@ import { correctNode } from './correctFocus';
 };
-export const pickFocusable = (nodes, index) => {
-    if (nodes.length > 1) {
-        return nodes.indexOf(correctNode(nodes[index], nodes));
-    }
-    return index;
+export const pickFocusable = (nodes, node) => {
+    return nodes.indexOf(correctNode(node, nodes));
 };

dist/es2019/utils/is.js

@@ -23,3 +23,4 @@ import { FOCUS_NO_AUTOFOCUS } from '../constants';
 node === document || (node && node.nodeType === Node.DOCUMENT_NODE);
-const isVisibleUncached = (node, checkParent) => !node || isTopNode(node) || (!isElementHidden(node) && checkParent(getParentNode(node)));
+const isInert = (node) => node.hasAttribute('inert');
+const isVisibleUncached = (node, checkParent) => !node || isTopNode(node) || (!isElementHidden(node) && !isInert(node) && checkParent(getParentNode(node)));
 export const isVisibleCached = (visibilityCache, node) => {
@@ -26,0 +27,0 @@ const cached = visibilityCache.get(node);

dist/es2019/utils/tabOrder.js

@@ -15,9 +15,23 @@ import { toArray } from './array';
 };
+const getTabIndex = (node) => {
+    if (node.tabIndex < 0) {
+        // all "focusable" elements are already preselected
+        // but some might have implicit negative tabIndex
+        // return 0 for <audio without tabIndex attribute - it is "tabbable"
+        if (!node.hasAttribute('tabindex')) {
+            return 0;
+        }
+    }
+    return node.tabIndex;
+};
 export const orderByTabIndex = (nodes, filterNegative, keepGuards) => toArray(nodes)
-    .map((node, index) => ({
-    node,
-    index,
-    tabIndex: keepGuards && node.tabIndex === -1 ? ((node.dataset || {}).focusGuard ? 0 : -1) : node.tabIndex,
-}))
+    .map((node, index) => {
+    const tabIndex = getTabIndex(node);
+    return {
+        node,
+        index,
+        tabIndex: keepGuards && tabIndex === -1 ? ((node.dataset || {}).focusGuard ? 0 : -1) : tabIndex,
+    };
+})
     .filter((data) => !filterNegative || data.tabIndex >= 0)
     .sort(tabSort);

dist/es5/commands.d.ts

@@ -1,1 +0,1 @@
-export declare const focusOn: (target: Element | HTMLFrameElement | HTMLElement, focusOptions?: FocusOptions | undefined) => void;
+export declare const focusOn: (target: Element | HTMLFrameElement | HTMLElement | null, focusOptions?: FocusOptions | undefined) => void;

dist/es5/commands.js

@@ -5,2 +5,6 @@ "use strict";
 var focusOn = function (target, focusOptions) {
+    if (!target) {
+        // not clear how, but is possible https://github.com/theKashey/focus-lock/issues/53
+        return;
+    }
     if ('focus' in target) {
@@ -7,0 +11,0 @@ target.focus(focusOptions);

dist/es5/focusSolver.js

@@ -35,3 +35,3 @@ "use strict";
     var anyFocusable = (0, DOMutils_1.getFocusableNodes)(entries, visibilityCache);
-    var innerElements = (0, DOMutils_1.getTabbableNodes)(entries, visibilityCache).filter(function (_a) {
+    var innerElements = anyFocusable.filter(function (_a) {
         var node = _a.node;
@@ -41,6 +41,3 @@ return (0, is_1.isNotAGuard)(node);
     if (!innerElements[0]) {
-        innerElements = anyFocusable;
-        if (!innerElements[0]) {
-            return undefined;
-        }
+        return undefined;
     }
@@ -52,9 +49,17 @@ var outerNodes = (0, DOMutils_1.getFocusableNodes)([commonParent], visibilityCache).map(function (_a) {
     var orderedInnerElements = reorderNodes(outerNodes, innerElements);
-    var innerNodes = orderedInnerElements.map(function (_a) {
+    // collect inner focusable and separately tabbables
+    var innerFocusables = orderedInnerElements.map(function (_a) {
         var node = _a.node;
         return node;
     });
-    var newId = (0, solver_1.newFocus)(innerNodes, outerNodes, activeElement, lastNode);
+    var innerTabbable = orderedInnerElements.filter(function (_a) {
+        var tabIndex = _a.tabIndex;
+        return tabIndex >= 0;
+    }).map(function (_a) {
+        var node = _a.node;
+        return node;
+    });
+    var newId = (0, solver_1.newFocus)(innerFocusables, innerTabbable, outerNodes, activeElement, lastNode);
     if (newId === solver_1.NEW_FOCUS) {
-        var focusNode = (0, auto_focus_1.pickAutofocus)(anyFocusable, innerNodes, (0, parenting_1.allParentAutofocusables)(entries, visibilityCache));
+        var focusNode = (0, auto_focus_1.pickAutofocus)(anyFocusable, innerTabbable, (0, parenting_1.allParentAutofocusables)(entries, visibilityCache));
         if (focusNode) {
@@ -61,0 +66,0 @@ return { node: focusNode };

dist/es5/solver.d.ts

 export declare const NEW_FOCUS = "NEW_FOCUS";
 /**
  * Main solver for the "find next focus" question
- * @param innerNodes
+ * @param innerNodes - used to control "return focus"
+ * @param innerTabbables - used to control "autofocus"
  * @param outerNodes
@@ -10,2 +11,2 @@ * @param activeElement
  */
-export declare const newFocus: (innerNodes: HTMLElement[], outerNodes: HTMLElement[], activeElement: HTMLElement | undefined, lastNode: HTMLElement | null) => number | undefined | typeof NEW_FOCUS;
+export declare const newFocus: (innerNodes: HTMLElement[], innerTabbables: HTMLElement[], outerNodes: HTMLElement[], activeElement: HTMLElement | undefined, lastNode: HTMLElement | null) => number | undefined | typeof NEW_FOCUS;

dist/es5/solver.js

@@ -10,3 +10,4 @@ "use strict";
  * Main solver for the "find next focus" question
- * @param innerNodes
+ * @param innerNodes - used to control "return focus"
+ * @param innerTabbables - used to control "autofocus"
  * @param outerNodes
@@ -17,3 +18,3 @@ * @param activeElement
  */
-var newFocus = function (innerNodes, outerNodes, activeElement, lastNode) {
+var newFocus = function (innerNodes, innerTabbables, outerNodes, activeElement, lastNode) {
     var cnt = innerNodes.length;
@@ -30,2 +31,14 @@ var firstFocus = innerNodes[0];
     var lastNodeInside = lastNode ? innerNodes.indexOf(lastNode) : -1;
+    // no active focus (or focus is on the body)
+    if (activeIndex === -1) {
+        // known fallback
+        if (lastNodeInside !== -1) {
+            return lastNodeInside;
+        }
+        return exports.NEW_FOCUS;
+    }
+    // new focus, nothing to calculate
+    if (lastNodeInside === -1) {
+        return exports.NEW_FOCUS;
+    }
     var indexDiff = activeIndex - lastIndex;
@@ -37,8 +50,4 @@ var firstNodeIndex = outerNodes.indexOf(firstFocus);
     var correctedIndexDiff = correctedIndex - (lastNode ? correctedNodes.indexOf(lastNode) : activeIndex);
-    var returnFirstNode = (0, firstFocus_1.pickFocusable)(innerNodes, 0);
-    var returnLastNode = (0, firstFocus_1.pickFocusable)(innerNodes, cnt - 1);
-    // new focus
-    if (activeIndex === -1 || lastNodeInside === -1) {
-        return exports.NEW_FOCUS;
-    }
+    var returnFirstNode = (0, firstFocus_1.pickFocusable)(innerNodes, innerTabbables[0]);
+    var returnLastNode = (0, firstFocus_1.pickFocusable)(innerNodes, innerTabbables[innerTabbables.length - 1]);
     // old focus
@@ -45,0 +54,0 @@ if (!indexDiff && lastNodeInside >= 0) {

dist/es5/utils/firstFocus.d.ts

 export declare const pickFirstFocus: (nodes: HTMLElement[]) => HTMLElement | undefined;
-export declare const pickFocusable: (nodes: HTMLElement[], index: number) => number;
+export declare const pickFocusable: (nodes: HTMLElement[], node: HTMLElement) => number;

dist/es5/utils/firstFocus.js

@@ -12,8 +12,5 @@ "use strict";
 exports.pickFirstFocus = pickFirstFocus;
-var pickFocusable = function (nodes, index) {
-    if (nodes.length > 1) {
-        return nodes.indexOf((0, correctFocus_1.correctNode)(nodes[index], nodes));
-    }
-    return index;
+var pickFocusable = function (nodes, node) {
+    return nodes.indexOf((0, correctFocus_1.correctNode)(node, nodes));
 };
 exports.pickFocusable = pickFocusable;

dist/es5/utils/is.js

@@ -28,4 +28,5 @@ "use strict";
 };
+var isInert = function (node) { return node.hasAttribute('inert'); };
 var isVisibleUncached = function (node, checkParent) {
-    return !node || isTopNode(node) || (!isElementHidden(node) && checkParent(getParentNode(node)));
+    return !node || isTopNode(node) || (!isElementHidden(node) && !isInert(node) && checkParent(getParentNode(node)));
 };
@@ -32,0 +33,0 @@ var isVisibleCached = function (visibilityCache, node) {

dist/es5/utils/tabOrder.js

@@ -19,9 +19,23 @@ "use strict";
 exports.tabSort = tabSort;
+var getTabIndex = function (node) {
+    if (node.tabIndex < 0) {
+        // all "focusable" elements are already preselected
+        // but some might have implicit negative tabIndex
+        // return 0 for <audio without tabIndex attribute - it is "tabbable"
+        if (!node.hasAttribute('tabindex')) {
+            return 0;
+        }
+    }
+    return node.tabIndex;
+};
 var orderByTabIndex = function (nodes, filterNegative, keepGuards) {
     return (0, array_1.toArray)(nodes)
-        .map(function (node, index) { return ({
-        node: node,
-        index: index,
-        tabIndex: keepGuards && node.tabIndex === -1 ? ((node.dataset || {}).focusGuard ? 0 : -1) : node.tabIndex,
-    }); })
+        .map(function (node, index) {
+        var tabIndex = getTabIndex(node);
+        return {
+            node: node,
+            index: index,
+            tabIndex: keepGuards && tabIndex === -1 ? ((node.dataset || {}).focusGuard ? 0 : -1) : tabIndex,
+        };
+    })
         .filter(function (data) { return !filterNegative || data.tabIndex >= 0; })
@@ -28,0 +42,0 @@ .sort(exports.tabSort);

package.json

 {
   "name": "focus-lock",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "DOM trap for a focus",
@@ -5,0 +5,0 @@ "main": "dist/es5/index.js",

No alert changes

Improved metrics

Total package byte prevSize

161619

increased by2.32%

Lines of code

3876

increased by2.3%

No dependency changes