Add custom select

[tinykite]

What this does

• Adds back previous dispatch code so that legacy app updates to folder tree data can now also update store
• Determines if a user is org-affiliated and/or sponsored
• Fetches folder info for user based on user affiliations (both org and sponsored folders)
• Adds a FolderSelect component. The component uses the term select rather than dropdown for a few reasons.
  • Commonly, custom components that include listbox or combobox ARIA roles in design systems such as Adobe Spectrum are referred to as simply a custom select. Because they typically attempt to re-implement the behavior of a native select, I think this general name makes the most sense.
  • A custom select is also the name that the lead accessibility engineer Gerard Cohen felt was most appropriate for his talk, "Accessible Custom Selects" which the implementation of this custom select borrows some advice from.
• Removes old HelloWorld components
• Determines current state of the trigger for the folder select
• Adds incremental accessibility improvements that include custom select interactions as well as additional accessibility roles and aria attributes
  • These improvements are incremental, with the intention that we will revisit them when we have the capacity for a redesign.
  • I added a hook from the VueUse library (onClickOutside) to handle clicks outside of the custom select as part of this work. In the future, I think VueUse could be super helpful for many other things as well — so it felt like a reasonable addition.
• Dispatches to the legacy application when a selection changes
• Includes selected folder id with link creation API requests

Note on custom events

• Perma currently makes use of Jquery-specific custom events, which appear to differ from native custom events. For example, I noticed I wasn't able to listen to them using vanilla JS event listeners, and importing legacy functions that trigger Jquery events will successfully import and call the function itself but not trigger Jquery event it wraps. A super easy workaround for this appears to be to create native custom events and dispatch them to or from legacy portions of the application instead.

Interaction notes

• Hitting spacebar or return on the select trigger/button will toggle the select
• Arrow keys can be used to navigate the select options. The options do not cycle — if you reach the end of the list, hitting the down arrow will not navigate to the beginning of the list. The same is true for hitting up on the first option. (These behaviors match native select behavior)
• Home and end keyboard buttons will navigate to the first and last options, respectively
• Hitting space or return on an option will select it, and then return focus back to the trigger for the select
• Hitting escape, or clicking outside of the select, will hide the options and also return focus back to the trigger

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 70.11%. Comparing base (d32d3bd) to head (183aff7). Report is 29 commits behind head on develop.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## develop #3507 +/- ## =========================================== - Coverage 70.27% 70.11% -0.16% =========================================== Files 48 48 Lines 6627 6642 +15 =========================================== Hits 4657 4657 - Misses 1970 1985 +15 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[tinykite]

Thank you for the feedback @rebeccacremona! I believe all outstanding questions have been answered — can you take another look?