[listbox] Usability downgrades with new customisable listbox

[lukewarlow]

While the new base appearance listboxes are massively better than the old ones (can be tested in Chrome canary via https://demo.lukewarlow.dev/css-forms.html) we do lose some (mainly one) keyboard functionality that does feel like a downgrade.

1. Ablity to check all options:

With auto appearance listboxes we can ctrl+a when the listbox is focused and that will select all options (not sure if it's all or just all visible ones this would need testing). With the new model we'd have to manually select them all. I know checkedness doesn't follow selection now but some way to select all would be nice, be that ctrl+a or ctrl+a + space to actually toggle.

The latter feels slightly better because then you can use this to uncheck all too.

---

2. Ability to submit form from the listbox:

We also lose the ability to submit a form while the listbox is focused, previously pressing enter would trigger submit but now it just toggles the currently focused option. (This is a less important loss but it's worth noting)

[lukewarlow]

cc @josepharhar and @scottaohara in case you have thoughts or I've missed any.

[lukewarlow]

https://react-aria.adobe.com/ListBox - for an example of a library's attempt at this, it doesn't do form submission but you can use ctrl+a to select all options (notably there's no way to unselect all that I can see).

[josepharhar]

Thanks for bringing this up!

https://react-aria.adobe.com/ListBox - for an example of a library's attempt at this

What do you think about the shift+arrow behavior there?

previously pressing enter would trigger submit

I'll defer to scott, but as a user I'd probably expect enter to toggle/choose the option like it does for customizable select with a popup.

[lukewarlow]

What do you think about the shift+arrow behavior there?

As an immediate reaction, It's slightly odd that if I shift + down from Aardvark it selects everything below but not aardvark, It's also slightly confusing with non-continguous selections. Perhaps this or a variant of this would be nice to have though, to keep some of the existing keyboard behaviours without the most annoying selection follows focus one?

Then again shift + arrow on auto multi listboxes while they do behave as I would expect for shift + down from aardvark, also have wonky behaviour for non contiguous lists (inconsistent between firefox and chromium even), so that's not a perfect model to follow either.

Some form of shift select allowing multiple to be selected (Even if then requiring space to toggle the values) seems reasonable alongside ctrl+a.

I agree enter to submit a form is probably fine to lose. Just was a difference I noticed so thought I'd mention.

[css-meeting-bot]

The Open UI Community Group just discussed [listbox] Usability downgrades with new customisable listbox, and agreed to the following:

• RESOLVED: wait and see on this question - don't make changes now.

The full IRC log of that discussion

<brecht_dr> lwarlow I was playing around with the new fancy select boxes. I noticed some selectboxes in the bugzilla advances search page. they use the native selects. it's the native platform ones.
<masonf> q+
<brecht_dr> lwarlow when searching i press the select, do ctrl+a and select all the things, and you can't do this with the new system, you have to add them manually
<brecht_dr> lwarlow I can imagine the ctrl a might be a handy thing that people will miss
<brecht_dr> q+
<bkardell> oh wow
<masonf> https://xkcd.com/1172/
<brecht_dr> lwarlow that one feels like the biggest downgrade in UX, the other one that i noticed is that you can't submit the form you are in from the listbox.
<bkardell> that seems broken?
<brecht_dr> lwarlow focus is completely changed with the listbox. the question is: are these kind of keyboard behaviors things we potentially want to think of?
<bkardell> Not submitting on enter is surely an issue?
<brecht_dr> lwarlow it's good that selection doesn't seem to follow focus, but it does make us lose a few capabilities
<brecht_dr> ... maybe a way to highlight multiple options that you then can confirm with a spacebar might be a nice alternative
<brecht_dr> ... since focus is change, maybe this is not that easily doable
<lwarlow> ack lwarlow
<brecht_dr> masonf I'm wondering if these behaviors are known by a lot of people. I think most users can't use that control because you have to hold shift to select multiple options
<jarhar> q+ im ok with implementing ctrl+a. shift+arrow is tricky and confusing in the react-aria example. i think enter should continue toggling selectedness of current option instead of do form submission.
<brecht_dr> masonf another example is a checkbox array, that doesn't select all of them either
<brecht_dr> masonf the most common pattern I see is a check all/none specific checkbox at the top
<brecht_dr> ... maybe that is the better pattern?
<keithamus> q?
<brecht_dr> ... it would be good if we all follow the same pattern, but I believe we are allowed to fix the original
<keithamus> ack masonf
<masonf> ack brecht
<masonf> brecht_dr: the multi-select with size=1 being openable, otherwise you get an in-page.
<masonf> ...I feel that I would tab through them and use spacebar. I'd expect them to behave just like checkboxes.
<lwarlow> q+
<masonf> ...the ctrl-a example is intriguing. Select-all sounds cool.
<masonf> {Maybe there can be a command invoker for "select-all" ?
<masonf> }
<masonf> ack lwarlow
<brecht_dr> lwarlow I think the point about checkboxes might be a red harring. There is not HTML checkbox group, they are infdividual inputs grouped by name, but they aren't an actual group and are individual
<masonf> there's fieldset...
<brecht_dr> ... the react behavior does hav ctrl a, maybe they done this for niceties.
<masonf> q+
<brecht_dr> ... i'm not sure that if people are implementing this, they are are doing this with checkboxes.
<brecht_dr> ... having the multiselect popup would replace original behavior of libraries i've built as well, but the listbox one is weird, even though it's not specified, it's a nicety.
<jarhar> q?
<jarhar> q+
<jarhar> im ok with implementing ctrl+a. shift+arrow is tricky and confusing in the react-aria example. i think enter should continue toggling selectedness of current option instead of do form submission.
<brecht_dr> ... i don't have this set in my heart that we need this, but I do think we are losing some capabilities. if it was ctrl+a to select them all and then space to select them all that would be a nice way to go.
<brecht_dr> ... but it would be strange as this isn't a focus in the end, it's more like a selected that isn't checked and that's a state that doesn't exist yet
<brecht_dr> masonf the react control, if you do ctrl+a does it select everything? that feels like something I don't want. it feels like i want to confirm (with spacebar)
<brecht_dr> lwarlow that is the behavior, it gets selected right away.
<brecht_dr> masonf I think maybe this can also be done wiith an invoker? maybe it's something we can keep for the future?
<brecht_dr> lwarlow Isn't the new select listbox merged now?
<brecht_dr> jarhar yes
<masonf> Proposed resolution: wait and see on this question - don't make changes now.
<brecht_dr> jarhar they are very different form each others, but not everything is specified
<lwarlow> +1
<brecht_dr> lwarlow If this is something firefox and webkit want to work around it than that seems good to me
<brecht_dr> +1
<masonf> RESOLVED: wait and see on this question - don't make changes now.