For reference, see: pciE2j-1VQ-p2#comment-1745 (note, we've shifted some of the design slightly since then. Namely, we now just show the exact sort name instead of "Sort" or "Default").
To do that, I've built a re-usable component api: <Dropdown>, and its children. See the code comments for more details!
In short though, it's a reusable API for building dropdown style popovers. We will use these in a couple different use cases:
Our custom select controls, like this sort filter.
Dropdown menus, like the links to go to the reporting flow and pick the issue type.
Those behave similarly enough that they can share a lot of the bones!
The one thing that is missing from our control is the ability to open the closed control by typing. I tried for a long time to make this work, but I was reallllly fighting the floating-ui API, and it was compromising some of the other important focus behavior. So, for now, typing works once the popover is open, but doesn't open the popover. This is technically still compliant! We can try to enhance this in the future though.
Two weird things you might note:
For all comboboxes, Mac VO likes to say "start typing". There's sadly not much we can do about that! But it shouldn't be a problem, I think the control's behavior is very self-discoverable.
Mac VO keyboard navigation is different from the native keyboard navigation on the control! Namely, with Mac VO, you always use the left and right keys to navigate among options. But in this control, for compliance, apart from VO you will use the up and down arrows.
What Does This PR Add/Change?
In short, add's the sorting control!
For reference, see: pciE2j-1VQ-p2#comment-1745 (note, we've shifted some of the design slightly since then. Namely, we now just show the exact sort name instead of "Sort" or "Default").
To do that, I've built a re-usable component api:
<Dropdown>, and its children. See the code comments for more details! In short though, it's a reusable API for building dropdown style popovers. We will use these in a couple different use cases:selectcontrols, like this sort filter.Those behave similarly enough that they can share a lot of the bones!
Some a11y notes.
From an a11y perspective, this sort control is technically a "select-only combobox". To learn more about comboboxes, you can read up here: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/ This page has the example that is closest to our sort control: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
The one thing that is missing from our control is the ability to open the closed control by typing. I tried for a long time to make this work, but I was reallllly fighting the floating-ui API, and it was compromising some of the other important focus behavior. So, for now, typing works once the popover is open, but doesn't open the popover. This is technically still compliant! We can try to enhance this in the future though.
Two weird things you might note:
comboboxes, Mac VO likes to say "start typing". There's sadly not much we can do about that! But it shouldn't be a problem, I think the control's behavior is very self-discoverable.Testing Instructions
Issues
Related to #
Closes #62