[Bug] Focus state for tooltips with <button> triggers is unnecessary

[domyen]

Describe the bug

When a tooltip has a button or an a as the trigger it requires keyboard users to tab twice to activate the trigger.

https://www.loom.com/share/1744473606a049e5aa0785252c12c3fa

Steps to reproduce the behavior

1. Go to a place where the tooltip is used here
2. Tab to the diff toggle buttons on the right hand side
3. Try to enable the focus feature (the left icon)
4. See that you have to tab twice to activate the feature

Expected behavior

When I tab, I go straight to the interactive element.

Ideas for paths forward

• Add a prop that allows us to manually set the tabIndex of the wrapper component to -1
• Auto-detect when the direct descendent is an a or button and passthrough the focus state (via tabIndex) or remove role="button".

What do you think? @jsomsanith @kylesuss @winkerVSbecks

[kylesuss]

@domyen re:

Add a prop that allows us to manually set the tabIndex of the wrapper component to -1

I think I added this a little while back:

https://github.com/storybookjs/design-system/blob/1957d198f335706b02c5af82ff5d9ed5a20c9d5a/src/components/tooltip/WithTooltip.js#L70

I remember we hit a similar problem when working on the SB docs. Perhaps there are just some places we still need to update in the consumer apps.

[domyen]

Thanks, I didn't see that for some reason.