@mackin.com/styleguide 11.0.7 → 11.0.8

package/index.esm.js

@@ -565,7 +565,6 @@ const Accordion = (props) => {
     }, [open]);
     React.useEffect(() => {
         var _a;
-        console.warn('props.open', 'changed', props.open);
         if (props.open === undefined) {
             // technically, we only need to use this effect if props.open was initialized with a boolean.
             // you can't have conditional effects so here we go...
@@ -982,8 +981,32 @@ const TabLocker = (props) => {
             if (e.key === 'Tab') {
                 e.preventDefault();
                 e.stopPropagation();
-                const tabElements = Array.from((_b = (_a = tabLocker.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('a, button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])')) !== null && _b !== void 0 ? _b : []).filter(el => !el.hasAttribute('disabled'));
-                if (tabElements.length) {
+                let tabElements;
+                try {
+                    tabElements = Array.from((_b = (_a = tabLocker.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(tabQuery)) !== null && _b !== void 0 ? _b : [])
+                        .filter(el => {
+                        if (el.hasAttribute('disabled')) {
+                            // seems to be unreliable when done in the query itself
+                            return false;
+                        }
+                        if (el.getAttribute('tabindex') === '-1') {
+                            // '[tabindex]:not([tabindex="-1"])' is in the query, but is ignored for controls that can already 
+                            // receive focus like buttons.  We'll leave it in because it DOSE ignore non-focus elements with a tabindex.
+                            return false;
+                        }
+                        if (el.hasAttribute('hidden')) {
+                            return false;
+                        }
+                        if (el.closest('[hidden]')) {
+                            return false;
+                        }
+                        return true;
+                    });
+                }
+                catch (err) {
+                    console.error(err);
+                }
+                if (tabElements === null || tabElements === void 0 ? void 0 : tabElements.length) {
                     const direction = e.shiftKey ? -1 : 1;
                     const index = tabElements.findIndex(x => x === document.activeElement);
                     if (index === undefined) {
@@ -1002,6 +1025,15 @@ const TabLocker = (props) => {
             }
         } }, props.children));
 };
+// easier to look at!
+const tabQuery = [
+    'a',
+    'button',
+    'input',
+    'textarea',
+    'select',
+    '[tabindex]:not([tabindex="-1"])'
+].join(',');
 
 /*
     ARIA info:

package/index.js

@@ -583,7 +583,6 @@ const Accordion = (props) => {
     }, [open]);
     React__namespace.useEffect(() => {
         var _a;
-        console.warn('props.open', 'changed', props.open);
         if (props.open === undefined) {
             // technically, we only need to use this effect if props.open was initialized with a boolean.
             // you can't have conditional effects so here we go...
@@ -1000,8 +999,32 @@ const TabLocker = (props) => {
             if (e.key === 'Tab') {
                 e.preventDefault();
                 e.stopPropagation();
-                const tabElements = Array.from((_b = (_a = tabLocker.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('a, button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])')) !== null && _b !== void 0 ? _b : []).filter(el => !el.hasAttribute('disabled'));
-                if (tabElements.length) {
+                let tabElements;
+                try {
+                    tabElements = Array.from((_b = (_a = tabLocker.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(tabQuery)) !== null && _b !== void 0 ? _b : [])
+                        .filter(el => {
+                        if (el.hasAttribute('disabled')) {
+                            // seems to be unreliable when done in the query itself
+                            return false;
+                        }
+                        if (el.getAttribute('tabindex') === '-1') {
+                            // '[tabindex]:not([tabindex="-1"])' is in the query, but is ignored for controls that can already 
+                            // receive focus like buttons.  We'll leave it in because it DOSE ignore non-focus elements with a tabindex.
+                            return false;
+                        }
+                        if (el.hasAttribute('hidden')) {
+                            return false;
+                        }
+                        if (el.closest('[hidden]')) {
+                            return false;
+                        }
+                        return true;
+                    });
+                }
+                catch (err) {
+                    console.error(err);
+                }
+                if (tabElements === null || tabElements === void 0 ? void 0 : tabElements.length) {
                     const direction = e.shiftKey ? -1 : 1;
                     const index = tabElements.findIndex(x => x === document.activeElement);
                     if (index === undefined) {
@@ -1020,6 +1043,15 @@ const TabLocker = (props) => {
             }
         } }, props.children));
 };
+// easier to look at!
+const tabQuery = [
+    'a',
+    'button',
+    'input',
+    'textarea',
+    'select',
+    '[tabindex]:not([tabindex="-1"])'
+].join(',');
 
 /*
     ARIA info:

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mackin.com/styleguide",
-    "version": "11.0.7",
+    "version": "11.0.8",
     "description": "",
     "main": "./index.js",
     "module": "./index.esm.js",