SelectPanel2: Improve keyboard navigation from search input

[siddharthkp]

When the focus is on search input,

1. Pressing ArrowDown should focus the first element in the list
2. Pressing Tab should should focus the last focused element in the list

When the focus is in the list,

1. Pressing Up should not come out of the list
2. Pressing Shift + Tab should move focus to the list

selectpanel-input-keydown.mov

[changeset-bot]

🦋 Changeset detected

Latest commit: bcc4bcf

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

This PR includes changesets to release 1 package

Name	Type
@primer/react	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

[github-actions]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	113.37 KB (0%)
packages/react/dist/browser.umd.js	114.02 KB (0%)

[joshblack]

Just wanted to ask a broader clarification question before reviewing, what kind of role/semantics are we looking for between the input and the listbox? At first glance, this seems like a case where role="combobox" may be appropriate but wanted to check-in to see since the intent here is to shift the focus to the list box.

[siddharthkp]

At first glance, this seems like a case where role="combobox" may be appropriate but wanted to check-in to see since the intent here is to shift the focus to the list box.

Interesting! I can see how that might work. Until now, we've looked at it as a listbox with dynamic content 🤔

cc @ichelsea for clarification though!

[ichelsea]

I'm like 90% sure role=combobox can't be used here back when I was working with James, that definitely came up. I can't recall the reason off of the top of my head but I can deep dive into past issues if we need one! (If I recall it partially has to do with multi-select support?)

ARIA in HTML: combobox role. Most comboboxes are associated with a listbox that popups up and is not appearing by default. Also in our case, the list can be accessed independently of the search input where in combobox, the two are inherently connected. The selection of a combobox is typically displayed in the text input as well, which we aren't doing. Multi-select behavior, if it's even supported, isn't expected from assistive technology.

[siddharthkp]

@ichelsea Thank you! That's very helpful

@joshblack Back for your review!

[broccolinisoup]

I was testing it on different stories and the focus doesn't move to the list on arrow down when there are sections in the list. Is that intentional or do we want the same focus model when there are sections as well?

select-panel-arrow-down.mp4

A selectpanel pop up is open and displays two sections with headings and options in each. Pressing the arrow down when the focus is on the search input doesn't do anything.

[siddharthkp]

I was testing it on different stories and the focus doesn't move to the list on arrow down when there are sections in the list. Is that intentional or do we want the same focus model when there are sections as well?

That's not intentional at all! You've found a bug with groups :D

Amazing catch, fixed now!

[broccolinisoup]

It does work now with different variants of the selectbox - thanks for fixing!

Left one comment about adding tests but looks good!

[broccolinisoup]

The selector looks a bit too fragile, makes me a bit nervous 😬 but the query makes a lot of sense. Can we add tests/stories to make sure we always get the intended first element? (It is not a blocker, feel free to merge the PR)

[siddharthkp]

Will take it up in a new PR!