fix: skip visibility check in Focusable and Pressable dev warnings

packages/react-aria/src/interactions/Pressable.tsx

@@ -44,7 +44,7 @@ export const Pressable: React.ForwardRefExoticComponent<
         return;
       }
 
-      if (!props.isDisabled && !isFocusable(el)) {
+      if (!props.isDisabled && !isFocusable(el, {skipVisibilityCheck: true})) {
         console.warn(
           '<Pressable> child must be focusable. Please ensure the tabIndex prop is passed through.'
         );

packages/react-aria/src/interactions/useFocusable.tsx

@@ -151,7 +151,7 @@ export const Focusable: React.ForwardRefExoticComponent<
         return;
       }
 
-      if (!props.isDisabled && !isFocusable(el)) {
+      if (!props.isDisabled && !isFocusable(el, {skipVisibilityCheck: true})) {
         console.warn(
           '<Focusable> child must be focusable. Please ensure the tabIndex prop is passed through.'
         );

packages/react-aria/test/interactions/Focusable.test.js

@@ -148,6 +148,21 @@ describe('Focusable', function () {
     );
   });
 
+  it('should not warn if focusable child is inside a hidden subtree', async function () {
+    using spy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    render(
+      <div hidden>
+        <Focusable>
+          <span role="button">Button</span>
+        </Focusable>
+      </div>
+    );
+
+    expect(spy).not.toHaveBeenCalledWith(
+      '<Focusable> child must be focusable. Please ensure the tabIndex prop is passed through.'
+    );
+  });
+
   it('should warn if child does not have a role', async function () {
     using spy = jest.spyOn(console, 'warn').mockImplementation(() => {});
     render(

packages/react-aria/test/interactions/Pressable.test.js

@@ -123,6 +123,21 @@ describe('Pressable', function () {
     );
   });
 
+  it('should not warn if focusable child is inside a hidden subtree', async function () {
+    using spy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    render(
+      <div hidden>
+        <Pressable>
+          <span role="button">Button</span>
+        </Pressable>
+      </div>
+    );
+
+    expect(spy).not.toHaveBeenCalledWith(
+      '<Pressable> child must be focusable. Please ensure the tabIndex prop is passed through.'
+    );
+  });
+
   it('supports isDisabled', async function () {
     using spy = jest.spyOn(console, 'warn').mockImplementation(() => {});
     let {getByRole} = render(