Allow orientation flipping of arrow key bindings for horizontally-oriented DropdownMenu navigation

[terrymun]

Feature request

Overview

The keyboard interactions for the Dropdown Menu assumes that a dropdown menu is always rendered as a vertical list: in that sense, it does make sense that ArrowUp and ArrowDown keys are used to navigate between items.

However, what if a dropdown menu is rendered as a horizontal list? Would it be possible to "flip" the keyboard arrow key mapping so that ArrowLeft and ArrowRight will perform navigation from one item to another, while ArrowUp and ArrowDown are used to open submenus?

Who does this impact? Who is this for?

I encountered this need when using the Dropdown Menu to somehow mimic the UI/UX of Facebook reactions, where reactions are presented in a horizontal list. It feels unintuitive that up/down arrows are used to navigate between items for this use case.

Our current proof-of-concept implementation:

The Facebook reaction popover/dropdown menu for reference:

However, perhaps I am using Dropdown Menu for a pattern that it is not designed for?

[benoitgrelard]

Hey @terrymun this is a great point! We've always considered DropdownMenu to be vertical. Whilst I think this is most definitely the default in 99% of cases, I think your case above makes sense too and we should add that capability similar to other components we have.

[gitryder]

@benoitgrelard I'd like to work on this

[sanbornhilland]

I came here because I ran into the same issue with the same use-case as @terrymun. It's actually unclear to me if it is better to model the reactions menu as a Dropdown or a Select but regardless, the Dropdown and Select components I think could use the same orientation option as the Toolbar.

I think it's worth noting, the Select component docs say that the component adheres to the WAI-ARIA ListBox design pattern. In the keyboard interactions notes on that page it says:

5. If the options in a listbox are arranged horizontally:
   1. Down Arrow performs as Right Arrow is described above, and vice versa.
   2. Up Arrow performs as Left Arrow is described above, and vice versa.

This wording is really confusing (and I think backwards). I think the intention is that a horizontal Select should use Left Arrow and Right Arrow to navigate between options.

[sanbornhilland]

I know there's been some interest in adding this feature but so far there's been no movement on it so I decided to take a stab at it in #2394. If anyone has time for input I'd be glad to collaborate so we can hopefully get this issue addressed.

[marcbouchenoire]

We also bumped into this with the same use-case. (Thanks for making a PR @sanbornhilland! From an outsider's perspective, I don't see anything wrong with the direction you're taking and this initial implementation.)

[ericchernuka]

Just wondering if there's any way to keep this progressing? The change seems relatively minimal for the goal.