This is where I am at now. In a bit of a desperate state.

I just need to enhance a select with autocomplete/search I thought. How hard can it be.

So: Help? Anyone?

#select #accessibility #webdev #html #aria

🧵 9/9

But here comes the catch: In my first attempt the whole USWDS feels very opinionated and monolitic. It seems to be meant to only be used as a whole and hence makes it very hard to integrate one tiny piece like the Combo box into a project. Even more so inside of Alpine.js.

🧵 8/9

Finally I looked at the US Design System. The have a Combo box pattern that looks promising:

https://designsystem.digital.gov/components/combo-box/

While it also builds on the combobox role and uses an `<input>` it does one thing different than the UK one: If you enter an invalid value and confirm or leave the field it resets to the last valid value. Which is exactly what we want here!

So basically it seems to tick all the boxes functionality wise!

🧵 7/9

I didn't find anything directly in the UK Design System. They do not have a <select> with search.

The closest is an input with autocomplete that seems to be based on the combobox pattern: https://github.com/alphagov/accessible-autocomplete

Unfortunately it has the same issue as the `<datalist>` solution: It is basically an `<input>` on steroids, not a `<select>` with search: You can leave the field with an invalid value.

🧵 6/9

Final straw: I started looking at solid Design Systems like the UK one (https://design-system.service.gov.uk) and the US one (https://designsystem.digital.gov/).

🧵 5/9

Getting more and more desperate I looked at the raw ARIA combobox pattern (https://www.w3.org/TR/wai-aria-1.2/#combobox) but I *really* shouldn't implement something like this myself:

https://adrianroselli.com/2020/03/stop-using-drop-down.html#Combo

Also it has the same issue as the `<datalist>`: `<input>` on steroids, not `<select>` with search.

🧵 4/9

Something like https://select2.org/ was requested. But that it requires jQuery is non-ideal. Also it seems to have a11y issues https://github.com/select2/select2/issues?q=is%3Aissue%20state%3Aopen%20label%3Aaccessibility and time since last commit/release do not inspire confidence.

I've also looked at https://github.com/Choices-js/Choices but there seem to be even more a11y issues. Some issues with keyboard navigation already popped up for myself in the first 30 seconds of trying.

🧵 3/9

`<input>` with `<datalist>` was attempted in the awareness that it offers an `<input>` with autocomplete, not a `<select>` with search.

Being able to enter invalid options which only shows with validation annoys users.

Also browser/a11y support seems to be non-ideal as well:
https://adrianroselli.com/2023/06/under-engineered-comboboxen.html

🧵 2/9