Fix isHidden function for elements with position: fixed (#52)

Also, add FirefoxHeadless to browsers test array.

Co-authored-by: Stefan Cameron <stefan@stefcameron.com>

.changeset/breezy-spiders-kiss.md

@@ -0,0 +1,5 @@
+---
+'tabbable': patch
+---
+
+Fixed: Tabbable elements in fixed-position (`position: fixed`) containers should now be consistently found in supported browsers.

karma.conf.js

@@ -20,7 +20,7 @@ module.exports = function (config) {
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['ChromeHeadless'],
+    browsers: ['ChromeHeadless', 'FirefoxHeadless'],
     singleRun: true,
     concurrency: Infinity,
   });

src/index.js

@@ -189,11 +189,14 @@ function isTabbableRadio(node) {
 }
 
 function isHidden(node) {
-  // offsetParent being null will allow detecting cases where an element is invisible or inside an invisible element,
-  // as long as the element does not use position: fixed. For them, their visibility has to be checked directly as well.
-  return (
-    node.offsetParent === null || getComputedStyle(node).visibility === 'hidden'
-  );
+  if (getComputedStyle(node).visibility === 'hidden') return true;
+
+  while (node) {
+    if (getComputedStyle(node).display === 'none') return true;
+    node = node.parentElement;
+  }
+
+  return false;
 }
 
 export { tabbable, focusable, isTabbable, isFocusable };

test/fixtures/jqueryui.html

@@ -64,6 +64,8 @@
     <span tabindex="1" id="displayNoneAncestor-span">.</span>
   </div>
 
+  <button id="positionFixedButton" style="position: fixed;"></button>
+
   <div id="visibilityHiddenAncestor" style="visibility: hidden;">
     <input id="visibilityHiddenAncestor-input" />
     <span tabindex="1" id="visibilityHiddenAncestor-span">.</span>

test/tabbable.test.js

@@ -130,6 +130,7 @@ describe('tabbable', () => {
             'visibleAncestor-select',
             'visibleAncestor-textarea',
             'visibleAncestor-anchorWithHref',
+            'positionFixedButton',
             'inputTabindex0',
             'spanTabindex0',
             'dimensionlessParent',
@@ -303,6 +304,7 @@ describe('tabbable', () => {
             'inputTabindex-50',
             'spanTabindex0',
             'spanTabindex10',
+            'positionFixedButton',
             'spanTabindex-1',
             'spanTabindex-50',
             'visibleAncestor-inputTypeNone',