@marianmeres/stuic 1.13.0 → 1.14.0

package/dist/actions/focus-trap.js

@@ -1,21 +1,20 @@
-// copied from skeleton
+// initially copied from skeleton, adjusted
 const defaults = { enabled: true, autoFocusFirst: true };
-// Action: Focus Trap
 export function focusTrap(node, options = {}) {
     let { enabled, autoFocusFirst } = { ...defaults, ...(options || {}) };
     const focusableSelectors = [
-        '[contentEditable=true]:not([tabindex^="-"])',
+        '[contentEditable=true]',
         //
-        'button:not([disabled]):not([tabindex^="-"])',
-        'input:not([disabled]):not([tabindex^="-"])',
-        'select:not([disabled]):not([tabindex^="-"])',
-        'textarea:not([disabled]):not([tabindex^="-"])',
-        //
-        'a[href]:not([tabindex^="-"])',
-        'area[href]:not([tabindex^="-"])',
-        'details:not([tabindex^="-"])',
-        'iframe:not([tabindex^="-"])',
+        'button:not([disabled])',
+        'input:not([disabled])',
+        'select:not([disabled])',
+        'textarea:not([disabled])',
         //
+        'a[href]',
+        'area[href]',
+        'details',
+        'iframe',
+        // see more below on tabindexes
         '[tabindex]:not([tabindex^="-"])',
     ].join(',');
     let first;
@@ -37,10 +36,13 @@ export function focusTrap(node, options = {}) {
     const queryElements = (fromObserver) => {
         if (enabled === false)
             return;
-        const focusable = [...node.querySelectorAll(focusableSelectors)]
-            // in case I didn't get the selectors right, make sure to manually check as well...
-            // (negligible overhead, if any...)
+        let maxTabindex = 0;
+        let focusable = [...node.querySelectorAll(focusableSelectors)]
+            // filter negative tabindexes (afaik there is no :not([disabled] OR [tabindex^="-"]))
             .filter((e) => {
+            // reusing loop for a side job here... see sort below
+            maxTabindex = Math.max(maxTabindex, parseInt(e.getAttribute('tabindex') || '0'));
+            //
             if (e.getAttribute('disabled') === '')
                 return false;
             if ((e.getAttribute('tabindex') || '').startsWith('-'))
@@ -48,9 +50,11 @@ export function focusTrap(node, options = {}) {
             return true;
         })
             // important to sort by tabindex, so the first/last will work as expected
+            // but must increase zero to max + 1 first, because browsers focus zeros as last...
+            // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
             .sort((e1, e2) => {
-            const a = parseInt(e1.getAttribute('tabindex') || '0');
-            const b = parseInt(e2.getAttribute('tabindex') || '0');
+            const a = parseInt(e1.getAttribute('tabindex') || '0') || maxTabindex + 1;
+            const b = parseInt(e2.getAttribute('tabindex') || '0') || maxTabindex + 1;
             return a - b;
         });
         if (focusable.length) {
@@ -66,20 +70,17 @@ export function focusTrap(node, options = {}) {
     };
     queryElements(false);
     function cleanup() {
-        if (first)
-            first.removeEventListener('keydown', onFirstElemKeydown);
-        if (last)
-            last.removeEventListener('keydown', onLastElemKeydown);
+        first && first.removeEventListener('keydown', onFirstElemKeydown);
+        last && last.removeEventListener('keydown', onLastElemKeydown);
     }
     // When children of node are changed (added or removed)
-    const onObservationChange = (mutationRecords, observer) => {
-        if (mutationRecords.length) {
+    const observer = new MutationObserver((mutations, observer) => {
+        if (mutations.length) {
             cleanup();
             queryElements(true);
         }
         return observer;
-    };
-    const observer = new MutationObserver(onObservationChange);
+    });
     observer.observe(node, { childList: true, subtree: true });
     // Lifecycle
     return {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "1.13.0",
+	"version": "1.14.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package && node ./scripts/date.js",