Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Permik opened this issue Oct 22, 2024 · 2 comments
Labels
select These are issues that relate to the select component

Comments

@Permik
Copy link

Permik commented Oct 22, 2024

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)
microsoft/microsoft-ui-xaml#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 josepharhar added the select These are issues that relate to the select component label Oct 29, 2024
@josepharhar
Copy link
Collaborator

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
Copy link
Author

Permik commented Oct 30, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
select These are issues that relate to the select component
Projects
None yet
Development

No branches or pull requests

2 participants