Dropdown arrow key interaction

[jgiardino]

For Dropdown keyboard interaction to be consistent with the ARIA Authoring Practices Guide and with more complex but similar components like type-ahead select, we should implement arrow key interaction.

Interaction should be based on the documentation provided by ARIA Authoring Practices Guide for the Menu Button, which also references documentation provided for Menus that describes how to navigate within a menu once it's visible.

See this comment below with specific details on what these updates are.

Note that the Dropdown currently has two variations, one that displays a menu and one that could display any contents. The arrow key interaction would be implemented for the menu variation only. The other variation would be handled more like a modal or popover in terms of how keyboard interaction is implemented (see issues #839 for trapping focus in the dropdown panel, and #561 for trapping focus in the modal).

Also note that at this point in time, we will not implement the keyboard interaction labeled as optional for Menu Buttons. See the comments below for more details. Refer to comment below for latest updates on this.

[jgiardino]

@mcarrano In the documentation referenced above for Menu Button, they state that using an Arrow key to open the menu is optional. Do you have any suggestions on this? I would assume that if we allow the Down arrow key to open the menu for a Dropdown, that it would also open the panel for a Dropdown Panel, since these things look identical when collapsed. But do you think this would be a weird interaction for the Dropdown Panel?

We could also skip that part for now, since it's labeled as "optional" and revisit it later if we change our mind.

[mcarrano]

I agree that we can use the down-arrow key to open the menu or panel as you suggest @jgiardino The down arrow has a good semantic mapping to the action of opening more content below, I think.

[jgiardino]

After further discussion with @mcarrano, we are not going to implement the following optional keyboard interaction defined by the ARIA APG for Menu Buttons:

• (Optional) Down Arrow: opens the menu and moves focus to the first menu item.
• (Optional) Up Arrow: opens the menu and moves focus to the last menu item.

Given our phased approach to implementing keyboard interaction, including this at this point in time could result in less-than-optimal experiences for screen readers where Up/Down arrow keys are commonly used for navigating the interface.

[jgiardino]

I chatted with @kmcfaul about all the things related to the wai-aria example, and wanted to itemize them here so that it's easier to know what this issue covers and what to review against.

• Add aria attributes documented by wai-aria (specifically, this example has an html structure that's closer to what we're using). These attributes are related to keyboard interaction because they can affect whether keyboard interaction works in screen readers as expected.
  • aria-haspopup="true"
  • role="menu" on the <ul>
  • role="none" on the <li> (Note, testing with screen readers might reveal that role="presentation" works better, but for now we can follow what's used in the wai-aria example)
  • role="menuitem" on the <a> or <button>
  • tabindex="-1" on the <a> or <button>
• Implement keyboard interaction as documented by way-aria. Some of their key presses are noted as optional, and some key presses are probably not critical. I pasted the specific key presses that are critical in the table below, along with additional information about expected behavior for click vs key press events. Additionally:
  • remove focus-trap if not needed - If we manage focus as documented by wai-aria, this might not be necessary.
  • Open question: Does Enter key close the menu when a menu item is focused? This might require another issue, and feedback from product devs on their expectations
• handling key presses when focus is on toggle

The behaviors documented below are very similar to how the react-aria-menubutton. When the user uses a mouse to interact with the menu, it behaves as expected, with focus remaining on the toggle. When the user uses a keyboard, it behaves as documented by wai-aria with focus shifting to the menu.

Dropdown Toggle (i.e. the "Menu Button" in the wai-aria documentation)
AND the menu is hidden

Key	Function
Mouse click, Touch	Opens menu and focus stays on toggle
Space, Enter	Opens menu and moves focus to first menuitem
Down Arrow (optional)	Opens menu and moves focus to first menuitem
Up Arrow (optional)	Opens menu and moves focus to last menuitem

Dropdown Toggle (i.e. the "Menu Button" in the wai-aria documentation)
AND the menu is visible—i.e. the user clicked the toggle, which opened the menu, but the toggle still has focus.

Key	Function
Mouse click, Touch	Closes menu and focus stays on toggle
Space, Enter	Closes menu and focus stays on toggle
Escape	Closes the menu and focus stays on toggle
Down Arrow, Up Arrow	? - This could be something decide after implementing the other behaviors, to see what happens if we do nothing, and if that behavior is a usability issue that needs to be addressed as part of this issue or a separate one. This might be a case where we would want to implement the optional behavior noted above, if that works best for most users and is the easiest solution.

Dropdown Menu

Key	Function
Enter, Mouse click, Touch	Activates the menu item. The wai-aria documentation also states that it Closes the menu and Sets focus on the menu button, but this is an open question that's noted above
Escape	Closes the menu. Sets focus to the menu button.
Up Arrow	Moves focus to the previous menu item. If focus is on the first menu item, moves focus to the last menu item.
Down Arrow	Moves focus to the next menu item. If focus is on the last menu item, moves focus to the first menu item.

[jgiardino]

Closing since this was fixed* in #1075

*Use cases pulled from WAI-ARIA documentation are addressed, but the following were additional edge case interaction behaviors I had added. These are not addressed in browsers like Safari and FF on mac due to the default behavior of clicking a button not placing focus on that button. If these cases are important, we can revisit this later.

Dropdown Toggle (i.e. the "Menu Button" in the wai-aria documentation)
AND the menu is visible—i.e. the user clicked the toggle, which opened the menu, but the toggle still has focus.