[EuiHeader] Increase z-index value

[acstll]

Summary

Resolves #8206

Note

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

Important

I'm marking this as Draft because it needs to be manually tested first and some discussion needs to happen

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.

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	After

---

(there's an alternative, much simpler, implementation where only the value of the "fixed" header is increased by 1, all tests still pass, but I think it changes a lot more relationships between components, so unexpected results may occur…)

---

QA

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

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)

[kibanamachine]

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]

💚 Build Succeeded

• Buildkite Build
• Commit: 139ee24

cc @acstll