Skip to content

Vue Shared - Dropdown Keyboard Navigation

Zack Cuddy requested to merge cuddyz-shared-dropdown-keyboard-helper into master

Outside Approvals

What does this MR do and why?

This MR is related to some conversations found on #337509 (closed)
This MR is implemented as part of !70222 (merged)

This component is intended to abstract and manage the keyboard interactions of a dropdown outside of the components it is used in. This will help keep the interactions consistent for Custom dropdowns implemented in GitLab.org.

The above mentioned MR !70222 (merged) implements this in a "Combobox" which is a type of dropdown not yet in GitLab UI.

How it works?

This component simply manages the "focused" index between a range (an array length) and emits when the user arrows up or down. This component also emits an event when the user "tabs" away.

The idea here is when a user moves up or down, we tell the parent component and then it can manage things like aria-activedescendant and any UI for the focus state. Per the w3 menu guidelines, arrow keys should be used to navigate a dropdown while the browser focus should say on the "dropdown trigger". If the user hits tab it takes them to the next same level element rather than into the dropdown menu.

Why not put this in GitLab UI?

This is definitely a long term goal of this sort of component. The main reason as of right now is that the interactions of GlDropdown are not aligned with w3 menu guidelines.

Most significantly GlDropdown allows for the tab key to navigate the dropdown. This would need to be changed before this component could be used. There could be downstream breakage if we remove the tab key functionality which is why this component will for now be managed in GitLab.org for custom dropdowns.

Screenshots or screen recordings

GIF of applied usage on !70222 (merged)

How to set up and validate locally

The component does not render anything, so testing it usage directly will be a bit of a challenge. However, this component is used in the Combobox implemented here: !70222 (merged)

To test please follow the setup and testing instructions here: !70222 (merged)

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

cc/ @pslaughter

Edited by Zack Cuddy

Merge request reports