search

openui / open-ui

Maintain an open standard for UI and promote its adherence and adoption.
https://open-ui.org
Other
3.59k stars 191 forks source link

Select: make backwards compatible accessibility features of new select element easy to support by default #1113

Open Permik opened 1 month ago

Permik commented 1 month ago

Just trying to document this behavior that is supported across every platform, that the modern UI people have forgotten to implement on newer select/dropdown-elements across platforms: (Drag-clicking to select an option from a dropdown) https://github.com/microsoft/microsoft-ui-xaml/issues/8953 (Also, the Chromium regression was on windows, but now it seems to work at least on macOS)

Also, have any thoughts went into how the type-the-option-you-want-to-select will work on this new model?

josepharhar commented 1 month ago

It looks like mousing down on the button to open the picker, dragging, and then mousing up on an option does not select the option in appearance:base-select mode. The logic is here: https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/html/forms/html_option_element.cc;l=638-651;drc=07b1703c0ffc13913b71ad657808458af8d7bbbd

I tried changing the mousedown listener to click, but that still doesn't enable this use case. We would have to change it to mouseup. The fact that click is not fired in this case makes me feel like we shouldn't support this case - when clicking and dragging across interactive elements, typically neither of them is activated. For example, if I mousedown on the "comment" button on this github page, drag to "close with comment", then mouseup, neither of the buttons are activated.

Permik commented 4 weeks ago

Yeah, you just need to move the mouse outside the selects dropdown area to cancel the action like you did with the button. This is how dropdowns have worked practically everywhere for a really, really long time, so making something work different here seems very unintuitive.

This is essentially a accessibility/QOL feature that makes pages with lot's of dropdowns so much faster to navigate through. (think of a job where you input lots of data, like a doctor/DMW-clerk/etc)

If you take a peek into the issue I linked, there are many examples of where dropdowns currently work like this.
You just have to know this and then you see and use it everywhere.