Click event not registered for interactive elements inside the tooltip of focused element

[minhiu]

Check existing issues

• [X] I have checked for existing issues to avoid duplicates

Actual Behavior

I have a calcite-action element, which has a button inside its tooltip. If I click (focus) on this calcite-action element, the button won't be assigned the click event.

Expected Behavior

The button should be assigned a click event, regardless of the calcite-element is being focused or not.

Reproduction Sample

https://codepen.io/minhiu/pen/LYXrEEG?editors=1000

Reproduction Steps

See the sample

Reproduction Version

1.4.3

Relevant Info

No response

Regression?

No response

Priority impact

p4 - not time sensitive

Impact

No response

Calcite package

• [x] @esri/calcite-components
• [ ] @esri/calcite-components-react

Esri team

ArcGIS Business/Community Analyst

[avkolomeets]

Here is a demo of how the Button inside the tooltip fails to be clicked. To reproduce, you must click on the open button first, not simply hover over it.

[jcfranco]

This is the remaining part of #5318 (see https://github.com/Esri/calcite-design-system/pull/6732#issuecomment-1515120105). I had forgotten to create a follow-up issue, so thanks for reporting this!

@cont-kolomeets Do you also share the same priority/impact from the description?

[avkolomeets]

@jcfranco

Do you also share the same priority/impact from the description?

Actually, I would up the priority a bit to make it nice to have for the upcoming release (1.5 or at least 1.6).

[driskull]

I don't think placing actionable elements inside a tooltip should be supported. For this, a popover should be used instead.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role

Because the tooltip itself never receives focus and is not in the tabbing order, a tooltip can not contain interactive elements like links, inputs, or buttons.

[driskull]

@geospatialem can we enhance the doc to say that content within tooltips should not be interactive

[driskull]

@jcfranco should we prevent pointer events on content within tooltips?

[jcfranco]

I don't think placing actionable elements inside a tooltip should be supported. For this, a popover should be used instead.

Great catch. We'll still have to address the remaining part of #5318 in order to support https://github.com/Esri/calcite-design-system/issues/6298, which would make it easier for anyone using tooltip for this to switch over.

@jcfranco should we prevent pointer events on content within tooltips?

Not at this time. There's some functionality missing in popover that would break anyone currently slotting interactive content in tooltip. Can you create an issue to revisit this later?

[jcfranco]

I just realized that this has nothing to do with disabled components as I originally thought. 😅 Bright side is that it makes makes this less complex for sure.

Created a separate issue for ☝️ to keep track of it.

[driskull]

Yeah I was wondering why we were talking about disabled components :D

[github-actions[bot]]

Installed and assigned for verification.

[geospatialem]

Documentation update context provided on tooltip, which is installed and anticipated for tomorrow's documentation release.

[geospatialem]

Verified on the developer site