[Bug]: Toggle labelA and labelB are still being ignored when hideLabel is tur

[kglickman]

Package

@carbon/react

Browser

No response

Package version

1.2.1

React version

16.14.0

Description

The intent of the last fix for #12896 was to allow us to still use labelA and labelB when using hideLabel and aria-labelledby to label the component in an external element. However, there is now no label next to the toggle at all.

Suggested Severity

Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.

Reproduction/example

https://stackblitz.com/edit/github-jsd1gh

Steps to reproduce

See that the toggle has no label to right of the toggle, even though I have defined labelA and labelB and have added the aria-labelledby with my hideLabel.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[tay1orjones]

Related to #12974

@janhassel Was this intentional? It appears so

If props.hideLabel === true and props['aria-labelledby] IS passed:

• Don't render any side label (.cds--toggle__text) doesn't exist
• The .cds--toggle__label is a <div>

[tay1orjones]

There's a related docs issue as well, #12999

[janhassel]

@kglickman I think this is mainly a documentation issue now, as @tay1orjones mentioned.

You can achieve your use case by just not passing props.labelText as it's now only required if props['aria-labelledby] isn't used.

<div id="toggle_label">This is the label</div>

<Toggle
  aria-labelledby="toggle_label"
  id="toggle_id"
  labelA="On"
  labelB="Off"
/>

[kglickman]

@janhassel I tried that but it didn't help. https://stackblitz.com/edit/github-jsd1gh-1n1yiu

[kglickman]

Oh, I see. You need to get rid of the hideLabel as well.

[kglickman]

@janhassel I have it displaying correctly but the onToggle is never getting called when the user clicks on it.

[janhassel]

@kglickman Thanks for reporting this. That seems to be a severe bug introduced with the mentioned changes that unfortunately didn't get caught in automated testing. I apologize.

@tay1orjones
The actual <button> uses the visually-hidden mixin. Before the change in #12974, the button was always accompanied by a <label> which enabled the clicking functionality on the button. Now, when props['aria-labelledby'] is passed, the <LabelComponent> is a <div> instead of a <label> and therefore breaks the click-relation. Tabbing onto the toggle and hitting Enter still works.