Composite: Doesn't work when `render` is a `Tooltip`

[mirka]

Composite does not correctly manage roving tab index when Composite.Item's render prop is a Tooltip. For example, when you have a composite item like this:

<Composite.Item
  render={
    <Tooltip text="Tooltip">
      <button>Button</button>
    </Tooltip>
  }
/>

The workaround is to wrap the Tooltip around the Composite.Item:

<Tooltip text="Tooltip">
  <Composite.Item render={<button>Button</button>} />
</Tooltip>

This problem does not manifest when the Tooltip is used internally in a component, like:

<Ariakit.CompositeItem
  render={
    <Button label="Tooltip" showTooltip>
      Button
    </Button>
  }
/>

The problems reproduce in raw Ariakit Composite (sandbox demo).

What is your proposed solution?

These may be limitations that don't necessarily need to be fixed, but we should at least document the workarounds.

[diegohaz]

Interestingly, if you click on the tooltip popup and press the left or right arrow, the focus moves to the previous or next composite item 😄

That's because the tooltip popup element is the one receiving the props and event listeners:

gutenberg/packages/components/src/tooltip/index.tsx

Lines 130 to 131 in 88d60e4

	<Ariakit.Tooltip
	{ ...restProps }

While the anchor element receives the forwarded ref prop, so it is correctly registered as the composite item element.

---

The workaround is to wrap the Tooltip around the Composite.Item:

<Tooltip text="Tooltip">
  <Composite.Item render={<button>Button</button>} />
</Tooltip>

I'd say that's not just a workaround, but the proper way to use it given how Tooltip works. Personally, I'd just do render={<button />} and then pass Button as direct child of Composite.Item. Alternatively, you can also use the function version of the render prop to pass the props to the correct element (if, for some reason, you're unable to wrap Composite.Item):

<Composite.Item
  render={(props) => (
    <Tooltip text="Tooltip">
      <button {...props}>Button</button>
    </Tooltip>
  )}
/>

Or:

<Composite.Item
  render={(props) => (
    <Tooltip text="Tooltip">
      <button {...props} />
    </Tooltip>
  )}
>
  Button
</Composite.Item>

[mirka]

Thanks @diegohaz! We'll just update the documentation then.

[ciampo]

Opened #65817 to add a dedicated Storrybook example