fix: duplicated IDs in panel

[FabienMotte]

Context

CR-2709

Autocomplete is rendering duplicated values for the attribute id (see image below, autocomplete-0-list ID is used in two lists). As described in the HTML specs, the value of the id attribute must be unique within the HTML document.

Summary

ID values currently relies on the generateAutocompleteId() method, which is unique per Autocomplete instance but not per source.

Autocomplete panel

This PR tries to fix duplicated ID attributes in the Autocomplete panel by using the sourceIndex value to get a unique ID value per instance, source and item.
The ID value is described as follows: autocomplete-${instanceId}-${sourceId}-${'list' | 'item' | 'label'}.

Autocomplete search box

For the Autocomplete search box, the ID value is described as follows: autocomplete-${instanceId}-${'input' | 'label'}.

Result

Outputted ID attribute values are unique.

→ CodeSandbox

Autocomplete instance #⁠1

Search box

Label ID: autocomplete-0-label
Input ID: autocomplete-0-input

Panel

Source #⁠1

List ID: autocomplete-0-0-list
First list item ID: autocomplete-0-0-item-0

Source #⁠2

List ID: autocomplete-0-1-list
First list item ID: autocomplete-0-1-item-5

Autocomplete instance #⁠2

Search box

Label ID: autocomplete-1-label
Input ID: autocomplete-1-input

Panel

Source #⁠1

List ID: autocomplete-1-0-list
First list item ID: autocomplete-1-0-item-0

Source #⁠2

List ID: autocomplete-1-1-list
First list item ID: autocomplete-1-1-item-5

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit cb0955b:

Sandbox	Source
@algolia/autocomplete-example-github-repositories-custom-plugin	Configuration
@algolia/autocomplete-example-instantsearch	Configuration
@algolia/autocomplete-example-playground	Configuration
@algolia/autocomplete-example-preview-panel-in-modal	Configuration
@algolia/autocomplete-example-react-renderer	Configuration
@algolia/autocomplete-example-starter-algolia	Configuration
@algolia/autocomplete-example-starter	Configuration
@algolia/autocomplete-example-reshape	Configuration
@algolia/autocomplete-example-vue	Configuration
adoring-banach-ozrwxo	PR

[FabienMotte]

I updated the PR description and added a CodeSandbox with 2 instances, each instance with two sections (= 2 plugins).
No IDs collide, neither in the search box nor in the panel.