Skip to content

Tooltips within Shadow DOM components sometimes fail to open when focused #6893

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
sonofflynn89 opened this issue May 1, 2023 · 4 comments
Closed

Tooltips within Shadow DOM components sometimes fail to open when focused #6893

sonofflynn89 opened this issue May 1, 2023 · 4 comments
Assignees
@geospatialem
Labels
4 - verified Issues that have been tested, confirmed as mitigated, and are ready to close. ArcGIS Hub Issues logged by ArcGIS Hub team members. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive
Milestone
2023 May Priorities

Comments

@sonofflynn89
Copy link

Actual Behavior

According to our accessibility standards, tooltips should appear when their trigger is hovered over OR when their trigger is focused via the keyboard. However, tooltips in a Shadow DOM environment do not always open when their trigger is focused via the keyboard. I spent a few days trying to figure out what conditions cause this and here is what I've found:

  • 2+ tooltips must be placed within a Shadow Root
  • Clicking on the page and tabbing to the first trigger will show the first tooltip. However, tabbing to the second trigger will not show the second tooltip

I made a codepen and recorded the behavior. I also showed that creating the same scenario with the Light DOM does not produce the same error:

Screen.Recording.2023-05-01.at.4.56.55.PM.mov

Expected Behavior

Focusing on the 2nd tooltip trigger within a Shadow Root should display the 2nd tooltip, just like it does in the Light DOM

Reproduction Sample

https://codepen.io/sonofflynn89-the-reactor/pen/poxWRLY

Reproduction Steps

  • Go to the codepen in a Chrome window (must be v111 or later for declarative Shadow DOM to work)
  • Hover over both buttons in the No Shadow DOM section, note that both tooltips appear
  • Hover over both buttons in the With Shadow DOM section, note that both tooltips appear
  • Click above the No Shadow DOM section
  • Hit the tab button and focus both buttons in the No Shadow DOM section, note that both tooltips appear
  • Hit the tab button and focus the first button in the With Shadow DOM section, note that the tooltip appears
  • Hit the tab button and focus the second button in the With Shadow DOM section. Note that the tooltip does not appear

Reproduction Version

v1.3.1

Relevant Info

No response

Regression?

No response

Priority impact

p3 - want for upcoming milestone

Impact

We are working on an incredibly complex, space-limited gallery component and were hoping to leverage icon buttons to help users toggle between different views. Since space is so limited, we opted to move the button descriptions into a popover.

However, the calcite-popover forces keyboard navigation users to click the esc button after every time an icon button comes into focus, otherwise they are locked in and cannot navigate anywhere else. Not a great user experience.

We hoped to leverage the auto close-on-tab capability of calcite-tooltip to solve this problem, only to find out that it won't work for Shadow DOM. We cannot change our complex component to use scoped at this time.

If this problem does not get resolved, we may be forced to remove the tooltips entirely and hope that users can intuit from the icons what the purpose of the buttons are.

Esri team

ArcGIS Hub
@sonofflynn89 sonofflynn89 added 0 - new New issues that need assignment. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. needs triage Planning workflow - pending design/dev review. labels May 1, 2023
@github-actions github-actions bot added p3 - want for upcoming milestone ArcGIS Hub Issues logged by ArcGIS Hub team members. labels May 1, 2023
@sonofflynn89
Copy link
Author

Note: We ended up just not displaying the popover for our use case. This should still be resolved, but it's no longer a want for the upcoming milestone.

@geospatialem geospatialem added impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive and removed p3 - want for upcoming milestone labels May 2, 2023
@driskull
Copy link
Member

driskull commented May 3, 2023

I think we would need to add focusIn event handlers on the shadowDOM to track events. If you actually tab backwards it does show the second one.

Its just that our focusin handler is on the light DOM only.

driskull added a commit that referenced this issue May 3, 2023
@driskull
fix(tooltip): fix focusing tooltip when a referenceElement is within …
d32880d 
…a shadowDOM. #6893
@driskull driskull mentioned this issue May 3, 2023
Merged
@driskull driskull self-assigned this May 3, 2023
@driskull driskull added 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. labels May 3, 2023
driskull added a commit that referenced this issue May 9, 2023
@driskull
fix(tooltip): fix focusing tooltip when a referenceElement is within …
453d527 
…a shadowDOM (#6915)

**Related Issue:** #6893

## Summary

- When a tooltip's reference element is inside a shadowRoot, the
`focusin` and `focusout` handlers are not activating
- This is because the event handlers are on the document and wont' work
inside a shadowRoot
- This PR sets up these focus handlers on each shadowRoot necessary
- Only sets up the focus listeners once per shadowRoot by keeping a
count of referenceElements with the same shadowRoot.
- Adds `getShadowRootNode` dom utility to get an elements rootNode if
the rootNode is a shadowRoot element.
@driskull driskull added 3 - installed Issues that have been merged to the "dev" branch and/or are ready for QA/QC. and removed 2 - in development Issues that are actively being worked on. labels May 9, 2023
@github-actions github-actions bot assigned geospatialem and unassigned driskull May 9, 2023
@github-actions
Copy link
Contributor

github-actions bot commented May 9, 2023

Installed and assigned for verification.

@geospatialem geospatialem added 4 - verified Issues that have been tested, confirmed as mitigated, and are ready to close. and removed 3 - installed Issues that have been merged to the "dev" branch and/or are ready for QA/QC. needs triage Planning workflow - pending design/dev review. labels May 9, 2023
@geospatialem geospatialem added this to the 2023 May Priorities milestone May 9, 2023
@geospatialem
Copy link
Member

Verified in 1.4.0-next.12

verify-tooltip-shadowdom-focu

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

Labels
4 - verified Issues that have been tested, confirmed as mitigated, and are ready to close. ArcGIS Hub Issues logged by ArcGIS Hub team members. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive
Projects
None yet
Milestone
2023 May Priorities
Development

No branches or pull requests
3 participants
@driskull @geospatialem @sonofflynn89