Skip to content

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

@yansavitski

Description

@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
Image

Metadata

Metadata

Assignees

Type

No fields configured for Bug.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions