[Bug]: Dropdown (v8) label is not clickable

[krystofmatejka]

Library

React / v8 (@fluentui/react)

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12800H
    Memory: 20.92 GB / 63.67 GB
Browsers:
    Edge: Chromium (126.0.2592.81)
    Internet Explorer: 11.0.22621.3527

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 for Toggle is clickable, but label for Dropdown not.

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[smhigley]

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!