Toggle button label should not be clickable/change toggle status

[karthikm897]

trafficstars

Environment Information

• Package version(s): 7.189.1 and v8
• Browser and OS versions: All

Describe the issue:

Clicking on the Toggle label changes the toggle status. Many times our product demanded little more clarity on the Toggle Setting and we had to append a description via Toggle label property with different css styles to differentiate. Now this taking a larger multi-line area in the canvas. Clicking anywhere in the label or this multiline changes the toggle status.

Actual behavior:

Clicking on the red area changes toggle status

Expected behavior:

Clicking on the green area alone to change toggle status

If applicable, please provide a codepen repro:

https://codepen.io/karthikm897/pen/wvmrVNK

Priorities and help requested (not applicable if asking question):

Are you willing to submit a PR to fix? (Yes, No) Yes Requested priority: (Blocking, High, Normal, Low)

Products/sites affected: (if applicable)

[gouttierre]

@karthikm897 - Thanks for filing this issue with us. I believe this functionality was implemented by design at the time, but i will let the dev team confirm. Super exciting to see that you are willing to contribute to this request. Thank you! To set expectations the developers will review this issue once capacity allows.

@layershifter - Would you be able to confirm if this is a regression, or if this behavior is an issue, or if it was by design? If you feel after investigations that there is a suggested fix for this request, would you guide @karthikm897 on the next steps.

[layershifter]

The problem is present for both Fluent UI React v7 & v8, so it's not a regression:

• v7 https://codesandbox.io/s/nostalgic-framework-femhl8
• v8 https://codesandbox.io/s/compassionate-ritchie-e7759d

This behavior looks intentional as both labels have for property:

Toggle component does not offer much customisations, so this behavior cannot be overridden at all. I will ask internally if it's intentional behavior or not.

---

Edit: It looks that it's intentional https://github.com/microsoft/fluentui/issues/12310#issuecomment-599742889.

[JustSlone]

Yes, this is intentional, it's also specific in the ARIA spec for Switch, that to make it easier to interact with the control, clicking on the label should toggle the switch. @karthikm897 do you have more information about the scenario or the need where the label should not activate the switch? I don't think we'll be updating v7/v8, but we could consider this input going forward.

To make it easier to perceive that clicking either the label or switch will activate the switch, the hover indicator is the same as the focus indicator. https://www.w3.org/WAI/ARIA/apg/example-index/switch/switch

[layershifter]

Yes, this is intentional, it's also specific in the ARIA spec for Switch, that to make it easier to interact with the control, clicking on the label should toggle the switch. @karthikm897 do you have more information about the scenario or the need where the label should not activate the switch? I don't think we'll be updating v7/v8, but we could consider this input going forward.

To make it easier to perceive that clicking either the label or switch will activate the switch, the hover indicator is the same as the focus indicator. https://www.w3.org/WAI/ARIA/apg/example-index/switch/switch

Thanks @JustSlone, I am going to close the issue. However, @karthikm897 feel free to continue the conversation 🐱