fix: focusscope navigation past visibility hidden elements (#8794)

* fix: focusscope navigation past visibility hidden elements

* add comment

* jsdom doesn't support this yet

---------

Co-authored-by: Devon Govett <devongovett@gmail.com>

Author: snowystinger

packages/@react-aria/focus/stories/FocusScope.stories.tsx

@@ -278,3 +278,34 @@ export const FocusableInputForm: FocusScopeStoryObj = {
     }
   }
 };
+
+export let ContainsHiddenElement: FocusScopeStoryObj = {
+  render: (args) => (
+    <FocusScope {...args}>
+      <input />
+      <input style={{visibility: 'hidden'}} />
+      <input />
+    </FocusScope>
+  ),
+  args: {
+    contain: true
+  },
+  argTypes: {
+    contain: {
+      control: 'boolean'
+    },
+    restoreFocus: {
+      control: 'boolean'
+    },
+    autoFocus: {
+      control: 'boolean'
+    }
+  },
+  parameters: {
+    description: {
+      data: `
+Should be able to tab navigate from the first input to the last input.
+`
+    }
+  }
+};

packages/@react-aria/utils/src/isElementVisible.ts

@@ -63,7 +63,7 @@ function isAttributeVisible(element: Element, childElement?: Element) {
  */
 export function isElementVisible(element: Element, childElement?: Element): boolean {
   if (supportsCheckVisibility) {
-    return element.checkVisibility() && !element.closest('[data-react-aria-prevent-focus]');
+    return element.checkVisibility({visibilityProperty: true}) && !element.closest('[data-react-aria-prevent-focus]');
   }
 
   return (