[EuiHeader] Increase z-index value by acstll · Pull Request #8325 · elastic/eui

acstll · 2025-02-14T13:10:04Z

Summary

Resolves #8206

Note

Please refer to the original issue in order to better understand the problem

To summarize the problem: in a Project View in Kibana (e.g. Serverless) when a Flyout is open, the navigation in Collapsible Nav Beta is reachable via keyboard, even though it stands behind the Flyout's overlay (screenshot).

We have evaluated more than one way to solve the issue. Most of them have problems. The one presented here feels like the least fragile (it ~~won't~~ shouldn't create other problems down the road) and the least complex.

Instead of excluding the navigation from the focusable elements in the Header (e.g. adding the inert attribute to it while the Flyout is open) —as suggested in the original issue—, this PR goes a different way: it brings the navigation up above, on top of the Flyout's overlay, so it's OK for it to be focusable.

It's also worth mentioning that this is the way the Classic view works: if you toggle the navigation open with a Flyout open, it goes on top of the overlay and it's reachable.

The z-index of the Header has been changed from 1000 to 2000. But it remains below everything else (e.g. modals) it was below before. The relationship between the Header's z-index and other components whose z-index is relative to it, remains the same. Only the z-index relationship between Header and Flyout is changed.

Only the z-index of the fixed Header has been increased by 1, leaving everything else unaffected.

Here's a recording demoing the idea

Screen.Recording.2025-02-12.at.22.43.59.z-index.mov

The one remarkable side-effect, and at first glance the only, of the change is the Header's shadow appearing over the Flyout (screenshot below).

Shadow appearing:

Before (current)	After (with the fix)

QA

https://eui.elastic.co/pr_8325/#/layout/header/elastic-pattern-project

Important

The example header_elastic_pattern_project.tsx is there only for testing purposes, not meant to be merged!

To test this locally

checkout PR locally (e.g. gh pr checkout 8325)
run yarn start in packages/eui
visit http://localhost:8030/#/layout/header/elastic-pattern-project
open Alerts flyout on the top right corner

General checklist

Browser QA
- ~~Checked in both light and dark modes~~
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
- Checked for accessibility including keyboard-only and ~~screenreader modes~~
Docs site QA
- Added documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
- ~~Checked Code Sandbox works for any docs examples~~
Code quality checklist
- Added or updated jest and cypress tests
- Updated visual regression tests
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)

…to match the intent in the inline comment

This should be either reverted or refactored/improved in order to keep it

acstll · 2025-02-24T13:19:44Z

I think the fix is solid now. I want to add a test.

packages/eui/changelogs/upcoming/8325.md

packages/eui/src-docs/src/views/header/header_elastic_pattern_project.tsx

packages/eui/src/components/header/header.spec.tsx

mgadewoll · 2025-02-25T12:11:22Z

The one remarkable side-effect, and at first glance the only, of the change is the Header's shadow appearing over the Flyout

@acstll I think this is a drawback we have to accept but I'd suggest to get an approval of design on this too.

acstll · 2025-02-25T12:35:25Z

@acstll I think this is a drawback we have to accept but I'd suggest to get an approval of design on this too.

Definitely, I'm requesting a review from Ryan 🙏 (@ryankeairns I remember you mentioned a suggestion regarding the shadow…?)

acstll · 2025-02-25T12:44:33Z

@ryankeairns I'll request a review again in a bit when this is ready-ready 😁

On mobile: the EuiCollapsibleNavBeta flyout is portalled, so the stacking context is determined by the overlay mask (EuiOverlayMask), making the flyouts fight each other with the same z-index (1000 from levels.maskBelowHeader) — we do nothing

acstll · 2025-02-26T12:19:35Z

@mgadewoll I think I addressed all pending changes 🤓

updated changelog 192efcc
improved flyout story to include focusable items cf1f070
checked mobile behaviour 7686c05
test collapsible nav in flyout shards cdebce0

packages/eui/src-docs/src/views/header/header_elastic_pattern_project.tsx

packages/eui/src/components/flyout/flyout.spec.tsx

It was meant for manual testing and debugging only

Needs a bit of investigation why it's failing on React 16 and 17

packages/eui/src/components/flyout/flyout.spec.tsx

mgadewoll

🚢 🐈‍⬛ Thanks for digging into this! The solution is technically definitely the best value for impact. Let's wait for design thoughts from @ryankeairns before merging though.

ryankeairns · 2025-02-27T21:54:59Z

It's hard to argue with the accessibility gain. Visually, I believe it is a bit of a downgrade but not enough to stop from proceeding. As a mitigating effort, let's decrease the size of the shadow on the header.

Changing this line to euiShadowXSmall

https://github.com/elastic/eui/blob/887efb88c88bc930a7348af2f4c84ed4c7502b32/packages/eui/src/components/header/header.styles.ts#L41C9-L41C23

...which results in...

mgadewoll · 2025-02-28T08:35:16Z

It's hard to argue with the accessibility gain. Visually, I believe it is a bit of a downgrade but not enough to stop from proceeding. As a mitigating effort, let's decrease the size of the shadow on the header.

Changing this line to euiShadowXSmall

https://github.com/elastic/eui/blob/887efb88c88bc930a7348af2f4c84ed4c7502b32/packages/eui/src/components/header/header.styles.ts#L41C9-L41C23

@ryankeairns To confirm: we're fine changing it generally for EuiHeader, correct? Or should it be for fixed headers only?

And an additional side thought: We'll change the shadows for Borealis soon (issue) which will remove euiShadowXSmall - will the new euiShadowSmall work fine then anyway?

kibanamachine · 2025-02-28T09:07:25Z

Preview staging links for this PR:

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

elasticmachine · 2025-02-28T09:07:29Z

💚 Build Succeeded

Buildkite Build
Commit: 0123868

History

💚 Build #3549 succeeded 59bdf51
💚 Build #3494 succeeded bb61e92
💔 Build #3493 failed 1c98683
💚 Build #3491 succeeded 108ab90
💚 Build #3489 succeeded 192efcc
💚 Build #3478 succeeded 49c1ae5

cc @acstll

ryankeairns · 2025-02-28T18:34:10Z

It's hard to argue with the accessibility gain. Visually, I believe it is a bit of a downgrade but not enough to stop from proceeding. As a mitigating effort, let's decrease the size of the shadow on the header.
Changing this line to euiShadowXSmall
https://github.com/elastic/eui/blob/887efb88c88bc930a7348af2f4c84ed4c7502b32/packages/eui/src/components/header/header.styles.ts#L41C9-L41C23

@ryankeairns To confirm: we're fine changing it generally for EuiHeader, correct? Or should it be for fixed headers only?

Yes. (Do we differentiate the style per position today?)

And an additional side thought: We'll change the shadows for Borealis soon (issue) which will remove euiShadowXSmall - will the new euiShadowSmall work fine then anyway?

🤔 Are we removing XSmall or flat? I thought it was the latter... in any case, I still feel this change - on this PR - is helpful for the interim/Amsterdam.

mgadewoll · 2025-02-28T18:47:39Z

@ryankeairns Thanks for the confirmation!

Yes. (Do we differentiate the style per position today?)

No, we don't. If we could distinguish fixed headers while a flyout is open, that might be an idea for adjusting it conditionally, but currently that's not a thing.

🤔 Are we removing XSmall or flat? I thought it was the latter... in any case, I still feel this change - on this PR - is helpful for the interim/Amsterdam.

I thought both, but looking at the specs here again it does define xs still so ... maybe? 😅 🤷‍♀️

mgadewoll · 2025-02-28T18:47:56Z

@acstll I already added the change and will go ahead and merge your PR. 🚀

# Backport This is a manual backport of #212974 and #213292 --- `99.3.0-classic.0` ⏩ `100.0.0-classic.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) --- ## [`v100.0.0`](https://github.com/elastic/eui/releases/v100.0.0) **Bug fixes** - Fixed `EuiComboBox` by cleaning duplicated values when having a delimiter prop. ([#8335](elastic/eui#8335)) ## [`v99.4.0`](https://github.com/elastic/eui/releases/v99.4.0) - Minor design updates to `EuiCollapsibleNavBeta` ([#8332](elastic/eui#8332)) - Allow section without a title - Second-level icons should be horizontally aligned with the top-level icon - Turn off text truncation for nav items - Added `quickSelectButtonProps` to `EuiSuperDatePicker` ([#8380](elastic/eui#8380)) **Bug fixes** - Fixed a bug in `EuiHeader` where the navigation of `EuiCollapsibleNavBeta` would render below the `EuiFlyout`'s overlay ([#8325](elastic/eui#8325)) **Accessibility** - Improved the accessibility of `EuiComboBox` by adding `aria-setsize` and `aria-posinset` to ensure correct information is provided for its virtualized listbox ([#8333](elastic/eui#8333)) - Improved the `EuiAccordionTrigger`'s screen reader UX by passed `aria-hidden` to the `EuiAccordionArrow` to avoid duplicated announcements by screen readers. ([#8342](elastic/eui#8342)) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

…nents' z-index by 1 to be on top of side nav (#236655) ## Summary This PR an issue that has been present for a few months: the side nav in Security Solution is rendered on top of the expandable flyout. This issue comes from [this change](https://github.com/elastic/eui/blob/main/packages/eui/src/components/header/header.styles.ts) introduced by [this PR](elastic/eui#8325) a few months ago in EUI. The changes suggested here are: - bump the document flyout's `z-index` from `1000` to `1001` - bump the Timeline modal's `z-index` from `1001` to `1002` - bump the timeline flyout's `z-index` from `1002` to `1003` - bump all the related flyouts' `z-index` from `1003` to `1004` Thankfully when we had made a similar change over a year ago we had marked all the related flyouts with the following comment `// EUI TODO: This z-index override of EuiOverlayMask is a workaround, and ideally should be resolved with a cleaner UI/UX flow long-term` So it was easy to find them. This is not an ideal fix (obviously it was already not an ideal fix over a year ago) but this will quickly get us back to a better UX, as currently if the flyout opens behind the side nav, users can't resize them at all because the handle to resize is hidden... | Before | After | | ------------- | ------------- | | <img width="1597" height="1062" alt="Screenshot 2025-09-26 at 3 08 50 PM" src="https://github.com/user-attachments/assets/09502b54-9120-4c9b-88e6-b956a2a3d4dd" /> | <img width="1596" height="1061" alt="Screenshot 2025-09-26 at 3 02 36 PM" src="https://github.com/user-attachments/assets/02ad729a-697e-4eeb-a632-ff29705e00cf" /> | ## What to test - make sure that the security solution flyout is always on top of the side nav - make sure that Timeline is always on top of the security solution flyout - make sure that the timeline flyout is always on top of Timeline - make sure that the flyout on the ESQL tab in Timeline behaves correctly - make sure these work after a page refresh - make sure that things work both with overlay and push modes - make sure that all secondary flyouts - accessible via the Take action button in the flyout's footer - are displayed on top. - Add to new case - Isolate host - Respond - Add endpoint exception - Add rule exception - ... - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) - [x] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels.

…nents' z-index by 1 to be on top of side nav (elastic#236655) ## Summary This PR an issue that has been present for a few months: the side nav in Security Solution is rendered on top of the expandable flyout. This issue comes from [this change](https://github.com/elastic/eui/blob/main/packages/eui/src/components/header/header.styles.ts) introduced by [this PR](elastic/eui#8325) a few months ago in EUI. The changes suggested here are: - bump the document flyout's `z-index` from `1000` to `1001` - bump the Timeline modal's `z-index` from `1001` to `1002` - bump the timeline flyout's `z-index` from `1002` to `1003` - bump all the related flyouts' `z-index` from `1003` to `1004` Thankfully when we had made a similar change over a year ago we had marked all the related flyouts with the following comment `// EUI TODO: This z-index override of EuiOverlayMask is a workaround, and ideally should be resolved with a cleaner UI/UX flow long-term` So it was easy to find them. This is not an ideal fix (obviously it was already not an ideal fix over a year ago) but this will quickly get us back to a better UX, as currently if the flyout opens behind the side nav, users can't resize them at all because the handle to resize is hidden... | Before | After | | ------------- | ------------- | | <img width="1597" height="1062" alt="Screenshot 2025-09-26 at 3 08 50 PM" src="https://github.com/user-attachments/assets/09502b54-9120-4c9b-88e6-b956a2a3d4dd" /> | <img width="1596" height="1061" alt="Screenshot 2025-09-26 at 3 02 36 PM" src="https://github.com/user-attachments/assets/02ad729a-697e-4eeb-a632-ff29705e00cf" /> | ## What to test - make sure that the security solution flyout is always on top of the side nav - make sure that Timeline is always on top of the security solution flyout - make sure that the timeline flyout is always on top of Timeline - make sure that the flyout on the ESQL tab in Timeline behaves correctly - make sure these work after a page refresh - make sure that things work both with overlay and push modes - make sure that all secondary flyouts - accessible via the Take action button in the flyout's footer - are displayed on top. - Add to new case - Isolate host - Respond - Add endpoint exception - Add rule exception - ... - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) - [x] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels.

acstll added 3 commits February 14, 2025 10:45

Change header z-index from 1000 to 2000

d17cf70

Use levels.flyout (instead of .header) for EuiDataGrid cell popover

e93bd4d

…to match the intent in the inline comment

Update snapshots

bd33e72

acstll self-assigned this Feb 14, 2025

Add example to docs for testing purposes

139ee24

This should be either reverted or refactored/improved in order to keep it

acstll mentioned this pull request Feb 18, 2025

[Bug] Focusable Site Navigation in Flyouts After Recent Update #8206

Closed

acstll added 2 commits February 24, 2025 12:42

Revert changing levels.header value

fa41243

Increase fixed EuiHeader z-index by 1

8216ed0

acstll added 3 commits February 24, 2025 14:27

Changelog

f70c52d

Merge remote-tracking branch 'upstream/main' into header-z-index-8206

530902d

Add spec to test fixed Header is above Flyout

49c1ae5

acstll marked this pull request as ready for review February 25, 2025 06:39

acstll requested a review from a team as a code owner February 25, 2025 06:39

mgadewoll self-requested a review February 25, 2025 08:17

mgadewoll reviewed Feb 25, 2025

View reviewed changes

packages/eui/changelogs/upcoming/8325.md Show resolved Hide resolved

packages/eui/src-docs/src/views/header/header_elastic_pattern_project.tsx Outdated Show resolved Hide resolved

packages/eui/src/components/header/header.spec.tsx Show resolved Hide resolved

acstll requested review from ryankeairns and removed request for ryankeairns February 25, 2025 12:35

acstll added 5 commits February 26, 2025 11:11

Add focusable items to EuiCollapsibleNavBeta flyout story

cf1f070

Only one item in the changelog

192efcc

Include EuiCollapsibleNavBeta in flyout shards spec

cdebce0

Merge remote-tracking branch 'upstream/main' into header-z-index-8206

108ab90

acstll requested a review from mgadewoll February 26, 2025 12:19

mgadewoll reviewed Feb 26, 2025

View reviewed changes

packages/eui/src-docs/src/views/header/header_elastic_pattern_project.tsx Outdated Show resolved Hide resolved

packages/eui/src/components/flyout/flyout.spec.tsx Outdated Show resolved Hide resolved

Remove testing example from docs

3026d8a

It was meant for manual testing and debugging only

Include EuiCollapsibleNav in flyout shards spec

1c98683

acstll requested a review from mgadewoll February 26, 2025 18:13

Skip failing spec

bb61e92

Needs a bit of investigation why it's failing on React 16 and 17

acstll requested a review from ryankeairns February 27, 2025 06:33

mgadewoll reviewed Feb 27, 2025

View reviewed changes

packages/eui/src/components/flyout/flyout.spec.tsx Outdated Show resolved Hide resolved

acstll mentioned this pull request Feb 27, 2025

[EuiFlyout] Focus behaviour is different than expected with more than one Flyout open #8376

Open

Add links to comment in skipped test

59bdf51

mgadewoll approved these changes Feb 27, 2025

View reviewed changes

refactor(EuiHeader): update shadow to xs

0123868

ryankeairns approved these changes Feb 28, 2025

View reviewed changes

mgadewoll merged commit 01d7566 into elastic:main Feb 28, 2025
5 checks passed

This was referenced Mar 3, 2025

Upgrade EUI to v99.4.0 elastic/kibana#212974

Merged

[8.x] Upgrade EUI to v100.0.0 elastic/kibana#213495

Merged

PhilippeOberti mentioned this pull request Sep 26, 2025

[Security Solution] bump Timeline, document and timeline flyout components' z-index by 1 to be on top of side nav elastic/kibana#236655

Merged

2 tasks

Conversation

acstll commented Feb 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

QA

To test this locally

General checklist

Uh oh!

acstll commented Feb 24, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mgadewoll commented Feb 25, 2025

Uh oh!

acstll commented Feb 25, 2025

Uh oh!

acstll commented Feb 25, 2025

Uh oh!

acstll commented Feb 26, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mgadewoll left a comment

Choose a reason for hiding this comment

Uh oh!

ryankeairns commented Feb 27, 2025

Uh oh!

mgadewoll commented Feb 28, 2025

Uh oh!

kibanamachine commented Feb 28, 2025

Uh oh!

elasticmachine commented Feb 28, 2025

💚 Build Succeeded

History

Uh oh!

ryankeairns commented Feb 28, 2025

Uh oh!

mgadewoll commented Feb 28, 2025

Uh oh!

mgadewoll commented Feb 28, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Comments

acstll commented Feb 14, 2025 •

edited

Loading