feat(SelectPanel): active descendant focus

[dgreif]

Within the SelectPanel, focus will now be controlled using active-descendant instead of true focus movement. This allows the user to keep their cursor in the text input, while using up/down/enter keyboard navigation to select/deselect items.

I had to make a few tweaks within focusZone to optimize behavior when items are filtered. The original implementation didn't fully take changing DOM into account.

I also had to disable the focusZone that is naturally created by AnchoredOverlay within SelectPanel because it was causing odd behavior due to the overlap in focusZones. It currently doesn't handle focus well if you click on an item, because up/down arrows do nothing at that point, but hitting tab brings you right back to the text input. We may need to revisit this down the road, but overall the new setup feels really good.

Screenshots

Merge checklist

• Added/updated tests
• Added/updated documentation
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot]

🦋 Changeset detected

Latest commit: cf79941

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/components	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/primer/primer-components/4KcAfgmCNRa1pgDaDpiyyhsm4s8N
✅ Preview: https://primer-components-git-select-panel-active-descendant-primer.vercel.app

[VanAnderson]

👍