[SideNav] Include popover in flyout trap focus#243612
Merged
weronikaolejniczak merged 4 commits intoelastic:mainfrom Nov 21, 2025
Merged
[SideNav] Include popover in flyout trap focus#243612weronikaolejniczak merged 4 commits intoelastic:mainfrom
weronikaolejniczak merged 4 commits intoelastic:mainfrom
Conversation
weronikaolejniczak
changed the title
weronikaolejniczak
added
backport:skip
weronikaolejniczak
force-pushed
the
fix/popover-flyout
branch
2 times, most recently
from
046e623 to
51be1a7
Compare
Contributor
|
Pinging @elastic/eui-team (EUI) |
Dosant
approved these changes
Nov 20, 2025
Contributor
|
I tested both chrome and safari! |
ashokaditya
approved these changes
Nov 20, 2025
Member
ashokaditya
left a comment
ashokaditya
left a comment
There was a problem hiding this comment.
Thanks for the fix! I tested it out and I am able to click and navigate to sub nav links when response console overlay is open from Alerts details.
...ecurity/plugins/security_solution/public/management/components/page_overlay/page_overlay.tsx
Outdated
Show resolved
Hide resolved
…agement/components/page_overlay/page_overlay.tsx Co-authored-by: Ash <1849116+ashokaditya@users.noreply.github.com>
weronikaolejniczak
force-pushed
the
fix/popover-flyout
branch
from
c2ed7f3 to
3fb28f6
Compare
weronikaolejniczak
added a commit
that referenced
this pull request
Nov 21, 2025
…ems not interactive (#243685) ## Summary There is a meaningful fix already on: #243612 It's going into 9.3 and cannot be backported because it relies on latest EUI updates ([v109.1.0](https://github.com/elastic/eui/releases/tag/v109.1.0)), specifically: > Fixed an issue where portalled components like EuiPopover were not included in EuiFlyout's focus trap through includeSelectorInFocusTrap, making them inaccessible to keyboard users (elastic/eui#9103) ## QA ### Flyouts https://github.com/user-attachments/assets/3957c82e-c5ed-4113-bd3d-5a8a3ffa5bd6 ### Security PageOverlay https://github.com/user-attachments/assets/9a491ba0-51b3-44d6-8d39-63aea538f2e6 ### Keyboard navigation https://github.com/user-attachments/assets/f1d8677c-5825-4ace-aa13-3b17b6b8b4e5
Contributor
💚 Build Succeeded
Metrics [docs]Async chunks
History
|
eokoneyo
pushed a commit
to eokoneyo/kibana
that referenced
this pull request
Dec 2, 2025
## Summary ### Flyout See elastic#239500 for details. I'm adding a proper selector to the popover panel so that it's included in flyout focus trap shards and can be navigable with a keyboard when a flyout is rendered. Removed the flyout check workaround in `handleBlur` added on elastic#238230. https://github.com/user-attachments/assets/3f01d80a-94f9-44be-8814-c35801906bd7 Entering a popover with a keyboard and clicking on a popover item with a mouse both work as expected normally and when a flyout is rendered on the screen. ### Console overlay Resolves elastic/security-team#14810 To fix it on EUI side for flyouts, we opted for a singleton that works with one EUI instance. Because Security overlay (`x-pack/solutions/security/plugins/security_solution/public/management/components/page_overlay/page_overlay.tsx`) uses `EuiFocusTrap` directly, and adding a global Kibana singleton seems like an overkill, I went for a Proxy array method. It's slightly more reactive but keeps the change scoped to `PageOverlay` in Security solution. Whenever the underlying library `react-focus-on` accesses `shards` value, we query the elements by `euiIncludeSelectorInFocusTrap.selector` (that on the same PR is applied to the popovers ☝🏻). #### Before https://github.com/user-attachments/assets/a609598a-ddc0-425c-8590-dc3f6507b18b #### After https://github.com/user-attachments/assets/5bd2c783-e6bf-483d-8489-aff5b884f509 ## QA ### Flyouts Any flyout in Kibana will do. Exemplary steps to reproduce: 1. Access any solution view. 2. Go to Discover. 3. In the toolbar, to the right, click on the folder icon - "Open session". 4. Try navigating the side nav: - [ ] press <kbd>Enter</kbd> to move focus to the popover - [ ] use Up and Down arrow keys to navigate the list - [ ] press <kbd>Escape</kbd> to move focus back to the popover trigger 5. Test mouse interaction: - [ ] hover over a menu item with a submenu to trigger the popover - [ ] click on any menu item, it should redirect - [ ] go back and test the nested "More" menu ### Security Steps to reproduce are outlined in the [issue](elastic/security-team#14810). Run ES with: `yarn es snapshot --license trial -E xpack.security.authc.api_key.enabled=true -E http.host=0.0.0.0` Follow similar steps as above ☝🏻 --------- Co-authored-by: Ash <1849116+ashokaditya@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Flyout
See #239500 for details.
I'm adding a proper selector to the popover panel so that it's included in flyout focus trap shards and can be navigable with a keyboard when a flyout is rendered.
Removed the flyout check workaround in
handleBluradded on #238230.Kapture.2025-11-20.at.11.26.46.mp4
Entering a popover with a keyboard and clicking on a popover item with a mouse both work as expected normally and when a flyout is rendered on the screen.
Console overlay
Resolves https://github.com/elastic/security-team/issues/14810
To fix it on EUI side for flyouts, we opted for a singleton that works with one EUI instance.
Because Security overlay (
x-pack/solutions/security/plugins/security_solution/public/management/components/page_overlay/page_overlay.tsx) usesEuiFocusTrapdirectly, and adding a global Kibana singleton seems like an overkill, I went for a Proxy array method. It's slightly more reactive but keeps the change scoped toPageOverlayin Security solution. Whenever the underlying libraryreact-focus-onaccessesshardsvalue, we query the elements byeuiIncludeSelectorInFocusTrap.selector(that on the same PR is applied to the popovers ☝🏻).Before
Kapture.2025-11-20.at.15.37.40.mp4
After
Kapture.2025-11-20.at.15.38.47.mp4
QA
Flyouts
Any flyout in Kibana will do. Exemplary steps to reproduce:
Security
Steps to reproduce are outlined in the issue.
Run ES with:
yarn es snapshot --license trial -E xpack.security.authc.api_key.enabled=true -E http.host=0.0.0.0Follow similar steps as above ☝🏻