[Bug] Focusable Site Navigation in Flyouts After Recent Update

[yansavitski]

Describe the bug

After the recent Kibana and Serverless updates, site navigation became part of the

element. This has caused a change in focus behavior for flyouts. Previously, focus was restricted to the flyout and , with the option to exclude using the IncludeFixedHeadersInFocusTrap setting. However, since site navigation is now inside , EuiCollapsibleNavBeta is automatically include it in the focusable area, allowing users to navigate to it even when interacting with a flyout.

Impact and severity
This impacts all flyouts in Kibana and related applications, as it allows users to focus on navigation elements (site navigation) unintentionally when they are supposed to remain restricted to the flyout.

• Severity: Medium to high. While there is no immediate functional issue, this breaks expected focus behavior and might lead to accessibility problems.

Environment and versions

• Kibana version: > 8.17
• Serverless

To Reproduce
Steps to reproduce the behavior:

1. Open any flyout in Kibana where site navigation is present.
2. Use the Tab key to navigate.
3. Notice that focus moves to the site navigation inside the , even when interacting with the flyout.

Expected behavior
Focus should remain restricted to the flyout, and navigation elements inside

should not be included in the focusable area.

Minimum reproducible sandbox
It is extremely helpful for us if you are able to reproduce your issue in a minimum reproducible sandbox (visit our docs site and click the CodeSandbox logo in the top-right corner).

Screenshots

[cee-chen]

I see two obvious ways of approaching this, although there may another more elegant fix I haven't thought of:

1. (Static) Portal the collapsible nav flyout to after the <EuiHeader> it's located in in the DOM.
   • ⚠ This will require some extra focus/tab UX to ensure that keyboard users can jump between the menu toggle button and the first menu item without having to tab through the entire EuiHeader content.
2. Dynamically inert (or portal) the collapsible nav flyout whenever any other flyout with ownFocus/an overlay mask is rendered on the page
   • I would lean towards inert over portalling, as that feels more performant
   • Feels somewhat tricky/fragile to detect the presence of another mask/flyout however. Not totally sure what we'd use for that. A react context? Or a mutation observer?

---

For reference, here's the code in question that causes flyouts to include EuiHeaders and their contents in the focus order:

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

Lines 296 to 301 in 5c40315

	useEffect(() => {
	if (includeFixedHeadersInFocusTrap) {
	const fixedHeaderEls = document.querySelectorAll<HTMLDivElement>(
	'.euiHeader[data-fixed-header]'
	);
	setFixedHeaders(Array.from(fixedHeaderEls));

The crux here is that we need to keep the visible / non-overlayed header content as a shard while excluding the overlayed EuiCollapsibleNavBeta.