Optional search for dropdown/select questions

[thegcat]

We have a select question with a fairly large number of options (>150), it would be nice to either optionally (in the question settings) or when the question has a certain number of options (maybe over 20 or 30) be able to add a search option to the select question.

[raphaelm]

For single choice options (currently using <select>) we could in theory use select2.js like we already use in lots of places in the backend. @wiffbi can you check if that would impact accessibility?

[thegcat]

Select2 was what I was thinking about and looking into adding, yes.

[thegcat]

(little anecdote: We use this for a list of Hochschulen our event's participants might come from, and I learnt since then that the BMBF thing for the emergency financial aid for students due to COVID and stuff has 400+ Hochschulen and they explored using a <select> for that 😂)

[raphaelm]

Select2 was what I was thinking about and looking into adding, yes.

Yup, I think that would be the way to go. We can probably just do that for all dropdown questions, it's useful regardless of the number of options. If you want to prepare a patch, feel free to go ahead and do so! It's probably just a few lines of JavaScript as we don't need any fancy AJAX-fetching of options.

As we're currently in the process of getting the checkout process certified screenreader-friendly, merging will be conditional on @wiffbi checking if it doesn't break usability for screenreader users.

[raphaelm]

Seems like we might need to switch to a newer select2 version to make this accessible: select2/select2#3744

[wiffbi]

I have not tested select2 yet as we have not used it in pretix-presale. But according to the comments in the issue that @raphaelm mentioned, we need to update to the latest version of select2 to improve accessibility. The latest release is a pre-release (4.1.0–rc.0) – I am not sure how we deal with that.

I have not tested the latest release though, if there are still issues which might affect accessibility. But if there are (and I am afraid that there still are) we might consider using select2 only for selects with lots of options and note this accordingly in our statement regarding accessibility.

Another option might be to use a <datalist>. This is probably the intended, standards-based way to do a filtered/searchable select. Problem is, that this does not have a mode to select multiple entries. Although technically possible, a select with multiple-attribute is IMHO strange UI/UX-wise and better replaced with way Django does it anyway: by having a list of checkboxes. If there are lots of options to select, then we might consider putting them in a smaller, scrollable container.

[raphaelm]

For multi-select, we already use checkboxes (I think the scrollable container is only in the backend right now).