Dropdown: Support different dropdown use cases with variants
Purpose
As a result of the audit in the parent epic, the dropdown component requires updates to satisfy UX and accessibility requirements.
Watch recordings of the audit (internal)
Background
A dropdown can actually mean many things, from a select element in a form to navigation or a menu of functions. As it's defined in Pajamas, it indeed is used for several different things:
- Opening a list of navigation items.
- Opening a menu of actions.
- Opening a listbox or combobox.
The current implementation of a dropdown in GitLab UI is specific to only one of these use cases, a menu. And the menu itself comes with many caveats and has implications for assistive technology (covered under definitions below). Additionally, I believe that the audit uncovered problems with the semantic structure of the current implementation. More details are in the audit recordings, but as a quick summary the unordered list semantics don't include a list item as the first child, and additionally role="menu"
requires some fairly strict semantics that I don't believe are 100% correct.
Definitions
Menu
A menu is a widget that offers a list of choices to the user, such as a set of actions or functions. A menu is usually opened, or made visible, by activating a menu button, choosing an item in a menu that opens a sub menu, or by invoking a command, such as Shift + F10 in Windows, that opens a context specific menu. When a user activates a choice in a menu, the menu usually closes unless the choice opened a submenu. (source)An item with role="menu"
places a screen reader in application mode, which then uses keyboarding different from regular web browsing and navigation. For this reason it isn't suitable for navigation where tabbing typically moves from one link to the next.
Disclosure widget
A disclosure is a button that controls visibility of a section of content. When the controlled content is hidden, it is often styled as a typical push button with a right-pointing arrow or triangle to hint that activating the button will display additional content. When the content is visible, the arrow or triangle typically points down. (source)Menu button
A menu button is a button that opens a menu. It is often styled as a typical push button with a downward pointing arrow or triangle to hint that activating the button will display a menu. (source)Combobox
A combobox is a widget made up of the combination of two distinct elements: 1) a single-line textbox, and 2) an associated pop-up element for helping users set the value of the textbox. The popup may be a listbox, grid, tree, or dialog. Many implementations also include a third optional element -- a graphical button adjacent to the textbox, indicating the availability of the popup. Activating the button displays the popup if suggestions are available. (https://www.w3.org/TR/wai-aria-practices/#combobox)Listbox
A listbox widget presents a list of options and allows a user to select one or more of them. A listbox that allows a single option to be chosen is a single-select listbox; one that allows multiple options to be selected is a multi-select listbox. (source)Proposal
As-is, a single format for a dropdown will not satisfy the different use cases. The dropdown component should configurable to support various use cases.
Resources
- Menus & Menu Buttons by Heydon Pickering
- Link + Disclosure Widget Navigation by Adrian Roselli
- A11y Nav Menus – an in-depth overview of three patterns for accessible navigation by Illai Zeevi
- Menu (or not) by Marcus Herrmann
Additional implementation examples and resources are mentioned in the discussion that follows.