SelectPanel: add role=combobox to filter input

[siddharthkp]

• Fixeshttps://github.com/github/primer/issues/3408
• Only available behind feature flag (primer_react_select_panel_with_modern_action_list)

Rollout strategy

• Patch release (behind feature flag)
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

Testing & Reviewing

tl;dr: The only diff is on Voiceover on MacOS for the screen reader announcement when the panel is opened. (no difference on other browsers or on Windows + NVDA)

// without combobox:
Select labels. Filter items, web dialogue, with 6 items. Filter items. Items will be filtered as you type, edit text
// without combobox:
Select labels. Filter items, web dialogue, with 6 items. Filter items. + Items will be filtered as you type, list box pop-up. Menu pop-up combo box

Full details:

Voiceover on MacOS (diff on Safari)

Without combobox	With combobox
Voiceover on Safari	Voiceover on Safari
Select labels. Filter items, web dialogue, with 6 items. Filter items. Items will be filtered as you type, 🟥 edit text	Select labels. Filter items, web dialogue, with 6 items. Filter items. Items will be filtered as you type, 🟩 list box pop-up. Menu pop-up combo box
see+listen video voiceover-safari-without-combobox.mov	see+listen video voiceover-safari-with-combobox.mov
Voiceover on Chrome	Voiceover on Chrome (no difference)
dialogue, with 6 items enhancement selected, selected, (1 of 7)	dialogue, with 6 items enhancement selected, selected, (1 of 7)
see+listen video voiceover-chrome-without-combobox.mov	see+listen video voiceover-chrome-with-combobox.mov
Voiceover on Firefox	Voiceover on Firefox (no difference)
enhancement, enhancement, selected, (1 of 7)	enhancement, enhancement, selected, (1 of 7)
see+hear video voiceover-firefox-without-combobox.mov	see+hear video voiceover-firefox-with-combobox.mov

NVDA on Windows (no difference)

Without combobox	With combobox
NVDA on Edge	NVDA on Edge
Select labels dialog. Use labels to organize issues and pull requests. Select labels list enhancement 1 of 7	Select labels dialog. Use labels to organize issues and pull requests. Select labels list enhancement 1 of 7
see+hear video nvda-edge-without-combobox.mov	see+hear video nvda-edge-with-combobox.mov
NVDA on Chrome	NVDA on Chrome
Select labels dialog. Use labels to organize issues and pull requests. Select labels list enhancement 1 of 7	Select labels dialog. Use labels to organize issues and pull requests. Select labels list enhancement 1 of 7
see+hear video nvda-chrome-without-combobox.mov	see+hear video nvda-chrome-with-combobox.mov

[changeset-bot]

🦋 Changeset detected

Latest commit: 09631b7

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	97.58 KB (+0.13% 🔺)
packages/react/dist/browser.umd.js	97.7 KB (-0.02% 🔽)

[camertron]

Nice, thanks for the very thorough write-up and videos! 🎉

Do we want to do the same thing for FilteredActionListWithDeprecatedActionList?

[siddharthkp]

Do we want to do the same thing for FilteredActionListWithDeprecatedActionList?

I think it's better to keep all changes behind the same feature flag so that we test it for ourselves before shipping it to users