elastic / elastic/eui

[EuiGlobalToastList] Add toast list to flyout focus trap via focusTrapPubSub

Open
#9,854 0 comments 0 reactions 0 assignees View on GitHub
accessibility
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 11h
Merged PRs (30d)
65

Description

**Requestor**

@animehart

**Problem Statement**

`EuiGlobalToastList` is not part of the flyout focus trap. This means keyboard users cannot reach toasts - or any buttons inside them - while a flyout is open.

Kibana app code currently calls `focusTrapPubSub` directly to work around this. That's a sign this should be handled in EUI, not per use case.

**Proposed Solution**

Add `EuiGlobalToastList` to the flyout focus trap via `focusTrapPubSub` natively. Consumers should not need to wire this up themselves.

Optionally, export a utility to simplify the `focusTrapPubSub` + double-rAF pattern for edge cases that still need manual control.

Out of scope for now: a skip link or shortcut to jump focus directly to the toast list (the list sits at the end of the tab order, so reaching it can require a lot of tabbing).

**Use Case**

Kibana Security - after creating a detection rule from within a flyout, a "View rule" toast appears. Keyboard users could not reach the button inside it because the flyout focus trap blocked navigation.

Reference: [kibana#280561](https://github.com/elastic/kibana/pull/280561), [kibana#208125](https://github.com/elastic/kibana/issues/208125)

**Value / Impact**

- Fixes keyboard access to toasts for anyone using `EuiGlobalToastList` with `EuiFlyout`
- Removes a pattern consumers currently have to re-implement themselves
- Any product that shows toasts from a flyout is affected

**Urgency**

Not blocking. A workaround exists: call `focusTrapPubSub.publish()` with `data-eui-includes-in-flyout-focus-trap`, as done in [kibana#280561](https://github.com/elastic/kibana/pull/280561).

**Do alternatives or workarounds exist?**

Yes - see above.

**Related code or customizations**

- [kibana#280561](https://github.com/elastic/kibana/pull/280561) - workaround using `focusTrapPubSub` in app code
- [kibana#208125](https://github.com/elastic/kibana/issues/208125) - related a11y issue report

Contributor guide

Open the contributing guide

Research direction

Start by tracing EuiGlobalToastList, EuiFlyout, and focusTrapPubSub to understand how the flyout focus trap identifies included elements. Reproduce the keyboard-navigation case described in the issue, then verify that toast content and its buttons are reachable while a flyout is open without consumer-side wiring.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.