feat: combobox filtering and autocomplete

[prsdthkr]

Description

In this change, we make the Combobox filterable and enable autocomplete capabilities.
We have tried to align with the specification here: ARIA 1.1 Combobox with Listbox Popup Examples
There is are some minor deviations from the specification because of the way we filter the Combobox options.

QA:
https://deploy-preview-1125--fundamental-react.netlify.app/?path=/story/component-api-comboboxinput--dev

fixes #1019

[netlify]

Deploy preview for fundamental-react ready!

Built with commit a62e15b

https://deploy-preview-1125--fundamental-react.netlify.app

[skvale]

is this still a WIP or ready to be reviewed?

[prsdthkr]

is this still a WIP or ready to be reviewed?

Hi @skvale, feel free to review and QA. I'm in the process of writing unit tests for the interactions. Will mark it as ready for review post that.

[jbadan]

Good idea! Just in case other reviewers are wondering why there's so many visual test changes - this is why. I think it's a good idea to remove the dev stories from the visuals.

[jbadan]

I see this a11y violation, but I don't really understand it. I looked up the values for aria-controls, https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-controls and it says "ID reference list: A list of one or more ID references." We use aria-controls like this everywhere so 🤷‍♀️ Maybe this is a case of the tool not understanding grey area.

[jbadan]

This is an issue for fundamental-styles, but I think the list should either be full width or the container should be limited. We should open an issue over there.

[jbadan]

This looks really good!!

1. Should the Combobox open if I haven't typed anything yet and press the down key - like if I wanted to see all the options or is that not a thing?

2. We should pass the compact size to List:

3. We need to pass autocomplete='nope' instead of autocomplete='off' to FormInput, let the constant battle with keeping it disabled begin 😆

[prsdthkr]

Thanks for the review, Jenna 😃

• aria-controls a11y issue: this happens mostly because the Listbox that the id is referring to is non-existent until opened. So if you re-run the a11y tests on opening the listbox - the error should disappear. To re-run the tests click on the ✓ Tests completed thingy below. I don't know if there is a way to overcome this violation.

• autocomplete=nope introduces a new a11y violation 🙄 Ensure the autocomplete attribute is correct and suitable for the form field. Is this acceptable?

• Should the Combobox open if I haven't typed anything yet and press the down key - like if I wanted to see all the options or is that not a thing?

  For this, I'll try to align with the ARIA example. There, the Combobox opens like that only in the 3rd example.

• List width styling issue seems to be with the fd-list--dropdown class. Removing it has fixed it for now. I'll create I created an issue in fd-styles for this: Full width Combobox list fundamental-styles#1295

• We should pass the compact size to List

  good catch 👍

[jbadan]

@prsdthkr I think you're right about the autocomplete issue. Maybe we put a smaller version of this https://hig.concur.com/pages/develop/web/components/support.html#autocomplete-attribute-issue, to explain why that might happen.
Then we can do something like this:

<FormInput
    autocomplete='off'
    {...inputProps}
   {...labelProps}
   ....
/>

The consumer then has full control to override our autocomplete attribute to whatever works at the time.

[jbadan]

LGTM 🚢 Great work!