feat(toggle): allow to be labelled by another element

[janhassel]

Closes #12896

Implements the behaviour outlined in #12896 (comment) (option 2).

See "Testing / Review" at the end of this PR for details.

Changelog

New

• Explicitly add aria-labelledby as optional prop for Toggle

Changed

• Adjusted props.labelText validation for Toggle
• Allow for toggle to be labelled by another element
• Updated tests for Toggle

Testing / Reviewing

• If props.hideLabel === true and props['aria-labelledby] IS NOT passed:
  • Render props.labelText on the side (instead of props.labelA and props.labelB
  • The .cds--toggle__label is a <label>
  • The .cds--toggle__label has a for attribute pointing to the <button> id (props.id)
• 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>
• If props.hideLabel === false and props['aria-labelledby] IS passed:
  • The .cds--toggle__label is a <div>
  • props.labelText is rendered on top of the toggle
• If props.hideLabel === false and props['aria-labelledby] IS passed and props.labelText IS NOT passed:
  • The .cds--toggle__label is a <div>
  • .cds--toggle__label-text doesn't exist

[netlify]

✅ Deploy Preview for carbon-components-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	d077a92
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-components-react/deploys/63c90428155d0c0009a3ddbd
😎 Deploy Preview	https://deploy-preview-12974--carbon-components-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	d077a92
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/63c9042859600400092ad150
😎 Deploy Preview	https://deploy-preview-12974--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[tay1orjones]

LGTM, thanks! 🎉

[tw15egan]

LGTM, thanks for adding this in Jan 🎉

[carbon-bot]

Hey there! v11.21.0 was just released that references this issue/PR.