Can't use `Tooltip` with `Tab`

[ArrayKnight]

Provide a general summary of the issue here

We have a design that calls for a series of Tabs with icons as their content, with a Tooltip for each to label them

🤔 Expected Behavior?

To be able to use Tooltip to augment Tab label

😯 Current Behavior

See the steps to reproduce as reference

1. Wrapping TooltipTrigger around Tab never triggers the Tooltip
2. Wrapping TooltipTrigger around a plain button within the Tab never triggers the Tooltip
3. Wrapping TooltipTrigger around a RAC Button triggers the Tooltip, but breaks the ability to switch to the Tab/TabPanel
4. Creating a custom label, following this example: https://react-spectrum.adobe.com/react-aria/useTooltipTrigger.html#example never triggers the Tooltip

💁 Possible Solution

No response

🔦 Context

The design is necessary due to limited space constraints

🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/naughty-pascal-sgm27q

Version

"react-aria": "3.33.1", "react-aria-components": "1.2.1", "react-stately": "3.31.1",

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Mac

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[ArrayKnight]

Looked deeper into the hooks and found that usePress stops propagation by default. Was able to workaround my issue by implementing onPressStart={(event) => { event.continuePropagation(); } on the Button within a Tab:
https://codesandbox.io/p/sandbox/elegant-shamir-xc2yl8

But it doesn't feel like it should be this hard and it feels pretty weird to have to implement a Button inside of a Tab to get this to work. It feels like the Tab should support the functionality directly

[snowystinger]

Of note, a Button inside a Tab is actually not valid ARIA.

I haven't had the time to check, but were you able to determine why the TooltipTrigger on a Tab doesn't work? is it because we haven't exposed the hover props yet? #6742 or is it something else?

[ArrayKnight]

I haven't had a chance to track down what the issue is. It's possible the above hover fix would help, but it doesn't appear to be released, so I can't test against it

[ArrayKnight]

I was able to verify in your Storybook that the addition of the hover events did not fix wrapping a Tab with a TooltipTrigger

[ArrayKnight]

So, I think this stems from the Tab never consuming the FocusableContext

react-spectrum/packages/@react-aria/focus/src/useFocusable.tsx

Line 35 in 826d9d4

function useFocusableContext(ref: RefObject<FocusableElement | null>): FocusableContextValue {

None of the hooks call useFocusableContext or useFocusable, only ever useFocusRing

[ArrayKnight]

It appears that simply implementing useFocusable in Tab is not sufficient. I believe that due to complications introduced by the Collection pattern (implemented by Tabs), the trigger ref is never being set correctly onto the Tab, and the FocusableContext doesn't successfully penetrate into the Tab rendering scope.