salesforce / salesforce/design-system-react

Menubar Dropdown keyboard navigation

Open
#2,901 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

menu-dropdown stale
Dominant language
JavaScript
Stars
982
Forks
440
Avg merge
1d 21h
Merged PRs (30d)
4

Description

Apologies if this is written down in the docs, I did not manage to find it!

Currently, if I add something like the code below, the individual dropdowns are unaware of each other through keyboard navigation. If I am focused on an item within the first Dropdown menu and I hit the left/right arrow key, focus should be moved to the second dropdown. Does SLDS provide a wrapper component that handles this sort of keyboard navigation?

<nav>
    <SLDSDropdown><Trigger /></SLDSDropdown>
    <SLDSDropdown><Trigger /></SLDSDropdown>
</nav>

Here is an example of what I am looking for. Using a keyboard, I can focus on the "About" menu. Using the down arrow opens the menu and focuses the "Overview" item. If I then hit the right arrow key, the next dropdown in the menubar is focused.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the SLDSDropdown component and the linked WAI-ARIA menubar example to compare the requested keyboard behavior. Done means adjacent dropdowns can transfer focus with the left and right arrow keys, while opening a menu and moving to its items follows the described interaction.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
accessibility, frontend
Issue type
Feature
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.