adobe / adobe/spectrum-web-components

[Bug]: custom content as a submenu is not keyboard accessible

Open
#5,657 1 comment 0 reactions 0 assignees View on GitHub
a11y bug Component:Menu Feature SEV 2 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-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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.