feat(tooltip): allow focusing and clicking on interactive elements within a tooltip #9914

driskull · 2024-07-30T23:30:10Z

Related Issue: #6298

Summary

Allows placing interactive elements in tooltip elements with the following caveats
- It should be advised against placing interactive elements within a tooltip because there is no a11y guidelines for accessing interactive elements within a tooltip role. Ideally a popover should be used for interactive elements.
- No focus trapping or focus will be brought to interactive elements within the tooltip.
- You can tab to a focusable element within a tooltip if the tooltip with the focusable element is the next focusable element within the DOM order. Otherwise, you could listen for the tooltip to be open and focus on the first interactive element if you wanted to do so.
add test
add story

# Conflicts: # packages/calcite-components/src/components/tooltip/tooltip.e2e.ts

jcfranco

This looks great, @driskull! ✨🚀🪐🛰️ ✨

Based on the PR description, do we need to update the docs to emphasize the interactive content caveat along with additional context? cc @geospatialem @DitwanP

driskull · 2024-08-05T23:06:40Z

Based on the PR description, do we need to update the docs to emphasize the interactive content caveat along with additional context

I'm not sure we want to encourage putting interactive elements within a tooltip so I don't recommend promoting or documenting this use case. It will work great for mouse users but probably not for screen reader users.

This PR handles the use case and gets interactive elements working in tooltips. I just don't think we should promote or mention the use case due to the a11y concerns.

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-ui-icons: 3.31.0</summary> ## [3.31.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons@3.30.0...@esri/calcite-ui-icons@3.31.0) (2024-08-28) ### Features * Add close-caption, transcript, flag, and flag-slash ([#10039](#10039)) ([85c7d69](85c7d69)) * Add layer-connection ([#10067](#10067)) ([46dd2ee](46dd2ee)) ### Bug Fixes * Update close-caption, and transcript ([#10077](#10077)) ([2e86904](2e86904)) </details> <details><summary>@esri/calcite-components: 2.12.0</summary> ## [2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.1...@esri/calcite-components@2.12.0) (2024-08-28) ### Features * **accordion, accordion-item:** Add component tokens ([#9861](#9861)) ([48f7f08](48f7f08)) * **action, action-bar, action-group, action-menu, action-pad:** Add component tokens ([#10058](#10058)) ([de96c24](de96c24)) * **alert:** Add 'queue' property to prioritize the ordering of alerts when opened ([#10029](#10029)) ([3aa47a4](3aa47a4)) * **combobox-item:** Add `heading` property (deprecates `textLabel`) and add `label` property ([#9987](#9987)) ([90920a0](90920a0)) * **dialog:** Add CSS variables to offset the position ([#9904](#9904)) ([660f0c5](660f0c5)) * **dialog:** Add escapeDisabled property ([#10081](#10081)) ([1ca8fba](1ca8fba)) * **dialog:** Add outsideCloseDisabled property ([#9978](#9978)) ([f1d89b9](f1d89b9)) * **dialog:** Add resizable and dragEnabled properties ([#9804](#9804)) ([e3e499e](e3e499e)) * **icon:** Add component tokens ([#10062](#10062)) ([34d5689](34d5689)) * **input-time-zone:** Display selected time zone country in region mode selection ([#9988](#9988)) ([1575729](1575729)) * **loader:** Add `determinate-value` type ([#9957](#9957)) ([7f21726](7f21726)) * **panel:** Add '--calcite-panel-content-space' style ([#10117](#10117)) ([0e3ebcb](0e3ebcb)) * **table:** Update multiple selection iconography ([#10125](#10125)) ([f2b2016](f2b2016)) * **tooltip:** Allow focusing and clicking on interactive elements within a tooltip ([#9914](#9914)) ([a3c144c](a3c144c)) ### Bug Fixes * **accordion-item:** Align focus styles across browsers ([#9944](#9944)) ([2e29b42](2e29b42)) * **alert:** Properly form a queue of alerts ([#10032](#10032)) ([b24d6ac](b24d6ac)) * **color-picker:** Prevent text selection when using color sliders/field ([#10043](#10043)) ([ab33e4d](ab33e4d)) * **combobox, input-date-picker, input-number, input-text, input-time-picker, input, radio-button-group, segmented-control, select, text-area:** Use toAriaBoolean in aria-invalid attribute to provide valid AT error messaging ([#10079](#10079)) ([78bc096](78bc096)) * **combobox:** Update placeholder-icon color ([#9956](#9956)) ([d916ca4](d916ca4)) * **dialog, flow-item:** Slotted closable panels should not close the component ([#10130](#10130)) ([ce2513d](ce2513d)) * **dialog:** Allow shell to be slotted inside ([#10118](#10118)) ([ea3a6de](ea3a6de)) * **dialog:** Fix escapeDisabled when the escape key is pressed on the panel ([#10097](#10097)) ([9a5f1f1](9a5f1f1)) * Ensure `beforeOpen`/`open` and `beforeClose`/`close` events emit properly ([#9958](#9958)) ([7e2764f](7e2764f)) * **filter:** Fix setFocus method ([#10149](#10149)) ([f4a959a](f4a959a)) * **input-date-picker:** Fix selection for the "bs" and "it-CH" locales ([#9976](#9976)) ([368d9e2](368d9e2)) * **input-date-picker:** Prevent console error when using a lang ([#10162](#10162)) ([e7bf604](e7bf604)) * **input-time-zone:** Translate region names ([#9940](#9940)) ([f975adb](f975adb)) * **input, combobox, input-date-picker, input-number, input-text, input-time-picker, radio-button-group, segmented-control, select, text-area:** Provide clear field error messaging for AT ([#9880](#9880)) ([46ad7d2](46ad7d2)) * **input, input-number, input-text:** No longer set focus when a validation message is clicked ([#10008](#10008)) ([529bb5a](529bb5a)) * **label:** Prevent focusing and toggling elements slotted within a label when a text selection occurs ([#9990](#9990)) ([49d6ae1](49d6ae1)) * **list-item:** Prevent scrolling when item is focused. ([#9948](#9948)) ([eab1e06](eab1e06)) * **panel:** Define heading and description line height ([#10085](#10085)) ([5478eb9](5478eb9)) * **slider:** Prevent text selection when using the slider ([#10073](#10073)) ([04bf325](04bf325)) * **slider:** Resolve step & snap floating point precision ([#10148](#10148)) ([613bc47](613bc47)) * **stepper-item:** Update component to take full width when parent's layout is "vertical" ([#10009](#10009)) ([03a5a30](03a5a30)) * **tree,tree-item:** Replace checkbox with div and a11y attributes ([#9849](#9849)) ([b1ac951](b1ac951)) ### Performance Improvements * **input-time-zone:** Improve memory footprint by leveraging browser cache and releasing utils after their use ([#9945](#9945)) ([a3d2141](a3d2141)) ### Reverts * "build(deps): remove unused cheerio package ([#10049](#10049))" ([#10057](#10057)) ([d271ab1](d271ab1)) * Add stories ([#10131](#10131)) ([e3a6590](e3a6590)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-ui-icons bumped from 3.31.0-next.4 to 3.31.0 </details> <details><summary>@esri/calcite-components-angular: 2.12.0</summary> ## [2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.1...@esri/calcite-components-angular@2.12.0) (2024-08-28) ### Miscellaneous Chores * **@esri/calcite-components-angular:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 2.12.0-next.34 to 2.12.0 </details> <details><summary>@esri/calcite-components-react: 2.12.0</summary> ## [2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.1...@esri/calcite-components-react@2.12.0) (2024-08-28) ### Miscellaneous Chores * **@esri/calcite-components-react:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 2.12.0-next.34 to 2.12.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-ui-icons: 3.31.0</summary> ## [3.31.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons@3.30.0...@esri/calcite-ui-icons@3.31.0) (2024-08-28) ### Features * Add close-caption, transcript, flag, and flag-slash ([#10039](#10039)) ([85c7d69](85c7d69)) * Add layer-connection ([#10067](#10067)) ([46dd2ee](46dd2ee)) ### Bug Fixes * Update close-caption, and transcript ([#10077](#10077)) ([2e86904](2e86904)) </details> <details><summary>@esri/calcite-components: 2.12.0</summary> ## [2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.1...@esri/calcite-components@2.12.0) (2024-08-28) ### Features * **accordion, accordion-item:** Add component tokens ([#9861](#9861)) ([48f7f08](48f7f08)) * **action, action-bar, action-group, action-menu, action-pad:** Add component tokens ([#10058](#10058)) ([de96c24](de96c24)) * **alert:** Add 'queue' property to prioritize the ordering of alerts when opened ([#10029](#10029)) ([3aa47a4](3aa47a4)) * **combobox-item:** Add `heading` property (deprecates `textLabel`) and add `label` property ([#9987](#9987)) ([90920a0](90920a0)) * **dialog:** Add CSS variables to offset the position ([#9904](#9904)) ([660f0c5](660f0c5)) * **dialog:** Add escapeDisabled property ([#10081](#10081)) ([1ca8fba](1ca8fba)) * **dialog:** Add outsideCloseDisabled property ([#9978](#9978)) ([f1d89b9](f1d89b9)) * **dialog:** Add resizable and dragEnabled properties ([#9804](#9804)) ([e3e499e](e3e499e)) * **icon:** Add component tokens ([#10062](#10062)) ([34d5689](34d5689)) * **input-time-zone:** Display selected time zone country in region mode selection ([#9988](#9988)) ([1575729](1575729)) * **loader:** Add `determinate-value` type ([#9957](#9957)) ([7f21726](7f21726)) * **panel:** Add '--calcite-panel-content-space' style ([#10117](#10117)) ([0e3ebcb](0e3ebcb)) * **table:** Update multiple selection iconography ([#10125](#10125)) ([f2b2016](f2b2016)) * **tooltip:** Allow focusing and clicking on interactive elements within a tooltip ([#9914](#9914)) ([a3c144c](a3c144c)) ### Bug Fixes * **accordion-item:** Align focus styles across browsers ([#9944](#9944)) ([2e29b42](2e29b42)) * **alert:** Properly form a queue of alerts ([#10032](#10032)) ([b24d6ac](b24d6ac)) * **color-picker:** Prevent text selection when using color sliders/field ([#10043](#10043)) ([ab33e4d](ab33e4d)) * **combobox, input-date-picker, input-number, input-text, input-time-picker, input, radio-button-group, segmented-control, select, text-area:** Use toAriaBoolean in aria-invalid attribute to provide valid AT error messaging ([#10079](#10079)) ([78bc096](78bc096)) * **combobox:** Update placeholder-icon color ([#9956](#9956)) ([d916ca4](d916ca4)) * **dialog, flow-item:** Slotted closable panels should not close the component ([#10130](#10130)) ([ce2513d](ce2513d)) * **dialog:** Allow shell to be slotted inside ([#10118](#10118)) ([ea3a6de](ea3a6de)) * **dialog:** Fix escapeDisabled when the escape key is pressed on the panel ([#10097](#10097)) ([9a5f1f1](9a5f1f1)) * Ensure `beforeOpen`/`open` and `beforeClose`/`close` events emit properly ([#9958](#9958)) ([7e2764f](7e2764f)) * **filter:** Fix setFocus method ([#10149](#10149)) ([f4a959a](f4a959a)) * **input-date-picker:** Fix selection for the "bs" and "it-CH" locales ([#9976](#9976)) ([368d9e2](368d9e2)) * **input-date-picker:** Prevent console error when using a lang ([#10162](#10162)) ([e7bf604](e7bf604)) * **input-time-zone:** Translate region names ([#9940](#9940)) ([f975adb](f975adb)) * **input, combobox, input-date-picker, input-number, input-text, input-time-picker, radio-button-group, segmented-control, select, text-area:** Provide clear field error messaging for AT ([#9880](#9880)) ([46ad7d2](46ad7d2)) * **input, input-number, input-text:** No longer set focus when a validation message is clicked ([#10008](#10008)) ([529bb5a](529bb5a)) * **label:** Prevent focusing and toggling elements slotted within a label when a text selection occurs ([#9990](#9990)) ([49d6ae1](49d6ae1)) * **list-item:** Prevent scrolling when item is focused. ([#9948](#9948)) ([eab1e06](eab1e06)) * **panel:** Define heading and description line height ([#10085](#10085)) ([5478eb9](5478eb9)) * **slider:** Prevent text selection when using the slider ([#10073](#10073)) ([04bf325](04bf325)) * **slider:** Resolve step & snap floating point precision ([#10148](#10148)) ([613bc47](613bc47)) * **stepper-item:** Update component to take full width when parent's layout is "vertical" ([#10009](#10009)) ([03a5a30](03a5a30)) * **tree,tree-item:** Replace checkbox with div and a11y attributes ([#9849](#9849)) ([b1ac951](b1ac951)) ### Performance Improvements * **input-time-zone:** Improve memory footprint by leveraging browser cache and releasing utils after their use ([#9945](#9945)) ([a3d2141](a3d2141)) ### Reverts * "build(deps): remove unused cheerio package ([#10049](#10049))" ([#10057](#10057)) ([d271ab1](d271ab1)) * Add stories ([#10131](#10131)) ([e3a6590](e3a6590)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-ui-icons bumped from 3.31.0-next.4 to 3.31.0 </details> <details><summary>@esri/calcite-components-angular: 2.12.0</summary> ## [2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.1...@esri/calcite-components-angular@2.12.0) (2024-08-28) ### Miscellaneous Chores * **@esri/calcite-components-angular:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 2.12.0-next.34 to 2.12.0 </details> <details><summary>@esri/calcite-components-react: 2.12.0</summary> ## [2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.1...@esri/calcite-components-react@2.12.0) (2024-08-28) ### Miscellaneous Chores * **@esri/calcite-components-react:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 2.12.0-next.34 to 2.12.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> **Related Issue:** # ## Summary Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

driskull added 2 commits July 30, 2024 16:07

feat(tooltip): allow interactive elements with caveats. #6298

c1cf49d

add tests

5222eb3

github-actions bot assigned driskull Jul 30, 2024

github-actions bot added the enhancement Issues tied to a new feature or request. label Jul 30, 2024

driskull added 2 commits July 30, 2024 16:46

add story

9dc9c81

Merge branch 'dev' into dris0000/tooltip-allow-interactive-elements

efb1f81

# Conflicts: # packages/calcite-components/src/components/tooltip/tooltip.e2e.ts

driskull added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Jul 31, 2024

driskull marked this pull request as ready for review July 31, 2024 22:32

Merge branch 'dev' into dris0000/tooltip-allow-interactive-elements

e72a37b

driskull added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Aug 1, 2024

driskull requested a review from jcfranco August 1, 2024 22:28

driskull changed the title ~~feat(tooltip): allow interactive elements with caveats~~ feat(tooltip): allow interactive elements with accessibility caveats Aug 1, 2024

Merge branch 'dev' into dris0000/tooltip-allow-interactive-elements

7ac6a3e

driskull changed the title ~~feat(tooltip): allow interactive elements with accessibility caveats~~ feat(tooltip): allow focusing and clicking on interactive elements within a tooltip. Aug 5, 2024

driskull removed the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Aug 5, 2024

driskull changed the title ~~feat(tooltip): allow focusing and clicking on interactive elements within a tooltip.~~ feat(tooltip): allow focusing and clicking on interactive elements within a tooltip Aug 5, 2024

jcfranco approved these changes Aug 5, 2024

View reviewed changes

driskull added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Aug 5, 2024

driskull merged commit a3c144c into dev Aug 5, 2024
15 checks passed

driskull deleted the dris0000/tooltip-allow-interactive-elements branch August 5, 2024 23:28

github-actions bot added this to the 2024-08-27 - Aug Release milestone Aug 5, 2024

benelan mentioned this pull request Aug 28, 2024

chore: release main #10171

Merged

benelan mentioned this pull request Aug 28, 2024

chore: release main (#10171) #10172

Merged

benelan mentioned this pull request Aug 28, 2024

chore: release main (#10171) #10173

Closed

calcite-admin mentioned this pull request Sep 30, 2024

chore: release main #10457

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(tooltip): allow focusing and clicking on interactive elements within a tooltip #9914

feat(tooltip): allow focusing and clicking on interactive elements within a tooltip #9914

driskull commented Jul 30, 2024 •

edited

Loading

jcfranco left a comment

driskull commented Aug 5, 2024

feat(tooltip): allow focusing and clicking on interactive elements within a tooltip #9914

feat(tooltip): allow focusing and clicking on interactive elements within a tooltip #9914

Conversation

driskull commented Jul 30, 2024 • edited Loading

Summary

jcfranco left a comment

Choose a reason for hiding this comment

driskull commented Aug 5, 2024

driskull commented Jul 30, 2024 •

edited

Loading