canonical / canonical/react-components

`ContextualMenu` cannot be closed with ESCAPE key when inside a Modal

Open
#1,305 3 comments 0 reactions 0 assignees View on GitHub
Accessibility Bug 🐛
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.