diff --git a/packages/react-aria/src/interactions/Pressable.tsx b/packages/react-aria/src/interactions/Pressable.tsx index 8062cbcf11b..4ab05cfde3d 100644 --- a/packages/react-aria/src/interactions/Pressable.tsx +++ b/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( ' child must be focusable. Please ensure the tabIndex prop is passed through.' ); diff --git a/packages/react-aria/src/interactions/useFocusable.tsx b/packages/react-aria/src/interactions/useFocusable.tsx index 7c0a633e5cd..403e3bf3dd6 100644 --- a/packages/react-aria/src/interactions/useFocusable.tsx +++ b/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( ' child must be focusable. Please ensure the tabIndex prop is passed through.' ); diff --git a/packages/react-aria/test/interactions/Focusable.test.js b/packages/react-aria/test/interactions/Focusable.test.js index 5e151e35420..5fb23bb3122 100644 --- a/packages/react-aria/test/interactions/Focusable.test.js +++ b/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( + + ); + + expect(spy).not.toHaveBeenCalledWith( + ' 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( diff --git a/packages/react-aria/test/interactions/Pressable.test.js b/packages/react-aria/test/interactions/Pressable.test.js index 658320f0d5c..5db6a7a889f 100644 --- a/packages/react-aria/test/interactions/Pressable.test.js +++ b/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( + + ); + + expect(spy).not.toHaveBeenCalledWith( + ' 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(