Add the repo filter

[dpasque]

What Does This PR Add/Change?

This PR adds the repo filter! 🎉 For style reference, see pciE2j-1VQ-p2#comment-1723

We're using the powerful Floating UI library to add the popover dialog, and will continue to use floating UI in the future throughout the site.

A couple of notes on Floating UI...

• If you're new to it, the floating UI API can feel a little odd. I've tried to make the popover code read as easy as possible and also match the Floating UI examples as close as possible, but it might help to check out their popover guide in the docs for reference.
• For now, I haven't abstracted the popover into a re-usable component. I will do that as soon as we have a second control that needs a similar popover. Finding the right level of abstraction here without more context is kind of tricky!

A fews notes on VoiceOver/a11y behavior that may seem odd at first:

• The dropdown button does in fact have an aria-description that changes based on the saved filter state, but apple VoiceOver likes to hide this under "More Content Available" or something like that. If you follow the command they give, you can then see the description, or you can look in the developer tools accessibility tab!
• Floating UI (thankfully, as it should) handles redirecting focus into the first focusable element in the popover. However, apple VoiceOver doesn't like to read everything it has navigated through to get there (boo). So, I recommend using the VO command keys to explore the popup after it opens and you can hear more of what that full structure reads like!
• The popover is not a modal, so we do not trap focus in the popover! You can tab out of the popover, and the popover will close.

Finally -- I'm holding off on some mobile viewport optimization until I have the sort control in there -- I want to tinker with them all together 👍

Testing Instructions

• [x] Unit tests pass

• [x] Axe devtools is clean

Feel free to explore whatever else you want!

Issues

Related to #
Closes #60

[dpasque]

@john-legg Thank you so much for the review! 😄 (And @karenroldan too of course! 😁 Just had a few follow-up questions for John!)

This is definitely not urgent, but would it be possible to update the hover and active styling of the checkboxes to be more like the other components/Figma file?

Ahh, you bring up a great point, but are you okay if we punt this to another PR in the future? This sadly isn't very easy to do... Unfortunately, native checkboxes/radios can't have background colors changed for pseudo-states -- the styling options are somewhat limited. There are some CSS hacks you can do to make custom checkboxes, but if we decide to go that route, we probably should have it be its own PR and then update that across the board!

In manual repo selection, there didn't seem to be an easy way to jump to the Filter button after making a selection. You have to go through the entire list to get to the buttons. The list isn't that long, but I just wanted to mention it!

This is one of those VO tricks that's really buried, but since these are wrapped in a list, you should be able to jump out of the list by doing VO command + down arrow! I think that's probably our best option for now if you're okay with it!

Should there be an aria description for when the dropdown is solid blue (i.e. a repo selection is being applied to results)?

This actually does currently happen! But because there's so much on this button lol, mac VO buries the description under a special command to see "more content available" -- but in short, we're doing as much as we can here from an a11y standards perspective!

Should there be an aria-description somewhere to indicate what filters are being applied (e.g. when VoiceOver is telling the user that it found results)? Just a random thought.

I love this idea so much! 💛 I got it added 👍

I also noticed that VO starts reading the repo list when focusing on the either segment of the segment control (Default or Manual). If this is just a weird quirk of VO + Floating UI, then no worries!

Oh wowowowow, how did you get it to do this?!?! 😮 I've been playing with this for so long and can't get this to happen 😆 Was it maybe in a weird state where it started reading all of the list content, and then you switched filters, and it finished reading all of the list items? I may have to watch you on a screen share if you have time!

[john-legg]

@dpasque thanks for making all of these changes so quickly! The styling updates look perfect by the way.

Unfortunately, native checkboxes/radios can't have background colors changed for pseudo-states ... if we decide to go that route, we probably should have it be its own PR and then update that across the board!

Ah, I totally understand! I had no idea it was like that 😮 I'm fine with it being a separate PR and even a lower priority overall. I guess no one will notice that it's not consistent except for us and it's not breaking anything, so it definitely doesn't need to be done right away.

you should be able to jump out of the list by doing VO command + down arrow! I think that's probably our best option for now if you're okay with it!

That's fine with me! I think this is exactly what you recommended to me for a similar question about the feature selection tree lol 😅 I just tried it and I think it's perfectly fine the way it is.

mac VO buries the description under a special command to see "more content available"

Haha whoops, you literally did say that in the PR description. Forgive me! Yup, that's perfect.

Oh wowowowow, how did you get it to do this?!?! 😮 I've been playing with this for so long and can't get this to happen 😆

Well now I can't get it to happen, which I feel like is a common theme (i.e. find obscure VO bug, get Dan to spend time replicating only to not find it 😆). I can only get it to say In text Repositories now. I guess you can ignore my comment, but if I see it again I'll try to take note of how I did it!