[EuiGlobalToastList] Add toast list to flyout focus trap via focusTrapPubSub
- 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
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