canonical / canonical/react-components
`ContextualMenu` cannot be closed with ESCAPE key when inside a Modal
- Dominant language
- TypeScript
- Stars
- 151
- Forks
- 74
- Avg merge
- 1d 2h
- Merged PRs (30d)
- 11
Description
The ContextualMenu, when rendered inside a modal (see [story](https://canonical.github.io/react-components/?path=/story/components-contextualmenu--inside-modal)) cannot be closed with the Escape key. In other ContextualMenu stories, pressing Escape closes the menu; however this is not the case inside Modals.
### To reproduce
1. Open a page with a contextual menu rendered inside of a modal.
2. Open the contextual menu.
3. Press Escape.
4. Notice that the contextual menu does not close.
### Expected behavior
Pressing the escape button when inside a focus trapped element (whether it be a modal, context menu, etc) causes the focus-trapped element to be dismissed (and ideally, for focus to be returned to the element that was triggered to open the focus trap per [WCAG](https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html)).
The above likely implies we would need some sort of global focus stack so that we can dismiss the right element and return focus to the correct element whenever focus-trap elements are closed (otherwise components that register Escape-to-close keylisteners will enter a race condition). I'm not sure if we have such a solution in place at the moment.
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.