From c0131c76b7330346978790bb7a5c44d653c5c5ce Mon Sep 17 00:00:00 2001
From: Jan Hassel <Jan.Hassel@ibm.com>
Date: Tue, 21 Feb 2023 13:46:44 +0100
Subject: [PATCH 1/3] fix(toggle): make props.labelText optional

---
 .../src/components/Toggle/Toggle-test.js      |  9 +++++--
 .../react/src/components/Toggle/Toggle.js     | 25 ++++++-------------
 2 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/packages/react/src/components/Toggle/Toggle-test.js b/packages/react/src/components/Toggle/Toggle-test.js
index 8a7ec415028f..8d5eb958bc5d 100644
--- a/packages/react/src/components/Toggle/Toggle-test.js
+++ b/packages/react/src/components/Toggle/Toggle-test.js
@@ -92,10 +92,15 @@ describe('Toggle', () => {
       ).toBe(props.labelText);
     });
 
-    it("doesn't render sideLabel if props.hideLabel and props['aria-labelledby'] are provided", () => {
+    it("doesn't render sideLabel if props.hideLabel and no props.labelText is provided", () => {
       const externalElementId = 'external-element-id';
       wrapper.rerender(
-        <Toggle {...props} hideLabel aria-labelledby={externalElementId} />
+        <Toggle
+          {...props}
+          hideLabel
+          labelText={null}
+          aria-labelledby={externalElementId}
+        />
       );
 
       expect(
diff --git a/packages/react/src/components/Toggle/Toggle.js b/packages/react/src/components/Toggle/Toggle.js
index 5d950ba4a32a..e2bc83c5b684 100644
--- a/packages/react/src/components/Toggle/Toggle.js
+++ b/packages/react/src/components/Toggle/Toggle.js
@@ -47,8 +47,8 @@ export function Toggle({
 
   const isSm = size === 'sm';
   const sideLabel = hideLabel ? labelText : checked ? labelB : labelA;
-  const renderSideLabel = !(hideLabel && ariaLabelledby);
-  const LabelComponent = ariaLabelledby ? 'div' : 'label';
+  const renderSideLabel = !(hideLabel && !labelText);
+  const LabelComponent = labelText ? 'label' : 'div';
 
   const wrapperClasses = classNames(
     `${prefix}--toggle`,
@@ -76,7 +76,7 @@ export function Toggle({
     <div
       className={wrapperClasses}
       onClick={
-        ariaLabelledby
+        !labelText
           ? (e) => {
               // the underlying <button> can only be activated by keyboard as it is visually hidden;
               // therefore, if this event's target is the <button>, it had to be triggered by
@@ -152,10 +152,7 @@ Toggle.propTypes = {
 
   /**
    * If true, the side labels (props.labelA and props.labelB) will be replaced by
-   * props.labelText, so that the toggle doesn't render a top label. In order to fully
-   * hide any labels, you can use props['aria-labelledby'] to refer to another element
-   * that labels the toggle. props.labelText would no longer be required in that case
-   * and can therefore be omitted.
+   * props.labelText (if passed), so that the toggle doesn't render a top label.
    */
   hideLabel: PropTypes.bool,
 
@@ -176,17 +173,11 @@ Toggle.propTypes = {
 
   /**
    * Provide the text that will be read by a screen reader when visiting this
-   * control. This is required unless 'aria-labelledby' is provided instead
+   * control. This should be provided unless 'aria-labelledby' is set instead
+   * or you use an external <label> element with its "for" attribute set to the
+   * toggle's id.
    */
-  labelText: (props, ...rest) => {
-    if (!props['aria-labelledby'] && !props.labelText) {
-      return new Error(
-        'labelText property is required if no aria-labelledby is provided.'
-      );
-    }
-
-    return PropTypes.node(props, ...rest);
-  },
+  labelText: PropTypes.string,
 
   /**
    * Provide an event listener that is called when the control is clicked

From 0822fc9f7d33218a26754ce5e5f49c1bf241fc68 Mon Sep 17 00:00:00 2001
From: Jan Hassel <Jan.Hassel@ibm.com>
Date: Tue, 21 Feb 2023 13:47:47 +0100
Subject: [PATCH 2/3] docs(toggle): add 'with accessible labels' story

---
 .../src/components/Toggle/Toggle.stories.js   | 28 ++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/Toggle/Toggle.stories.js b/packages/react/src/components/Toggle/Toggle.stories.js
index a7b6a7990f33..ff4c27062267 100644
--- a/packages/react/src/components/Toggle/Toggle.stories.js
+++ b/packages/react/src/components/Toggle/Toggle.stories.js
@@ -6,6 +6,8 @@
  */
 
 import React from 'react';
+
+import { VStack } from '../Stack';
 import Toggle from '../Toggle';
 
 export default {
@@ -35,7 +37,7 @@ export const SmallToggle = () => (
 );
 
 export const Playground = (args) => (
-  <Toggle labelA="Off" labelB="On" defaultToggled id="toggle-1" {...args} />
+  <Toggle labelA="Off" labelB="On" defaultToggled id="toggle-3" {...args} />
 );
 
 Playground.argTypes = {
@@ -80,3 +82,27 @@ Playground.argTypes = {
     },
   },
 };
+
+export const WithAcessibleLabels = () => (
+  <VStack gap={7}>
+    <Toggle id="toggle-4" labelText="Toggle label" />
+
+    <Toggle id="toggle-5" labelText="Toggle label" hideLabel />
+
+    <div>
+      <div id="toggle-6-label" style={{ marginBlockEnd: '0.5rem' }}>
+        External toggle label
+      </div>
+      <Toggle id="toggle-6" aria-labelledby="toggle-6-label" hideLabel />
+    </div>
+
+    <div>
+      <label
+        htmlFor="toggle-7"
+        style={{ display: 'block', marginBlockEnd: '0.5rem' }}>
+        External toggle label
+      </label>
+      <Toggle id="toggle-7" hideLabel />
+    </div>
+  </VStack>
+);

From 4ed36c084f4d19cd40bfc7720e035e2a55d21b94 Mon Sep 17 00:00:00 2001
From: Jan Hassel <Jan.Hassel@ibm.com>
Date: Tue, 21 Feb 2023 15:09:09 +0100
Subject: [PATCH 3/3] test(toggle): update public api snapshot

---
 packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index bb73deb5ab7d..48b6d3740ad6 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -8525,7 +8525,9 @@ Map {
       "labelB": Object {
         "type": "node",
       },
-      "labelText": [Function],
+      "labelText": Object {
+        "type": "string",
+      },
       "onClick": Object {
         "type": "func",
       },