[Autocomplete][v1] ComboBox uses tabindex=0 which causes tabbing issues with AutoComplete

[adamcarchibald]

Issue summary

ComboBox in AutoComplete has tabindex=0 which causes the wrapping ComboBox to be highlighted when tabbing into the AutoComplete component.

https://github.com/Shopify/polaris-react/blob/master/src/components/Autocomplete/components/ComboBox/ComboBox.tsx#L266

Behavior

Tabbing into AutoComplete should allow text input without having to press tab a second time.

Video with tabindex
Video without tabindex, expected behaviour

Reduced test case

CodeSandbox with an AutoComplete you can tab into

👋 Thanks for opening your first issue. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines. You can also join #polaris on the Shopify Partners Slack.

[ry5n]

@dpersing Any chance you could take a look?

[dpersing]

@ry5n It looks like I mentioned the tabindex in the original PR review in the old repo (https://github.com/Shopify/polaris-react-deprecated/pull/1902#pullrequestreview-145488628), but that item didn't make it into the summary accessibility issue that I moved over to this repo (#789).

Agreed that the extra tabindex="0" is unnecessary and probably confusing. Additional work is needed, but removing that in the short term would be totally cool. 👍

[ry5n]

@adamcarchibald If you’re interested it sounds like a straightforward fix, feel free to open a PR. Otherwise we’ll get to it as soon as possible.

[adamcarchibald]

@ry5n sounds good i'll submit one

[yourpalsonja]

I've checked with @adamcarchibald to see if this can be closed, since it looks like a PR has been merged, just not sure it's the right one!