Tooltip ESC key press propagation

[Anastasiia-Boleiko]

Summary

Calcite tooltip is dismissable that complies with Success Criterion 1.4.13 Content on Hover or Focus (Level AA)

But when pressing the 'Esc' key in an opened calcite-tooltip, that is located in a calcite-modal, the whole modal is closed.
The expected behavior is to only close the tooltip and close the Dialog on the next 'ESC' key press.

Generally speaking, it would be nice to close a context element at the moment (with the Esc key).

Actual Behavior

After pressing 'Esc' key to close a tooltip, the whole dialog gets closed.

Expected Behavior

After pressing 'Esc' key - close the tooltip, and close the Dialog on the next 'ESC' key press.

Reproduction Sample

https://codepen.io/anastasiia-zrh/pen/bGjrZYX

Reproduction Steps

1. Click 'Open Modal' button
2. Press 'Esc'

One more example, where it would be nice to close a contextual element (with the Esc key), following visual order:
https://codepen.io/anastasiia-zrh/pen/MWBvZdB

Reproduction Version

1.0.0-beta.97

Working W3C Example/Tutorial

No response

Relevant Info

A similar issue was found in our product by LevelAccess (so we tried calcite components first and found a similar issue):

Ensure that content that appears on hover or focus may be dismissed by the user

Violation:
Ensure that content that appears on hover or focus may be dismissed by the user.
Description:
Examples include:
Tooltips
In this case, pressing the Esc key does close the tooltip, but it also closes the entire dialog.
User Impact
Users may press the Esc key to close the tooltip and may unwittingly and unexpectedly close the entire dialog.

Regression?

No response

Esri team

ArcGIS Urban

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified with https://codepen.io/anastasiia-zrh/pen/bGjrZYX in 1.0.5.

Does not include the https://codepen.io/anastasiia-zrh/pen/MWBvZdB sample. @jcfranco, should we open a new issue to close a contextual element (with the Esc key), following visual order?

[Anastasiia-Boleiko]

Thank you for the update!

Recently, I've checked the link:

Does not include the https://codepen.io/anastasiia-zrh/pen/MWBvZdB sample.

And realized that the behavior has changed (scrolls appear when tooltip is visible), please see the recordings below:
Chrome Version 110.0.5481.77 (Official Build) (arm64)

Safari Version 16.0 (17614.1.25.9.10, 17614)

Ther similar behavior is in v1.0.3 https://codepen.io/anastasiia-zrh/pen/RwBzVeJ?editors=100:
When the tooltip is visible (on the recording I scrolled down to it using keyboard arrows) and pressed Esc, the modal was closed.

Please, let me know if any additional info is needed.

[geospatialem]

And realized that the behavior has changed (scrolls appear when tooltip is visible), please see the recordings below:
Chrome Version 110.0.5481.77 (Official Build) (arm64)

@Anastasiia-Boleiko Ah, yes, forgot to mention I added the overlay-positioning attribute with a value of "fixed" to the original Codepen so the tooltip displays.

The attribute is needed to display when used within parent components, to ensure proper placement.

For instance:

    <calcite-tooltip label="Example label" overlay-positioning="fixed" reference-element="tooltip-button3" close-on-click>

[Anastasiia-Boleiko]

@geospatialem Thank you very much! Now the tooltip has a proper placement👍

Could you please suggest if you can reproduce the same behavior:

But when pressing the 'Esc' key in an opened calcite-tooltip, that is located in a calcite-modal, the whole modal is closed.

I've reproduced it in v1.0.3: https://codepen.io/anastasiia-zrh/pen/JjBQrER

[geospatialem]

I've reproduced it in v1.0.3: https://codepen.io/anastasiia-zrh/pen/JjBQrER

Yes, it would be present in 1.0.3 - the fix was mitigated in last night's patch, 1.0.5: https://codepen.io/geospatialem/pen/LYBKOeg

[Anastasiia-Boleiko]

Oh, got it! I do apologize for the misunderstanding.
Thank you all very much! 👍

[geospatialem]

No worries! Was waiting to close this out to address the nice to have - just added a new issue and CC'ed you on it to follow along the progress. Thanks for the great feedback to continuously improve CC!