Make searchable dropdown accessible

[arthurdenner]

Current behaviour:

A Dropdown/Select component with the search prop inside a Form is not accessible since the id prop is passed to the top level component instead of the input element.

New behaviour:

The id prop is passed to the input element.

It was added an example of an accessible searchable Dropdown.

If you want tests for this or have any changes to suggest, please let me know.

[welcome]

💖 Thanks for opening this pull request! 💖

Here is a list of things that will help get it across the finish line:

• Run yarn lint locally to catch formatting errors. This will fix some errors automatically, commit and push any changes.
• Run yarn test locally to catch errors. This ensures all components still behave as they should.
• Run yarn start to run the doc site locally and try a few pages, ensuring everything is in good working order.
• Include tests when adding/changing behavior.

We get a lot of pull requests on this repo, so please be patient and we will get back to you as soon as we can.

[codecov-io]

Codecov Report

❗ No coverage uploaded for pull request base (master@b75cc96). Click here to learn what that means.
The diff coverage is 100%.

@@            Coverage Diff            @@
##             master    #3149   +/-   ##
=========================================
  Coverage          ?   99.92%           
=========================================
  Files             ?      163           
  Lines             ?     2746           
  Branches          ?        0           
=========================================
  Hits              ?     2744           
  Misses            ?        2           
  Partials          ?        0

Impacted Files	Coverage Δ
src/modules/Dropdown/Dropdown.js	99.75% <100%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b75cc96...a53d80b. Read the comment docs.

[layershifter]

@arthurdenner thanks for PR but I don't want to merge it because this behaviour can be reached with existing functionality.

The searchInput prop already does it:

<Dropdown search searchInput={{ id: 'foo', type: 'number' }} options={options} />

And example is also there: http://react.semantic-ui.com/modules/dropdown/#usage-search-input

[layershifter]

Possible, we should update FormExampleFieldControlId.js to show this functionality, this will be the best option.

[arthurdenner]

Hm, sorry, I didn't notice this. However, inside a form, a searchable dropdown still not being accessible because the id value is passed to the top level div also, so clicking in the label doesn't work.

See this: https://codesandbox.io/s/x2lz8qwlrw

Maybe only ignoring the id from getUnhandledProps can do the trick?

[layershifter]

It's a little unclear, but works:
https://codesandbox.io/s/48r8928v1x

---

<Form.Field
  control={Select}
  options={genderOptions}
  label={{ children: "Gender", htmlFor: 'form-select-control-gender' }}
  placeholder="Gender"
  search
  searchInput={{ id: "form-select-control-gender" }}
/>

[arthurdenner]

Yep, that's very unclear because is totally different from the Form.Field with Input as the control prop, for example. 😕

Thanks for the help!

[arthurdenner]

Can I open a PR adding this as an example to the FormExampleFieldControlId though?

[layershifter]

@arthurdenner yes, please! 👍