Inconsistent mouse (hover/click) interactions across labeled controls

[msmithNI]

🐛 Bug Report

Currently we have some inconsistent behavior for mouse interactions on controls that support labels. We should get consensus on the behavior we want, and do a pass over all the controls to ensure they have that behavior.

• Mouse hovering over the label: The control shows its 'hover' styling, same as if you hovered over the control itself
  • All labeled controls (text field, text area, number field, select / combobox, switch, plus checkbox/ radio group), already do this. So no changes needed if we like this behavior.
• Single-clicking the label text: Slight differences here currently.
  • Text field, Number field: Control is focused, all existing value text is selected. Note: This is slightly different than clicking the control itself (which wouldn't do the select all)
  • Text area: Control is focused, with cursor at the end of the current value text.
  • Checkbox, Radio Button in Group, Switch: Sets/toggles value (same as clicking control)
  • Select, Combobox: Opens the listbox popup (same as clicking control)
• Double-clicking the label text: Multiple differences.
  • Text field, Number field, Text area: Same behavior as single click
  • Checkbox: Sets/toggles value (twice)
  • Switch: Sets/toggles value (twice), and selects label text
  • Radio button in group: Sets value and selects label text
• Selecting label text via a mouse-drag, started outside the control bounds:
  • Text field, Text area, Number field, Select/Combobox, Checkbox: Not allowed (label text not selected)
  • Radio button in group, Switch: Allowed

The main inconsistencies are noted in italics above. So the main thing to determine is if we want to allow label selection (via double clicking label text, mouse drag starting outside control bounds, or both). We should also consider doc/HLD template updates so these are considered for new controls going forward.

[fredvisser]

https://github.com/ni/nimble/issues/393 … captures the need to make all labels selectable, so I think we need to start there.

Different design systems and native components also vary in how they handle label clicks - E.g., single-clicking a text-field label can select the text (native input/Nimble) or focus the cursor at the end of the text (Atlassian, Vivid, Clarity, Fluent… Alright, that convinced me - it seems like most have moved away from the native behavior to prefer the cursor at the end of the text, and we should consider the same.

For double-clicking the label, I don't think we need to design for it - I don't see any components waiting for the second click, so the double-click is pretty consistently handled as 2 single-clicks by the control - and the particular word in the label may end up being selected. It's not a consistent experience anywhere, so I'm assuming it's a low ROI type of problem.