adobe / adobe/spectrum-web-components
[Bug]: custom content as a submenu is not keyboard accessible
- 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-menu-item
### Description of the requested feature
When a div is in a `submenu` slot, it is not accessible via keyboard. Only a `sp-menu` with `slot="submenu"` is keyboard accessible.
For example, in the menu below, a user will be able keyboard navigate to `Sizes > Small / Medium / Large`. However a user could not keyboard navigate to `Size > Custom > Input` bc the input is custom content.
```
Sizes
Small
Medium
Large
Custom
```
### Mockups or screenshots
_No response_
### Implementation notes or ideas
Users should also be able to tab through all focusable elements inside a submenu's custom content (e.g. height and width inputs) _and_ tab back to the menu for seamless accessibility.
### Would you like to track this issue in Jira?
- [x] Yes, please tell me the ticket number!
Contributor guide
Research direction
Start by inspecting the sp-menu and sp-menu-item components' keyboard handling, then reproduce the nested custom-content example from the issue. Verify the behavior for a div in a submenu slot, including focusable inputs, and consider the work complete when users can navigate into the custom content and tab back to the menu.
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
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100