Update Sorting component to use form select
Background
When porting the Sorting component from Sketch to Figma (Figma file), me and @tauriedavis discussed using a form select
instead of a button dropdown.
Previous discussion in Figma
Pedro: Taurie Davis we tend to think of this as a split dropdown button, but I think this is actually an input group (form select + icon button). A form select is used to make a selection or replace the current selection (the case here). A dropdown button is used for commands (navigation/actions). A good way to differentiate them: if the dropdown selection is the visible label, then it's a form select; if not, it's a dropdown button. This is my thinking, let me know if you disagree.
Taurie: Pedro That's an interesting thought I had not thought of myself. I think we should follow how it will be techincally built. https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-sorting--default is using a button for the dropdown select portion. I think it could make sense because when selecting the option, it is performing an action.
Pedro: I see, thanks for sharing the link to the Vue component. It does perform an “action” but that's implied by making a selection. Another similar example is the Template field in the issue creation form. You select the template and the description contents are replaced. The key here seems to be the requirement to have a describing element (or aria-label attribute). If the selection is shown when menu is closed, it requires a label to describe the field/control. And thus, semantically I believe it is a form select and not a button dropdown. The Sorting Vue component does not have a element (even if visually hidden) nor the aria-label attribute. If it was treated as a form select, it would likely have one.
Proposal
Update the Sorting Vue component to use a form <select>
instead of a button dropdown.