adobe / adobe/spectrum-web-components
[Bug]: sp-menu used within an overlay-trigger breaks a11y and does not close via keyboard escape
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 262
- Avg merge
- 3d 10h
- Merged PRs (30d)
- 68
Description
### Code of conduct
- [x] I agree to follow this project's code of conduct.
### Impacted component(s)
sp-menu, sp-popover, overlay-trigger
### Library version
1.9.0
### Expected behavior
Desired behavior would be to have overlay-trigger (or sp-popover?) handle the escape character similar to how sp-picker does when a menu is rendered inside to properly dismiss
### Actual behavior
When using the keyboard items the menu does not close when pressing the escape character. Example of the issue can be found here https://stackblitz.com/edit/vitejs-vite-bx2bvqr8?file=src%2Fmy-element.ts
Apparent root cause and workaround used
Escape was swallowed with no fallback. SWC's OverlayStack defers Escape-to-close to the browser's native popover light-dismiss on supporting browsers (guarded by showPopover support). But a focused sp-menu-item calls preventDefault() on Escape (to support submenu back-out — MenuItem.handleKeydown), which cancels that native dismiss. sp-action-menu/sp-picker don't hit this because Picker has its own explicit Escape handler; a bare overlay-trigger + sp-menu has none, so nothing closes the menu.
### Screenshots
Reproduction here https://stackblitz.com/edit/vitejs-vite-bx2bvqr8?file=src%2Fmy-element.ts
### What browsers are you seeing the problem in?
Chrome
### How can we reproduce this issue?
https://stackblitz.com/edit/vitejs-vite-bx2bvqr8?file=src%2Fmy-element.ts
### Sample code or abstract reproduction which illustrates the problem
Example code here: https://stackblitz.com/edit/vitejs-vite-bx2bvqr8?file=src%2Fmy-element.ts
### Severity
SEV 3
### Logs taken while reproducing problem
_No response_
### Would you like to track this issue in Jira?
- [ ] Yes, please tell me the ticket number!
Contributor guide
Research direction
Start with SWC's OverlayStack and MenuItem.handleKeydown, then reproduce the issue using the linked StackBlitz example in Chrome. Trace how Escape is handled when sp-menu is inside overlay-trigger or sp-popover, and verify that pressing Escape dismisses the menu without breaking submenu keyboard navigation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 58/100