Closed krystofmatejka closed 1 month ago
Hi @krystofmatejka, thanks for finding and logging this!
While in general this is a good behavior to have, it likely doesn't meet the bar for v8 updates, since we're now focusing on v9 and have a higher bar for v8 changes, and especially for v8 changes that affect behavior or visuals.
The label-click-to-focus behavior is convenient but has a relatively small user impact, especially since our ComboBox & Dropdown controls are reasonably large hit targets already. The label behavior can be more impactful when it's making up for a smaller hit target (as in the case of Switch), but shouldn't be a huge deal here. The other reason this isn't a must-have with Dropdown is that users almost certainly still need to click the Dropdown directly to use it, since focusing it from the label will not expand it. Given those reasons, I'd lean towards leaving it as-is in v8, especially since the issue is resolved in v9.
v9's Dropdown uses a native <button>
element, which means using the Field
component together with Dropdown
will give you the label-click-focus behavior out of the box. You can also use the Label
control directly with Dropdown
and hook it up with for
/ id
, and that will also work.
Let me know if there are any considerations that I'm missing here that raise the impact, though!
Library
React / v8 (@fluentui/react)
System Info
Are you reporting Accessibility issue?
None
Reproduction
https://codepen.io/krystof-matejka/pen/VwOoWrB?editors=1111
Bug Description
Actual Behavior
When you click on label rendered alongside dropdown, it does not open options.
Expected Behavior
Click on label should open options.
This is especially weird if you use
Dropdown
alongside some other component that does support this behavior. For example, in this case label forToggle
is clickable, but label forDropdown
not.Logs
No response
Requested priority
Normal
Products/sites affected
No response
Are you willing to submit a PR to fix?
yes
Validations