adobe / adobe/spectrum-web-components

[Bug]: sp-menu used within an overlay-trigger breaks a11y and does not close via keyboard escape

Open
#6,539 4 comments 0 reactions 0 assignees View on GitHub
bug needs-jira-ticket triage
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.