design-system-react icon indicating copy to clipboard operation
design-system-react copied to clipboard

Menubar Dropdown keyboard navigation

Open pmartin35 opened this issue 3 years ago • 3 comments

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.

pmartin35 avatar Jun 21 '21 18:06 pmartin35

Thanks for opening your first issue! :wave: If you have found this library helpful, please star it. A maintainer will try to respond within 7 days. If you haven’t heard anything by then, please bump this thread.

welcome[bot] avatar Jun 21 '21 18:06 welcome[bot]

There's no pattern for a menubar present in https://www.lightningdesignsystem.com/ Global Navigation is the closest, but I believe it uses tabbing. That said, I could see a usage for a Menubar wrapping component that takes Dropdowns.

interactivellama avatar Jul 09 '21 19:07 interactivellama

This issue has been automatically marked as stale, because it has not had recent activity. It will be closed if no further activity occurs. Maintainers are responsible for tech debt and project health. This is most likely a new components or component feature request. Please submit a pull request for or request feedback on this feature. Thank you.

stale[bot] avatar Apr 18 '22 19:04 stale[bot]