fix: search input a11y issue

[endiliey]

Summary

EDIT: See #687

This PR was reverted because of failing test. See the new PR above

#418

The search input does not have aria-label. I have found the underlying cause, it is because we are not passing ariaLabel options to autocomplete.js
See https://github.com/algolia/autocomplete.js/#global-options

ariaLabel - An optional string that will populate the aria-label attribute.

My implementation is

• Check autoCompleteOptions for ariaLabel
• Otherwise, check original input selector aria-label
• Otherwise, use search input as aria-label

Test Plan

Here is my input

<input
  id="search_input_react"
  type="search"
  placeholder="Search"
  aria-label="This is my aria-label from endiliey"
/>

Before
No aria-label

After
aria-label exist

[s-pace]

👏 @endiliey , you are now a DocSearch collaborator 🚀

[s-pace]

Reverting since:

DocSearch › constructor › should allow customize algoliaOptions without loosing default options

    TypeError: Cannot read property 'getAttribute' of undefined

      81 |     this.autocompleteOptions.cssClasses.prefix =
      82 |       this.autocompleteOptions.cssClasses.prefix || 'ds';
    > 83 |    this.autocompleteOptions.ariaLabel = this.autocompleteOptions.ariaLabel || $(this.input)[0].getAttribute('aria-label') || 'search input';
         |                                                                               ^
      84 |
      85 |
      86 |     this.isSimpleLayout = layout === 'simple';

[s-pace]

Do you have an idea @endiliey ?

[endiliey]

$(this.input)[0] might be undefined. I should've used a safe getter like

$(this.input)[0] && $(this.input)[0].getAttribute('aria-label')

[s-pace]

Ok, feel free to submit a new PR :)

[endiliey]

@s-pace sorry for the delay. was doing something else

see #687

Note that autocomplete.js must be >= v0.36 because autoCompleteOptions.ariaLabel is not available in < 0.36