fix(tool_tip): stop propagation on escape key down

[weronikaolejniczak]

Summary

When we have EuiIconTip (consequently, EuiTooltip) within EuiFlyout and with the tooltip open we click "Escape" key, the flyout gets closed. The reason is, the escape keydown event is propagated from the tooltip and captured by the flyout as its parent. Simple event.stopPropagation() inside EuiTooltip seemed to do the trick.

closes #8130

QA

Test path:

1. Run Storybook locally: yarn storybook.
2. Find the component EuiFlyout.
3. Close the flyout with the escape key.
4. Change the EuiFlyoutBody to contain a EuiToolTip as children.
5. Focus the tooltip and close it with the escape key. The flyout should not close, the tooltip - yes.
6. Focus out of the tooltip and close the flyout with the escape key.

Screen.Recording.2024-11-14.at.15.05.38.mov

Manual QA of other focus-trap elements

EuiModal

Screen.Recording.2024-11-22.at.19.44.54.mov

EuiPopover

Screen.Recording.2024-11-22.at.19.47.32.mov

EuiDataGrid fullscreen

Screen.Recording.2024-11-22.at.19.49.26.mov

General checklist

• Browser QA
  • Checked in both light and dark modes (not applicable)
  • Checked in mobile (not applicable)
  • Checked in Chrome, Safari, Edge, and Firefox
  • Checked for accessibility including keyboard-only and screenreader modes
• Docs site QA
  • Added documentation (not applicable)
  • Props have proper autodocs (using @default if default values are missing) and playground toggles (not applicable)
  • Checked Code Sandbox works for any docs examples (not applicable)
• Code quality checklist
  • Added or updated jest and cypress tests
  • Updated visual regression tests (not applicable)
• Release checklist
  • A changelog entry exists and is marked appropriately.
  • If applicable, added the breaking change issue label (and filled out the breaking change checklist)
• Designer checklist
  • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

[cee-chen]

This LGTM (awesome work with the E2E test!) - but I'll defer to @mgadewoll for any final comments since I believe she solved a similar bug/issue recently. My only other thought is we might also want to either QA or write a test for the following other focus trap components:

• modals
• popovers
• various fullscreen modes (EuiDataGrid fullscreen, EuiImage fullscreen, EuiCodeBlock fullscreen(?) - not sure that last one can even have a tooltip)

[weronikaolejniczak]

Thanks for the great suggestion, Cee! 🌈 I focused so much on fixing that one test case I forgot about the other overlay elements that might suffer the same issue.

I updated the description with the screen recordings from the manual QA. EuiImage and EuiCodeBlock don't seem to allow for additional children in the fullscreen mode.

One doubt I have - is the stopPropagation in the tooltip the only point-of-failure for all these cases? If so, is it okay that we're adding (rather) expensive Cypress tests for each affected component? We could switch to RTL but then we need to remember it works with a dumb-downed DOM implementation, maybe not the best fit for asserting keyboard navigation and overlay elements.

If we agree to add the automated tests after all, I'll work on that first thing Monday!

[kibanamachine]

Preview staging links for this PR:

• Docs site: https://eui.elastic.co/pr_8140/
• Storybook: https://eui.elastic.co/pr_8140/storybook
• New docs: https://eui.elastic.co/pr_8140/new-docs

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 7acdd8b

History

• 💚 Build #3110 succeeded ba8708d
• 💔 Build #3100 failed 3bcd2b5
• 💔 Build #3091 failed a4d77c5
• 💔 Build #3085 failed 43357c2
• 💔 Build #3072 failed a6e044f
• 💔 Build #3066 failed e2b25bd

[cee-chen]

I'm fine with skipping the automated Cypress tests for each focus trap use case - flyouts are likely our biggest use-case in any case. EuiDataGrid might be the second most likely use-case in production. I'm also fine with manual QA only for the cases I noted, I just want to make sure someone tested it :) It might also be nice for future devs to add an inline comment next to the flyout Cypress test noting which other edge cases to manually QA.