fix(Tooltip): prevent focus hijacking on tooltip dismissal

[emyarod]

Closes #7260
ref #7165

This PR prevents the tooltip from hijacking keyboard focus after dismissing the tooltip. We check whether or not the tooltip contains focusable content, and if it doesn't then we can preserve the existing tab order. otherwise if it does contain focusable content, we will place focus back on the trigger button (like we do currently)

Changelog

Changed

• consolidate internal tooltip ID and prevent ID prop from overwriting internal ID value
• tooltip focus behavior on tooltip dismissal

Removed

• negative tabindex on tooltip content container

Testing / Reviewing

Confirm the reported focus issues are no longer present, and that there are no regressions with tooltip focus management

[netlify]

Deploy preview for carbon-elements ready!

Built with commit 197d78d

https://deploy-preview-7319--carbon-elements.netlify.app

[netlify]

Deploy preview for carbon-components-react ready!

Built with commit 197d78d

https://deploy-preview-7319--carbon-components-react.netlify.app

[netlify]

✔️ Deploy preview for carbon-elements ready!

🔨 Explore the source changes: aaab77b

🔍 Inspect the deploy logs: https://app.netlify.com/sites/carbon-elements/deploys/5fd106491b2e8e0007911dc3

😎 Browse the preview: https://deploy-preview-7319--carbon-elements.netlify.app

[netlify]

Deploy preview for carbon-components-react ready!

Built without sensitive environment variables with commit aaab77b

https://deploy-preview-7319--carbon-components-react.netlify.app

[emyarod]

added a temporary Storybook test to make testing easier (can be removed before merge)

[tw15egan]

Thanks for adding the quick story for testing, LGTM 👍 ✅

[carmacleod]

There's odd behavior when tabbing (or shift+tabbing) to a tooltip trigger: every second time the trigger gets focus, the tooltip doesn't open. This only happens with tooltips without focusable content.

To see this (I saw this in Windows Chrome/Firefox and macOS Safari - probably happens everywhere):

1. Run the focus management test.
2. Start typing the tab key.
3. The first ℹ️ trigger opens a tooltip with focusable content, so type Esc to close it.
4. Type tab again, and the next ℹ️ trigger opens a tooltip with NO focusable content, so as expected, typing tab moves to the text input because it's next in the tab order. So far, so good.
5. Keep typing tab (10 more times) until you have tabbed through all of the content on the page. Still good.
6. Now, go back to the very first ℹ️ trigger - the one with focusable content (either keep typing tab until you loop all the way around, or simply click it with the mouse). Type Esc to close.
7. Ok, here's where it gets weird: tab to the 2nd ℹ️ trigger. The tooltip doesn't open? Keep typing tab and note that none of the tooltips open this time. Loop around to the top and keep typing tab... now the tooltips open again. Same behavior (tooltips only open every second time) when typing shift + tab.

I think it's important to understand what's going on here. :)

[emyarod]

@carmacleod I believe the issue is resolved now

[carmacleod]

Much better, @emyarod - thanks!
Only one more thing: right-clicking on the icon (i.e. to open a context menu) should not trigger the tooltip.
Let me know if you would prefer this in a separate issue.

Question: Do people usually put these info tooltips inside a form control's label element? Is that a thing? It kind of messes with the focus, because the label content is a click target for the form control, so clicking on either the label text or the info icon focuses the form control, but then focus immediately moves to the info "button", so there's a focus flash that looks positively weird. We really need to get together and seriously design out all of the Carbon tooltips and make sure all use cases are covered.

[emyarod]

Only one more thing: right-clicking on the icon (i.e. to open a context menu) should not trigger the tooltip.

yeah I think we can address that in a separate issue as it's existing behavior and not a regression caused by the current PR @carmacleod

Do people usually put these info tooltips inside a form control's label element?

I don't think it's a pattern that Carbon endorses but I have seen examples of it before

[carmacleod]

+1 Looks good!
Thanks @emyarod !

I opened #7423 for the right-click issue.