fix(toggle): make props.labelText optional

[janhassel]

Closes #12999

Changelog

New

• Added "with accessible labels" story to demonstrate how to use the Toggle component

Changed

• props.labelText is no longer required
  • The prop docs have been updated to inform the user about the appropriate ways of using this component

Testing / Reviewing

As per #12999 (comment)

• <Toggle labelText="Label" />
  • The label is rendered on top
  • .cds--toggle__label is a <label> element with its for attribute set to the toggle's id
  • Side labels ("on" / "off") are rendered
• <Toggle labelText="Label" hideLabel />
  • The label is rendered on the side instead of "on" / "off"
  • .cds--toggle__label is a <label> element with its for attribute set to the toggle's id
  • .cds--toggle__label-text is visually hidden but still in the a11y tree
• <Toggle hideLabel aria-labelledby="external-id" />
  • The <button> receives the aria-labelledby attribute
  • .cds--toggle__label is a <div> element
• <Toggle hideLabel />
  • .cds--toggle__label is a <div> element

[netlify]

✅ Deploy Preview for carbon-components-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	6014ff9
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-components-react/deploys/64024f39b142e300082adff8
😎 Deploy Preview	https://deploy-preview-13196--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.

[tw15egan]

@janhassel I noticed that we're getting this violation in the storybook

This violation is already present in the current storybook, so it's not a regression, but I wanted to know if there was any way to address this since it seems related to these changes.

I could resolve all but 1 of the violations in the example by changing the button on L101 to aria-labelledby={ariaLabelledby ? null : id}, but I was wondering about your thoughts on this issue. We can also roll this into a separate PR / Issue. The rest of the changes in this PR look great 👍🏻

[janhassel]

@tw15egan I think we talked about this presumedly false positive of the a11y checker last year in this PR: #11972 (comment)

[tw15egan]

@janhassel thanks for reminding me! 🙃

[tw15egan]

LGTM 👍 ✅

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	6014ff9
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/64024f39f64f18000885c01d
😎 Deploy Preview	https://deploy-preview-13196--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.