Problem Statement

The EuiFlyout traps focus. We can include certain elements in that focus trap using: includeFixedHeadersInFocusTrap (docs) or includeSelectorInFocusTrap. That being said, the focus trap shard elements are queried on EuiFlyout render. Any elements that render afterwards, e.g. popovers, tooltips, are not part of the focus trap even when using these props.

Proposed Solution

The proposed solution is to listen to DOM updates and re-query the focus trap shard elements so that includeSelectorInFocusTrap works for elements that are rendered after flyout is.

See the proposal below in the comment: #9099 (comment) 👇🏻

The gist is updating focusTrapShards on key down (key event outside of the flyout). This will minimize the risk of impacting the performance and causing regression in flyout focus trap.

Use Case

• Side nav v2 in Kibana

Value / Impact

High impact, high severity. The mouse works as expected but the keyboard navigation is completely broken in side nav v2. Keyboard users cannot enter the popover and select any menu items inside. It's especially critical for the collapsed mode.

Because navigation is a heavily-used component, this is a big accessibility violation.

Could potentially affect the performance on the consumer side. Needs to be benchmarked in Kibana.

Urgency

It is not a blocker but it's definitely something to fix ASAP.

Do alternatives or workarounds exist?

There's no workaround.

Related code or customizations

https://github.com/weronikaolejniczak/kibana/blob/47fa903626a84e1f54c87b0ba8a431e456815579/src/core/packages/chrome/navigation/src/components/popover/index.tsx#L194-L196

Additional context (Optional)