How to make an accessible searchable "select" list?

[josepharhar]

I was reading this article on gregs website: https://www.gwhitworth.com/posts/2019/can-we-please-style-select/
This article points out why we need <selectlist>, but also says that the top frustration with <select> is "Not being able to create a good user experience for searching within the list." There is an example in the demos which adds a text input in the listbox to filter which addresses this top frustration, but based on what I've been hearing from accessibility experts, there should not be any interactive content inside the listbox element except for <option>s.

So my question for accessibility people is: what is the right pattern to create a select-like thing where you can filter the options? Is that just called a combobox, where instead of a button to open the listbox there is a text field?

I see in this combobox in aria practices that the user can still sort of commit any text they want even if its not a valid option... what if you want to limit the possible choices to whats in the listbox like the one in the demos?

@scottaohara

[YummyBacon5]

there should not be any interactive content inside the listbox element except for <option>s

I think that this is only with the listbox role, but with the <listbox> element, the accessibility API mappings and content model could be different, to allow for this.

---

where instead of a button to open the listbox there is a text field?

I feel that we shouldn't allow for the search input to replace the selectlist's button element.

Since then authors could use this element as more of a text autocomplete, than a <select> element.

But this then raises the question of how dynamic data would work. Since usually text autocompletes have loads of options which users can choose from, for example, a search engine's search bar. Where it'd be unpractical to have all these <option> elements.

The ability to search through the options would best work where data is static. For example, searching through countries to choose a location.

[scottaohara]

I made this issue in ARIA due to the fact I see people trying to do this sort of thing a lot - w3c/aria#2051 - creating a combobox to open a listbox that essentially has a combobox with an open listbox within in it... it's a bit inception, but i can also see why people do it.

I see in this combobox in aria practices that the user can still sort of commit any text they want even if its not a valid option... what if you want to limit the possible choices to whats in the listbox like the one in the demos?

well, they can 'commit' any sort of text with that just because it's a demo, really. Additional validation/error prevention could be put in place.

anyway, Brecht created a filterable like this the other day that I forked to make the markup adhere to how someone would be instructed to do this now (re: it currently being invalid to put a searchbox inside of a listbox).

I've commented the heck out of that, so i'm not going to repeat it here (and there are still some accessibility gaps per the back and forth we've been having on gaps/questions with selectlist - i mentioned this exact situation in that list as well, but we haven't discussed it yet)

I think that this is only with the listbox role, but with the <listbox> element, the accessibility API mappings and content model could be different,

eh? sort of? the "right way" to do this would be to adjust the allowed content of a listbox role (see ARIA issue i opened), not to have a listbox element that had an amorphous listbox role mapping. Though that might have to be the reality here per the mantra of allowing whatever the heck inside of the listbox part. But it'd just be better to account for things that authors are highly likely to do, and then wonder what the hell is going on with those that put an iframe or a video inside of the listbox.

[yisibl]

We desperately need a Selectlist with a search, for example in very common scenarios such as language or country selection, where the search helps the user to quickly find the desired item.

There is an experimental flag (dom.forms.selectSearch) in Firefox.

https://www.deepl.com/en/translator

[kbrilla]

Also, serach value need to be accesible to js for server side filtering for example

[una]

There is also an example here under "Search Selection" where the button contains the search: https://semantic-ui.com/modules/dropdown.html . This is a common UI pattern and something to consider RE: interaction between selectedoption and the button

[scottaohara]

that firefox experiment is really interesting (and really an experiment! can't seem to figure out how to get to it with keyboard alone at all / force putting focus into it with mouse and JAWS turned on doesn't do much in the way of announcing anything, right now. but i assume that's all still being worked on, hence, experimental feature).

but yeh, how that'd need to be built on the web (re: present allowances) covered in the demo i mentioned in my previous post

[muan]

For fear of stating the obvious, is it not possible to enhance/build upon <datalist> to achieve the same effect?

[scottaohara]

maybe? browsers would have to not only agree to allow styling of the datalist popup, but also change their current parsing behavior of stripping out any non-text content from the rendered options (e.g., images just go away. and any other markup within the option just gets flattened into a text string, which then is what is shown in the options of the popup). that second bit, from my understanding, would be the major blocker for using datalist, as changing that could potentially break current invalid, but at least properly rendering due to the browser behavior, datalist options.

[lukewarlow]

Potentially could allow a listbox inside datalist element and that would enable the new stylability?

I do feel like there's a case for stylable datalists alongside any solution for searchable selectlist (even if they're not the same solution in the end)

[scottaohara]

Potentially could allow a listbox inside datalist element and that would enable the new stylability?

so a listbox inside of a listbox (a datalist is already mapped to be a listbox)? sounds like we should just use the listbox then and build in support that the list attribute can be used to point to the ID of a datalist or a listbox element.

[lukewarlow]

Uhhh yeah that, that makes a lot more sense 😅😂.

[github-actions]

There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.

[josepharhar]

Hopefully this use case can be tackled by <combobox> or an interoperable/stylable version of <input type=text> + <datalist>