[ComboBox] set tabIndex depending of number of options

[sylvhama]

WHY are these changes introduced?

Fixes #1089

Allows user to directly focus the textfield when there aren't options while navigating with a keyboard.

WHAT is this pull request doing?

It makes the tabindex dynamic based on the number of options.

Copy-paste this code in playground/Playground.tsx:

import React, {useState} from 'react';

import {Page, Card, Autocomplete, TextField, FormLayout, Button} from '../src';

export function Playground() {
  const [options, setOptions] = useState<{value: string; label: string}[]>([]);

  const addOptions = () => {
    setOptions([
      {value: 'montreal', label: 'Montreal'},
      {value: 'tokyo', label: 'Tokyo'},
      {value: 'seoul', label: 'Seoul'},
    ]);
  };

  return (
    <Page title="Playground">
      <Card sectioned>
        <FormLayout>
          <TextField label="Name" />
          <Autocomplete
            options={options}
            selected={[]}
            onSelect={() => null}
            listTitle="Suggested Cities"
            textField={<Autocomplete.TextField label="City" />}
            willLoadMoreResults
          />
          <TextField label="Phone" />
          {options.length === 0 && (
            <Button onClick={addOptions}>Add options</Button>
          )}
        </FormLayout>
      </Card>
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

[ghost]

👋 Thanks for opening your first pull request. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines.

[github-actions]

🟢 This pull request modifies 3 files and might impact 1 other files.

Details:

All files potentially affected (total: 1)

• /src/components/Autocomplete/Autocomplete.tsx

📄 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

🧩 src/components/Autocomplete/components/ComboBox/ComboBox.tsx (total: 1)

Files potentially affected (total: 1)

• /src/components/Autocomplete/Autocomplete.tsx

🧩 src/components/Autocomplete/components/ComboBox/tests/ComboBox.test.tsx (total: 0)

Files potentially affected (total: 0)

[sylvhama]

Reminder: there was already an attempt to fix this via #1126
My solution does not remove the tabindex, it will allow the browser to "ignore" that div where there aren't optons.

[danrosenthal]

Hey @sylvhama, thanks for the contribution. I don't have the bandwidth to review this currently, so am removing myself as a reviewer. My suggestion would be to ping a couple people on your team for review and a thorough tophat, with particular focus on testing for accessibility. Once two members of your team have reviewed and approved, we can circle back and talk about getting this released.

[dpersing]

Hi @sylvhama! I'm afraid I have to second Dan's comment. I'd recommend careful testing within your team first. If you have accessibility questions that can't be answered by what's in the Accessibility Handbook, please reach out to the #accessibility channel in Slack.

[krystalcampioni]

🎩 works as expect

[carolopolo]

LGTM! 🤠

[ghost]

🎉 Thanks for your contribution to Polaris React!