From 548015d86c77f0fa0cca880e84fc9634a0bc993f Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 6 Sep 2023 16:19:07 -0400
Subject: [PATCH 01/13] fix(item): click first interactive control within item

---
 core/src/components/item/item.tsx | 29 +++++++++++++++++++++++------
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx
index 6e2d48186da..8612b532850 100644
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -350,6 +350,11 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
     }
   }
 
+  private getFirstInteractive() {
+    const controls = this.el.querySelectorAll<HTMLElement>('ion-toggle, ion-checkbox, ion-radio');
+    return controls[0];
+  }
+
   render() {
     const {
       counterString,
@@ -367,6 +372,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
       routerAnimation,
       routerDirection,
       inheritedAriaAttributes,
+      multipleInputs,
     } = this;
     const childStyles = {} as StyleEventDetail;
     const mode = getIonMode(this);
@@ -383,15 +389,26 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
             rel,
             target,
           };
+
+    let clickFn = {};
+
+    const firstInteractive = this.getFirstInteractive();
+
     // Only set onClick if the item is clickable to prevent screen
     // readers from reading all items as clickable
-    const clickFn = clickable
-      ? {
-          onClick: (ev: Event) => {
+    if (clickable || (firstInteractive !== undefined && !multipleInputs)) {
+      clickFn = {
+        onClick: (ev: Event) => {
+          if (clickable) {
             openURL(href, ev, routerDirection, routerAnimation);
-          },
-        }
-      : {};
+          }
+          if (firstInteractive !== undefined && !multipleInputs) {
+            firstInteractive.click();
+          }
+        },
+      };
+    }
+
     const showDetail = detail !== undefined ? detail : mode === 'ios' && clickable;
     this.itemStyles.forEach((value) => {
       Object.assign(childStyles, value);

From 5eb1917965439e628b6226283b6339b565e9b24d Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 6 Sep 2023 16:50:54 -0400
Subject: [PATCH 02/13] fix(checkbox): clicking padded space within item clicks
 the checkbox

---
 core/src/components/checkbox/checkbox.tsx     | 23 +++++++++++++++++--
 .../checkbox/test/basic/checkbox.e2e.ts       | 22 ++++++++++++++++++
 .../test/legacy/basic/checkbox.e2e.ts         | 22 ++++++++++++++++++
 3 files changed, 65 insertions(+), 2 deletions(-)

diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx
index 08cfc581ff5..b47fa5dd229 100644
--- a/core/src/components/checkbox/checkbox.tsx
+++ b/core/src/components/checkbox/checkbox.tsx
@@ -31,6 +31,7 @@ import type { CheckboxChangeEventDetail } from './checkbox-interface';
 export class Checkbox implements ComponentInterface {
   private inputId = `ion-cb-${checkboxIds++}`;
   private focusEl?: HTMLElement;
+  private labelEl?: HTMLLabelElement;
   private legacyFormController!: LegacyFormController; // TODO(FW-3100): remove this
   private inheritedAttributes: Attributes = {};
 
@@ -203,6 +204,20 @@ export class Checkbox implements ComponentInterface {
     this.ionBlur.emit();
   };
 
+  private onClick = (ev: MouseEvent) => {
+    const path = ev.composedPath();
+    const { labelEl } = this;
+
+    if (labelEl) {
+      // Prevents the parent ion-item click listener from firing twice.
+      ev.stopPropagation();
+      if (path.includes(labelEl)) {
+        return;
+      }
+      this.toggleChecked(ev);
+    }
+  };
+
   // TODO(FW-3100): run contents of renderCheckbox directly instead
   render() {
     const { legacyFormController } = this;
@@ -242,8 +257,9 @@ export class Checkbox implements ComponentInterface {
           [`checkbox-justify-${justify}`]: true,
           [`checkbox-label-placement-${labelPlacement}`]: true,
         })}
+        onClick={this.onClick}
       >
-        <label class="checkbox-wrapper">
+        <label class="checkbox-wrapper" ref={(labelEl) => (this.labelEl = labelEl)}>
           {/*
             The native control must be rendered
             before the visible label text due to https://bugs.webkit.org/show_bug.cgi?id=251951
@@ -323,11 +339,14 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
           'legacy-checkbox': true,
           interactive: true,
         })}
+        onClick={this.onClick}
       >
         <svg class="checkbox-icon" viewBox="0 0 24 24" part="container">
           {path}
         </svg>
-        <label htmlFor={inputId}>{labelText}</label>
+        <label htmlFor={inputId} ref={(labelEl) => (this.labelEl = labelEl)}>
+          {labelText}
+        </label>
         <input
           type="checkbox"
           aria-checked={`${checked}`}
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts b/core/src/components/checkbox/test/basic/checkbox.e2e.ts
index 83d9c2858ea..04bb912edb8 100644
--- a/core/src/components/checkbox/test/basic/checkbox.e2e.ts
+++ b/core/src/components/checkbox/test/basic/checkbox.e2e.ts
@@ -84,4 +84,26 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       expect(ionChange).not.toHaveReceivedEvent();
     });
   });
+
+  test(title('clicking padded space within item should click the checkbox'), async ({ page }) => {
+    await page.setContent(
+      `
+      <ion-item>
+        <ion-checkbox>Size</ion-checkbox>
+      </ion-item>
+    `,
+      config
+    );
+    const itemNative = page.locator('.item-native');
+    const ionChange = await page.spyOnEvent('ionChange');
+
+    /**
+     * .click() is intended to be used on interactive elements,
+     * but we want to test clicking the padded space of the
+     * item that is not the checkbox itself.
+     */
+    await itemNative.click({ force: true });
+
+    expect(ionChange).toHaveReceivedEvent();
+  });
 });
diff --git a/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts b/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts
index 2bcbbed58cb..bd6a25f500d 100644
--- a/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts
+++ b/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts
@@ -68,4 +68,26 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
       await expect(ionChange).not.toHaveReceivedEvent();
     });
   });
+
+  test(title('clicking padded space within item should click the checkbox'), async ({ page }) => {
+    await page.setContent(
+      `
+      <ion-item>
+        <ion-checkbox legacy="true" value="my-checkbox"></ion-checkbox>
+      </ion-item>
+    `,
+      config
+    );
+    const itemNative = page.locator('.item-native');
+    const ionChange = await page.spyOnEvent('ionChange');
+
+    /**
+     * .click() is intended to be used on interactive elements,
+     * but we want to test clicking the padded space of the
+     * item that is not the checkbox itself.
+     */
+    await itemNative.click({ force: true });
+
+    expect(ionChange).toHaveReceivedEvent();
+  });
 });

From 4b7116c9b4daec7d285ba42379be8a42aea00905 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 6 Sep 2023 17:32:45 -0400
Subject: [PATCH 03/13] test: clicking padded space for radio, toggle and
 checkbox

---
 .../checkbox/test/basic/checkbox.e2e.ts       | 13 ++++-----
 .../test/legacy/basic/checkbox.e2e.ts         | 13 ++++-----
 .../components/radio/test/item/radio.e2e.ts   | 27 +++++++++++++++++++
 .../components/toggle/test/item/toggle.e2e.ts | 23 ++++++++++++++++
 4 files changed, 64 insertions(+), 12 deletions(-)

diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts b/core/src/components/checkbox/test/basic/checkbox.e2e.ts
index 04bb912edb8..ff1f57516e8 100644
--- a/core/src/components/checkbox/test/basic/checkbox.e2e.ts
+++ b/core/src/components/checkbox/test/basic/checkbox.e2e.ts
@@ -97,12 +97,13 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     const itemNative = page.locator('.item-native');
     const ionChange = await page.spyOnEvent('ionChange');
 
-    /**
-     * .click() is intended to be used on interactive elements,
-     * but we want to test clicking the padded space of the
-     * item that is not the checkbox itself.
-     */
-    await itemNative.click({ force: true });
+    // Clicks the padded space within the item
+    await itemNative.click({
+      position: {
+        x: 5,
+        y: 5,
+      },
+    });
 
     expect(ionChange).toHaveReceivedEvent();
   });
diff --git a/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts b/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts
index bd6a25f500d..eae70a468d1 100644
--- a/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts
+++ b/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts
@@ -81,12 +81,13 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
     const itemNative = page.locator('.item-native');
     const ionChange = await page.spyOnEvent('ionChange');
 
-    /**
-     * .click() is intended to be used on interactive elements,
-     * but we want to test clicking the padded space of the
-     * item that is not the checkbox itself.
-     */
-    await itemNative.click({ force: true });
+    // Clicks the padded space within the item
+    await itemNative.click({
+      position: {
+        x: 5,
+        y: 5,
+      },
+    });
 
     expect(ionChange).toHaveReceivedEvent();
   });
diff --git a/core/src/components/radio/test/item/radio.e2e.ts b/core/src/components/radio/test/item/radio.e2e.ts
index ec5c5c6db8b..91c79982f19 100644
--- a/core/src/components/radio/test/item/radio.e2e.ts
+++ b/core/src/components/radio/test/item/radio.e2e.ts
@@ -58,5 +58,32 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, co
       const list = page.locator('ion-list');
       await expect(list).toHaveScreenshot(screenshot(`radio-long-label-in-item`));
     });
+
+    test(title('clicking padded space within item should click the radio'), async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-radio-group>
+          <ion-item>
+            <ion-radio>
+              <ion-label>Enable Notifications</ion-label>
+            </ion-radio>
+          </ion-item>
+        </ion-radio-group>
+      `,
+        config
+      );
+      const itemNative = page.locator('.item-native');
+      const ionChange = await page.spyOnEvent('ionChange');
+
+      // Clicks the padded space within the item
+      await itemNative.click({
+        position: {
+          x: 5,
+          y: 5,
+        },
+      });
+
+      expect(ionChange).toHaveReceivedEvent();
+    });
   });
 });
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts b/core/src/components/toggle/test/item/toggle.e2e.ts
index ac05fb963e3..98207bb104b 100644
--- a/core/src/components/toggle/test/item/toggle.e2e.ts
+++ b/core/src/components/toggle/test/item/toggle.e2e.ts
@@ -70,4 +70,27 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, co
       await expect(list).toHaveScreenshot(screenshot(`toggle-long-label-in-item`));
     });
   });
+
+  test(title('clicking padded space within item should click the toggle'), async ({ page }) => {
+    await page.setContent(
+      `
+      <ion-item>
+        <ion-toggle>Size</ion-toggle>
+      </ion-item>
+    `,
+      config
+    );
+    const itemNative = page.locator('.item-native');
+    const ionChange = await page.spyOnEvent('ionChange');
+
+    // Clicks the padded space within the item
+    await itemNative.click({
+      position: {
+        x: 5,
+        y: 5,
+      },
+    });
+
+    expect(ionChange).toHaveReceivedEvent();
+  });
 });

From 48e28f34803491b6e81da2da036c07dd75f1015f Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Thu, 7 Sep 2023 13:03:11 -0400
Subject: [PATCH 04/13] feat: item controller for handling click event behavior

---
 core/src/components/checkbox/checkbox.tsx | 24 ++++-------
 core/src/components/radio/radio.tsx       | 18 +++++---
 core/src/components/toggle/toggle.tsx     | 20 ++++++---
 core/src/utils/forms/index.ts             |  1 +
 core/src/utils/forms/item-controller.ts   | 52 +++++++++++++++++++++++
 5 files changed, 87 insertions(+), 28 deletions(-)
 create mode 100644 core/src/utils/forms/item-controller.ts

diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx
index b47fa5dd229..d4218640c26 100644
--- a/core/src/components/checkbox/checkbox.tsx
+++ b/core/src/components/checkbox/checkbox.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, Watch, h } from '@stencil/core';
-import type { LegacyFormController } from '@utils/forms';
-import { createLegacyFormController } from '@utils/forms';
+import type { ItemController, LegacyFormController } from '@utils/forms';
+import { createItemController, createLegacyFormController } from '@utils/forms';
 import type { Attributes } from '@utils/helpers';
 import { getAriaLabel, inheritAriaAttributes, renderHiddenInput } from '@utils/helpers';
 import { printIonWarning } from '@utils/logging';
@@ -31,8 +31,8 @@ import type { CheckboxChangeEventDetail } from './checkbox-interface';
 export class Checkbox implements ComponentInterface {
   private inputId = `ion-cb-${checkboxIds++}`;
   private focusEl?: HTMLElement;
-  private labelEl?: HTMLLabelElement;
   private legacyFormController!: LegacyFormController; // TODO(FW-3100): remove this
+  private itemController!: ItemController;
   private inheritedAttributes: Attributes = {};
 
   // TODO(FW-3100): remove this
@@ -133,9 +133,9 @@ export class Checkbox implements ComponentInterface {
    */
   @Event() ionStyle!: EventEmitter<StyleEventDetail>;
 
-  // TODO(FW-3100): remove this
   connectedCallback() {
-    this.legacyFormController = createLegacyFormController(this.el);
+    this.legacyFormController = createLegacyFormController(this.el); // TODO(FW-3100): remove this
+    this.itemController = createItemController(this.el);
   }
 
   componentWillLoad() {
@@ -205,15 +205,7 @@ export class Checkbox implements ComponentInterface {
   };
 
   private onClick = (ev: MouseEvent) => {
-    const path = ev.composedPath();
-    const { labelEl } = this;
-
-    if (labelEl) {
-      // Prevents the parent ion-item click listener from firing twice.
-      ev.stopPropagation();
-      if (path.includes(labelEl)) {
-        return;
-      }
+    if (this.itemController.controlClickHandler(ev)) {
       this.toggleChecked(ev);
     }
   };
@@ -259,7 +251,7 @@ export class Checkbox implements ComponentInterface {
         })}
         onClick={this.onClick}
       >
-        <label class="checkbox-wrapper" ref={(labelEl) => (this.labelEl = labelEl)}>
+        <label class="checkbox-wrapper" ref={this.itemController.setLabelRef}>
           {/*
             The native control must be rendered
             before the visible label text due to https://bugs.webkit.org/show_bug.cgi?id=251951
@@ -344,7 +336,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
         <svg class="checkbox-icon" viewBox="0 0 24 24" part="container">
           {path}
         </svg>
-        <label htmlFor={inputId} ref={(labelEl) => (this.labelEl = labelEl)}>
+        <label htmlFor={inputId} ref={this.itemController.setLabelRef}>
           {labelText}
         </label>
         <input
diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx
index d6618dcffe6..f90754b0d60 100644
--- a/core/src/components/radio/radio.tsx
+++ b/core/src/components/radio/radio.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
-import type { LegacyFormController } from '@utils/forms';
-import { createLegacyFormController } from '@utils/forms';
+import type { ItemController, LegacyFormController } from '@utils/forms';
+import { createItemController, createLegacyFormController } from '@utils/forms';
 import { addEventListener, getAriaLabel, removeEventListener } from '@utils/helpers';
 import { printIonWarning } from '@utils/logging';
 import { createColorClasses, hostContext } from '@utils/theme';
@@ -30,6 +30,7 @@ export class Radio implements ComponentInterface {
   private radioGroup: HTMLIonRadioGroupElement | null = null;
   private nativeInput!: HTMLInputElement;
   private legacyFormController!: LegacyFormController;
+  private itemController!: ItemController;
 
   // This flag ensures we log the deprecation warning at most once.
   private hasLoggedDeprecationWarning = false;
@@ -144,6 +145,7 @@ export class Radio implements ComponentInterface {
 
   connectedCallback() {
     this.legacyFormController = createLegacyFormController(this.el);
+    this.itemController = createItemController(this.el);
     if (this.value === undefined) {
       this.value = this.inputId;
     }
@@ -191,9 +193,13 @@ export class Radio implements ComponentInterface {
     }
   };
 
-  private onClick = () => {
+  private onClick = (ev: MouseEvent) => {
     const { radioGroup, checked } = this;
 
+    if (!this.itemController.controlClickHandler(ev)) {
+      return;
+    }
+
     /**
      * The legacy control uses a native input inside
      * of the radio host, so we can set this.checked
@@ -275,7 +281,7 @@ export class Radio implements ComponentInterface {
         aria-disabled={disabled ? 'true' : null}
         tabindex={buttonTabindex}
       >
-        <label class="radio-wrapper">
+        <label class="radio-wrapper" ref={this.itemController.setLabelRef}>
           <div
             class={{
               'label-text-wrapper': true,
@@ -338,7 +344,9 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
         })}
       >
         {this.renderRadioControl()}
-        <label htmlFor={inputId}>{labelText}</label>
+        <label ref={this.itemController.setLabelRef} htmlFor={inputId}>
+          {labelText}
+        </label>
         <input
           type="radio"
           checked={checked}
diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx
index bc5316e7ad3..f373551d452 100644
--- a/core/src/components/toggle/toggle.tsx
+++ b/core/src/components/toggle/toggle.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core';
-import type { LegacyFormController } from '@utils/forms';
-import { createLegacyFormController } from '@utils/forms';
+import type { ItemController, LegacyFormController } from '@utils/forms';
+import { createItemController, createLegacyFormController } from '@utils/forms';
 import { getAriaLabel, renderHiddenInput, inheritAriaAttributes } from '@utils/helpers';
 import type { Attributes } from '@utils/helpers';
 import { printIonWarning } from '@utils/logging';
@@ -38,6 +38,7 @@ export class Toggle implements ComponentInterface {
   private focusEl?: HTMLElement;
   private lastDrag = 0;
   private legacyFormController!: LegacyFormController;
+  private itemController!: ItemController;
   private inheritedAttributes: Attributes = {};
   private toggleTrack?: HTMLElement;
   private didLoad = false;
@@ -159,6 +160,7 @@ export class Toggle implements ComponentInterface {
 
   async connectedCallback() {
     this.legacyFormController = createLegacyFormController(this.el);
+    this.itemController = createItemController(this.el);
 
     /**
      * If we have not yet rendered
@@ -250,11 +252,13 @@ export class Toggle implements ComponentInterface {
     }
   }
 
-  private onClick = (ev: Event) => {
+  private onClick = (ev: MouseEvent) => {
     ev.preventDefault();
 
-    if (this.lastDrag + 300 < Date.now()) {
-      this.toggleChecked();
+    if (this.itemController.controlClickHandler(ev)) {
+      if (this.lastDrag + 300 < Date.now()) {
+        this.toggleChecked();
+      }
     }
   };
 
@@ -340,7 +344,7 @@ export class Toggle implements ComponentInterface {
           [`toggle-${rtl}`]: true,
         })}
       >
-        <label class="toggle-wrapper">
+        <label ref={this.itemController.setLabelRef} class="toggle-wrapper">
           {/*
             The native control must be rendered
             before the visible label text due to https://bugs.webkit.org/show_bug.cgi?id=251951
@@ -422,7 +426,9 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
         })}
       >
         {this.renderToggleControl()}
-        <label htmlFor={inputId}>{labelText}</label>
+        <label ref={this.itemController.setLabelRef} htmlFor={inputId}>
+          {labelText}
+        </label>
         <input
           type="checkbox"
           role="switch"
diff --git a/core/src/utils/forms/index.ts b/core/src/utils/forms/index.ts
index f219f3978a9..4d6bb1a78b2 100644
--- a/core/src/utils/forms/index.ts
+++ b/core/src/utils/forms/index.ts
@@ -1,2 +1,3 @@
 export * from './form-controller';
 export * from './notch-controller';
+export * from './item-controller';
diff --git a/core/src/utils/forms/item-controller.ts b/core/src/utils/forms/item-controller.ts
new file mode 100644
index 00000000000..8d7c846ae06
--- /dev/null
+++ b/core/src/utils/forms/item-controller.ts
@@ -0,0 +1,52 @@
+import { hostContext } from '@utils/theme';
+
+/**
+ * This is a utility class that is used by form controls rendered inside of an `ion-item`.
+ */
+export const createItemController = (el: HTMLElement) => {
+  let labelEl: HTMLLabelElement | undefined;
+
+  const setLabelRef = (el?: HTMLLabelElement | undefined) => {
+    labelEl = el;
+  };
+
+  /**
+   * Prevents the click event from bubbling up and triggering the parent ion-item click listener,
+   * when using a control inside of an ion-item.
+   * @param ev The click event for the control's label.
+   * @returns True if the click event should be allowed to bubble up, false if it should be stopped.
+   */
+  const controlClickHandler = (ev: MouseEvent) => {
+    const path = ev.composedPath();
+    const inItem = hostContext('ion-item', el);
+
+    if (!inItem) {
+      // If the control is not inside of an ion-item, allow the default click behavior.
+      return true;
+    }
+
+    if (labelEl !== undefined) {
+      if (!ev.isTrusted) {
+        /**
+         * If the event is not trusted, it is most likely a synthetic event
+         * from the `ion-item` clicking the first interactive control inside of it.
+         *
+         * When that occurs, we do not want to allow the even to bubble up,
+         * otherwise the `ion-item` will fire its click event twice.
+         */
+        ev.stopPropagation();
+      }
+      if (path.includes(labelEl)) {
+        return false;
+      }
+    }
+    return true;
+  };
+
+  return {
+    setLabelRef,
+    controlClickHandler,
+  };
+};
+
+export type ItemController = ReturnType<typeof createItemController>;

From 28e68e47314d04aefc8fd4dc006b0c10c5237909 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Thu, 7 Sep 2023 13:58:49 -0400
Subject: [PATCH 05/13] fix: change events emitting multiple times

---
 core/src/components/checkbox/checkbox.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx
index d4218640c26..293a8923615 100644
--- a/core/src/components/checkbox/checkbox.tsx
+++ b/core/src/components/checkbox/checkbox.tsx
@@ -205,9 +205,12 @@ export class Checkbox implements ComponentInterface {
   };
 
   private onClick = (ev: MouseEvent) => {
-    if (this.itemController.controlClickHandler(ev)) {
-      this.toggleChecked(ev);
+    if (!this.itemController.controlClickHandler(ev)) {
+      ev.stopPropagation();
+      return;
     }
+
+    this.toggleChecked(ev);
   };
 
   // TODO(FW-3100): run contents of renderCheckbox directly instead

From 58939905d44dce185705b5fe0569e6afd8b30bac Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Fri, 8 Sep 2023 13:11:20 -0400
Subject: [PATCH 06/13] fix: clicking in padded space clicks control, adds
 cursor

---
 core/src/components/checkbox/checkbox.tsx | 17 ++------
 core/src/components/item/item.scss        |  8 ++++
 core/src/components/item/item.tsx         | 27 ++++++++++--
 core/src/components/radio/radio.tsx       | 18 +++-----
 core/src/components/toggle/toggle.tsx     | 18 +++-----
 core/src/utils/forms/index.ts             |  1 -
 core/src/utils/forms/item-controller.ts   | 52 -----------------------
 7 files changed, 47 insertions(+), 94 deletions(-)
 delete mode 100644 core/src/utils/forms/item-controller.ts

diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx
index 293a8923615..af3dbc26b90 100644
--- a/core/src/components/checkbox/checkbox.tsx
+++ b/core/src/components/checkbox/checkbox.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, Watch, h } from '@stencil/core';
-import type { ItemController, LegacyFormController } from '@utils/forms';
-import { createItemController, createLegacyFormController } from '@utils/forms';
+import type { LegacyFormController } from '@utils/forms';
+import { createLegacyFormController } from '@utils/forms';
 import type { Attributes } from '@utils/helpers';
 import { getAriaLabel, inheritAriaAttributes, renderHiddenInput } from '@utils/helpers';
 import { printIonWarning } from '@utils/logging';
@@ -32,7 +32,6 @@ export class Checkbox implements ComponentInterface {
   private inputId = `ion-cb-${checkboxIds++}`;
   private focusEl?: HTMLElement;
   private legacyFormController!: LegacyFormController; // TODO(FW-3100): remove this
-  private itemController!: ItemController;
   private inheritedAttributes: Attributes = {};
 
   // TODO(FW-3100): remove this
@@ -135,7 +134,6 @@ export class Checkbox implements ComponentInterface {
 
   connectedCallback() {
     this.legacyFormController = createLegacyFormController(this.el); // TODO(FW-3100): remove this
-    this.itemController = createItemController(this.el);
   }
 
   componentWillLoad() {
@@ -205,11 +203,6 @@ export class Checkbox implements ComponentInterface {
   };
 
   private onClick = (ev: MouseEvent) => {
-    if (!this.itemController.controlClickHandler(ev)) {
-      ev.stopPropagation();
-      return;
-    }
-
     this.toggleChecked(ev);
   };
 
@@ -254,7 +247,7 @@ export class Checkbox implements ComponentInterface {
         })}
         onClick={this.onClick}
       >
-        <label class="checkbox-wrapper" ref={this.itemController.setLabelRef}>
+        <label class="checkbox-wrapper">
           {/*
             The native control must be rendered
             before the visible label text due to https://bugs.webkit.org/show_bug.cgi?id=251951
@@ -339,9 +332,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
         <svg class="checkbox-icon" viewBox="0 0 24 24" part="container">
           {path}
         </svg>
-        <label htmlFor={inputId} ref={this.itemController.setLabelRef}>
-          {labelText}
-        </label>
+        <label htmlFor={inputId}>{labelText}</label>
         <input
           type="checkbox"
           aria-checked={`${checked}`}
diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss
index 46e2cafe052..d5d6013ccf9 100644
--- a/core/src/components/item/item.scss
+++ b/core/src/components/item/item.scss
@@ -173,6 +173,13 @@
   }
 }
 
+// Item: Interactive
+// --------------------------------------------------
+
+:host(.item-interactive) {
+  cursor: pointer;
+}
+
 
 // Item: Disabled
 // --------------------------------------------------
@@ -189,6 +196,7 @@
 }
 
 
+
 // Native Item
 // --------------------------------------------------
 
diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx
index 8612b532850..76e498531be 100644
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -351,7 +351,9 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
   }
 
   private getFirstInteractive() {
-    const controls = this.el.querySelectorAll<HTMLElement>('ion-toggle, ion-checkbox, ion-radio');
+    const controls = this.el.querySelectorAll<HTMLElement>(
+      'ion-toggle:not([disabled]), ion-checkbox:not([disabled]), ion-radio:not([disabled])'
+    );
     return controls[0];
   }
 
@@ -398,12 +400,30 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
     // readers from reading all items as clickable
     if (clickable || (firstInteractive !== undefined && !multipleInputs)) {
       clickFn = {
-        onClick: (ev: Event) => {
+        onClick: (ev: MouseEvent) => {
           if (clickable) {
             openURL(href, ev, routerDirection, routerAnimation);
           }
           if (firstInteractive !== undefined && !multipleInputs) {
-            firstInteractive.click();
+            const path = ev.composedPath();
+            const target = path[0] as HTMLElement;
+
+            if (ev.isTrusted) {
+              /**
+               * Dispatches a click event to the first interactive element,
+               * when it is the result of a user clicking on the item.
+               *
+               * We check if the click target is in the shadow root,
+               * which means the user clicked on the .item-native or
+               * .item-inner padding.
+               */
+
+              const clickedWithinShadowRoot = this.el.shadowRoot!.contains(target);
+
+              if (clickedWithinShadowRoot) {
+                firstInteractive.click();
+              }
+            }
           }
         },
       };
@@ -430,6 +450,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
             [`item-lines-${lines}`]: lines !== undefined,
             [`item-fill-${fillValue}`]: true,
             [`item-shape-${shape}`]: shape !== undefined,
+            'item-interactive': firstInteractive !== undefined,
             'item-disabled': disabled,
             'in-list': inList,
             'item-multiple-inputs': this.multipleInputs,
diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx
index f90754b0d60..d6618dcffe6 100644
--- a/core/src/components/radio/radio.tsx
+++ b/core/src/components/radio/radio.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
-import type { ItemController, LegacyFormController } from '@utils/forms';
-import { createItemController, createLegacyFormController } from '@utils/forms';
+import type { LegacyFormController } from '@utils/forms';
+import { createLegacyFormController } from '@utils/forms';
 import { addEventListener, getAriaLabel, removeEventListener } from '@utils/helpers';
 import { printIonWarning } from '@utils/logging';
 import { createColorClasses, hostContext } from '@utils/theme';
@@ -30,7 +30,6 @@ export class Radio implements ComponentInterface {
   private radioGroup: HTMLIonRadioGroupElement | null = null;
   private nativeInput!: HTMLInputElement;
   private legacyFormController!: LegacyFormController;
-  private itemController!: ItemController;
 
   // This flag ensures we log the deprecation warning at most once.
   private hasLoggedDeprecationWarning = false;
@@ -145,7 +144,6 @@ export class Radio implements ComponentInterface {
 
   connectedCallback() {
     this.legacyFormController = createLegacyFormController(this.el);
-    this.itemController = createItemController(this.el);
     if (this.value === undefined) {
       this.value = this.inputId;
     }
@@ -193,13 +191,9 @@ export class Radio implements ComponentInterface {
     }
   };
 
-  private onClick = (ev: MouseEvent) => {
+  private onClick = () => {
     const { radioGroup, checked } = this;
 
-    if (!this.itemController.controlClickHandler(ev)) {
-      return;
-    }
-
     /**
      * The legacy control uses a native input inside
      * of the radio host, so we can set this.checked
@@ -281,7 +275,7 @@ export class Radio implements ComponentInterface {
         aria-disabled={disabled ? 'true' : null}
         tabindex={buttonTabindex}
       >
-        <label class="radio-wrapper" ref={this.itemController.setLabelRef}>
+        <label class="radio-wrapper">
           <div
             class={{
               'label-text-wrapper': true,
@@ -344,9 +338,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
         })}
       >
         {this.renderRadioControl()}
-        <label ref={this.itemController.setLabelRef} htmlFor={inputId}>
-          {labelText}
-        </label>
+        <label htmlFor={inputId}>{labelText}</label>
         <input
           type="radio"
           checked={checked}
diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx
index f373551d452..6c890db51f8 100644
--- a/core/src/components/toggle/toggle.tsx
+++ b/core/src/components/toggle/toggle.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core';
-import type { ItemController, LegacyFormController } from '@utils/forms';
-import { createItemController, createLegacyFormController } from '@utils/forms';
+import type { LegacyFormController } from '@utils/forms';
+import { createLegacyFormController } from '@utils/forms';
 import { getAriaLabel, renderHiddenInput, inheritAriaAttributes } from '@utils/helpers';
 import type { Attributes } from '@utils/helpers';
 import { printIonWarning } from '@utils/logging';
@@ -38,7 +38,6 @@ export class Toggle implements ComponentInterface {
   private focusEl?: HTMLElement;
   private lastDrag = 0;
   private legacyFormController!: LegacyFormController;
-  private itemController!: ItemController;
   private inheritedAttributes: Attributes = {};
   private toggleTrack?: HTMLElement;
   private didLoad = false;
@@ -160,7 +159,6 @@ export class Toggle implements ComponentInterface {
 
   async connectedCallback() {
     this.legacyFormController = createLegacyFormController(this.el);
-    this.itemController = createItemController(this.el);
 
     /**
      * If we have not yet rendered
@@ -255,10 +253,8 @@ export class Toggle implements ComponentInterface {
   private onClick = (ev: MouseEvent) => {
     ev.preventDefault();
 
-    if (this.itemController.controlClickHandler(ev)) {
-      if (this.lastDrag + 300 < Date.now()) {
-        this.toggleChecked();
-      }
+    if (this.lastDrag + 300 < Date.now()) {
+      this.toggleChecked();
     }
   };
 
@@ -344,7 +340,7 @@ export class Toggle implements ComponentInterface {
           [`toggle-${rtl}`]: true,
         })}
       >
-        <label ref={this.itemController.setLabelRef} class="toggle-wrapper">
+        <label class="toggle-wrapper">
           {/*
             The native control must be rendered
             before the visible label text due to https://bugs.webkit.org/show_bug.cgi?id=251951
@@ -426,9 +422,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
         })}
       >
         {this.renderToggleControl()}
-        <label ref={this.itemController.setLabelRef} htmlFor={inputId}>
-          {labelText}
-        </label>
+        <label htmlFor={inputId}>{labelText}</label>
         <input
           type="checkbox"
           role="switch"
diff --git a/core/src/utils/forms/index.ts b/core/src/utils/forms/index.ts
index 4d6bb1a78b2..f219f3978a9 100644
--- a/core/src/utils/forms/index.ts
+++ b/core/src/utils/forms/index.ts
@@ -1,3 +1,2 @@
 export * from './form-controller';
 export * from './notch-controller';
-export * from './item-controller';
diff --git a/core/src/utils/forms/item-controller.ts b/core/src/utils/forms/item-controller.ts
deleted file mode 100644
index 8d7c846ae06..00000000000
--- a/core/src/utils/forms/item-controller.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { hostContext } from '@utils/theme';
-
-/**
- * This is a utility class that is used by form controls rendered inside of an `ion-item`.
- */
-export const createItemController = (el: HTMLElement) => {
-  let labelEl: HTMLLabelElement | undefined;
-
-  const setLabelRef = (el?: HTMLLabelElement | undefined) => {
-    labelEl = el;
-  };
-
-  /**
-   * Prevents the click event from bubbling up and triggering the parent ion-item click listener,
-   * when using a control inside of an ion-item.
-   * @param ev The click event for the control's label.
-   * @returns True if the click event should be allowed to bubble up, false if it should be stopped.
-   */
-  const controlClickHandler = (ev: MouseEvent) => {
-    const path = ev.composedPath();
-    const inItem = hostContext('ion-item', el);
-
-    if (!inItem) {
-      // If the control is not inside of an ion-item, allow the default click behavior.
-      return true;
-    }
-
-    if (labelEl !== undefined) {
-      if (!ev.isTrusted) {
-        /**
-         * If the event is not trusted, it is most likely a synthetic event
-         * from the `ion-item` clicking the first interactive control inside of it.
-         *
-         * When that occurs, we do not want to allow the even to bubble up,
-         * otherwise the `ion-item` will fire its click event twice.
-         */
-        ev.stopPropagation();
-      }
-      if (path.includes(labelEl)) {
-        return false;
-      }
-    }
-    return true;
-  };
-
-  return {
-    setLabelRef,
-    controlClickHandler,
-  };
-};
-
-export type ItemController = ReturnType<typeof createItemController>;

From 11a7d9ef60ad35da8f9421f88dd347a0679c3caa Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Fri, 8 Sep 2023 13:17:13 -0400
Subject: [PATCH 07/13] chore: add type for any

---
 core/src/components/checkbox/checkbox.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx
index af3dbc26b90..239a68c86d8 100644
--- a/core/src/components/checkbox/checkbox.tsx
+++ b/core/src/components/checkbox/checkbox.tsx
@@ -186,7 +186,7 @@ export class Checkbox implements ComponentInterface {
     });
   };
 
-  private toggleChecked = (ev: any) => {
+  private toggleChecked = (ev: Event) => {
     ev.preventDefault();
 
     this.setFocus();

From 73f17826c1be28619e198a663e2c1b9b933f8e0d Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Fri, 8 Sep 2023 15:51:56 -0400
Subject: [PATCH 08/13] fix: workaround stencil unit test bug with pseudo
 selectors

---
 core/src/components/item/item.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx
index 76e498531be..9e24cf51a65 100644
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -1,5 +1,5 @@
 import type { ComponentInterface } from '@stencil/core';
-import { Component, Element, Host, Listen, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
+import { Build, Component, Element, Host, Listen, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
 import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
 import type { Attributes } from '@utils/helpers';
 import { inheritAttributes, raf } from '@utils/helpers';
@@ -351,6 +351,15 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
   }
 
   private getFirstInteractive() {
+    if (Build.isTesting) {
+      /**
+       * Pseudo selectors can't be tested in unit tests.
+       * It will cause an error when running the tests.
+       *
+       * We can remove this once https://github.com/ionic-team/stencil/issues/3588 is fixed.
+       */
+      return undefined;
+    }
     const controls = this.el.querySelectorAll<HTMLElement>(
       'ion-toggle:not([disabled]), ion-checkbox:not([disabled]), ion-radio:not([disabled])'
     );
@@ -407,7 +416,6 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
           if (firstInteractive !== undefined && !multipleInputs) {
             const path = ev.composedPath();
             const target = path[0] as HTMLElement;
-
             if (ev.isTrusted) {
               /**
                * Dispatches a click event to the first interactive element,
@@ -417,9 +425,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
                * which means the user clicked on the .item-native or
                * .item-inner padding.
                */
-
               const clickedWithinShadowRoot = this.el.shadowRoot!.contains(target);
-
               if (clickedWithinShadowRoot) {
                 firstInteractive.click();
               }

From e5cfeb669e1cccc3cf6f520bad15b7bbf480e492 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Fri, 8 Sep 2023 16:12:16 -0400
Subject: [PATCH 09/13] fix: item has a reserved item-interactive class

---
 core/src/components/item/item.scss | 2 +-
 core/src/components/item/item.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss
index d5d6013ccf9..eb71271dd0f 100644
--- a/core/src/components/item/item.scss
+++ b/core/src/components/item/item.scss
@@ -176,7 +176,7 @@
 // Item: Interactive
 // --------------------------------------------------
 
-:host(.item-interactive) {
+:host(.item-has-interactive-control) {
   cursor: pointer;
 }
 
diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx
index 9e24cf51a65..ecd7a651224 100644
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -456,7 +456,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
             [`item-lines-${lines}`]: lines !== undefined,
             [`item-fill-${fillValue}`]: true,
             [`item-shape-${shape}`]: shape !== undefined,
-            'item-interactive': firstInteractive !== undefined,
+            'item-has-interactive-control': firstInteractive !== undefined,
             'item-disabled': disabled,
             'in-list': inList,
             'item-multiple-inputs': this.multipleInputs,

From 45e7340b050d9602c4976ab130946d350acc86c9 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Mon, 18 Sep 2023 15:11:12 -0400
Subject: [PATCH 10/13] docs: document why clicking toggle label or padded
 space activates control

---
 core/src/components/toggle/test/item/toggle.e2e.ts | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts b/core/src/components/toggle/test/item/toggle.e2e.ts
index 98207bb104b..54c1aee4b16 100644
--- a/core/src/components/toggle/test/item/toggle.e2e.ts
+++ b/core/src/components/toggle/test/item/toggle.e2e.ts
@@ -83,7 +83,16 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, co
     const itemNative = page.locator('.item-native');
     const ionChange = await page.spyOnEvent('ionChange');
 
-    // Clicks the padded space within the item
+    /**
+     * Clicks the padded space within the item.
+     *
+     * We intentionally activate the toggle control when clicking either
+     * the label or padded space. This is different than native iOS,
+     * but we do it for three reasons:
+     * 1. Clicking a label connected to a control is standard behavior for web controls.
+     * 2. iOS is inconsistent in their implementation and other controls can be activated by clicking the label.
+     * 3. MD is consistent in their implementation and activates controls by clicking the label.
+     */
     await itemNative.click({
       position: {
         x: 5,

From c39bf764fc730cc093e18241d3022495493239ca Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Mon, 18 Sep 2023 16:20:17 -0400
Subject: [PATCH 11/13] refactor: test structure

---
 .../checkbox/test/basic/checkbox.e2e.ts       | 42 +++++++-------
 .../test/legacy/basic/checkbox.e2e.ts         | 42 +++++++-------
 .../components/radio/test/item/radio.e2e.ts   |  4 +-
 .../components/toggle/test/item/toggle.e2e.ts | 58 ++++++++++---------
 4 files changed, 75 insertions(+), 71 deletions(-)

diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts b/core/src/components/checkbox/test/basic/checkbox.e2e.ts
index ff1f57516e8..e06367f6887 100644
--- a/core/src/components/checkbox/test/basic/checkbox.e2e.ts
+++ b/core/src/components/checkbox/test/basic/checkbox.e2e.ts
@@ -83,28 +83,28 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await checkbox.evaluate((el: HTMLIonCheckboxElement) => (el.checked = true));
       expect(ionChange).not.toHaveReceivedEvent();
     });
-  });
 
-  test(title('clicking padded space within item should click the checkbox'), async ({ page }) => {
-    await page.setContent(
-      `
-      <ion-item>
-        <ion-checkbox>Size</ion-checkbox>
-      </ion-item>
-    `,
-      config
-    );
-    const itemNative = page.locator('.item-native');
-    const ionChange = await page.spyOnEvent('ionChange');
-
-    // Clicks the padded space within the item
-    await itemNative.click({
-      position: {
-        x: 5,
-        y: 5,
-      },
-    });
+    test('clicking padded space within item should click the checkbox', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-item>
+          <ion-checkbox>Size</ion-checkbox>
+        </ion-item>
+      `,
+        config
+      );
+      const itemNative = page.locator('.item-native');
+      const ionChange = await page.spyOnEvent('ionChange');
+
+      // Clicks the padded space within the item
+      await itemNative.click({
+        position: {
+          x: 5,
+          y: 5,
+        },
+      });
 
-    expect(ionChange).toHaveReceivedEvent();
+      expect(ionChange).toHaveReceivedEvent();
+    });
   });
 });
diff --git a/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts b/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts
index eae70a468d1..873fa15f2f9 100644
--- a/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts
+++ b/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts
@@ -67,28 +67,28 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
       await checkbox.evaluate((el: HTMLIonCheckboxElement) => (el.checked = true));
       await expect(ionChange).not.toHaveReceivedEvent();
     });
-  });
 
-  test(title('clicking padded space within item should click the checkbox'), async ({ page }) => {
-    await page.setContent(
-      `
-      <ion-item>
-        <ion-checkbox legacy="true" value="my-checkbox"></ion-checkbox>
-      </ion-item>
-    `,
-      config
-    );
-    const itemNative = page.locator('.item-native');
-    const ionChange = await page.spyOnEvent('ionChange');
-
-    // Clicks the padded space within the item
-    await itemNative.click({
-      position: {
-        x: 5,
-        y: 5,
-      },
-    });
+    test('clicking padded space within item should click the checkbox', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-item>
+          <ion-checkbox legacy="true" value="my-checkbox"></ion-checkbox>
+        </ion-item>
+      `,
+        config
+      );
+      const itemNative = page.locator('.item-native');
+      const ionChange = await page.spyOnEvent('ionChange');
+
+      // Clicks the padded space within the item
+      await itemNative.click({
+        position: {
+          x: 5,
+          y: 5,
+        },
+      });
 
-    expect(ionChange).toHaveReceivedEvent();
+      expect(ionChange).toHaveReceivedEvent();
+    });
   });
 });
diff --git a/core/src/components/radio/test/item/radio.e2e.ts b/core/src/components/radio/test/item/radio.e2e.ts
index 91c79982f19..4a255394e52 100644
--- a/core/src/components/radio/test/item/radio.e2e.ts
+++ b/core/src/components/radio/test/item/radio.e2e.ts
@@ -58,8 +58,10 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, co
       const list = page.locator('ion-list');
       await expect(list).toHaveScreenshot(screenshot(`radio-long-label-in-item`));
     });
+  });
 
-    test(title('clicking padded space within item should click the radio'), async ({ page }) => {
+  test.describe(title('radio: ionChange'), () => {
+    test('clicking padded space within item should click the radio', async ({ page }) => {
       await page.setContent(
         `
         <ion-radio-group>
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts b/core/src/components/toggle/test/item/toggle.e2e.ts
index 54c1aee4b16..82ed627d861 100644
--- a/core/src/components/toggle/test/item/toggle.e2e.ts
+++ b/core/src/components/toggle/test/item/toggle.e2e.ts
@@ -71,35 +71,37 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, co
     });
   });
 
-  test(title('clicking padded space within item should click the toggle'), async ({ page }) => {
-    await page.setContent(
-      `
-      <ion-item>
-        <ion-toggle>Size</ion-toggle>
-      </ion-item>
-    `,
-      config
-    );
-    const itemNative = page.locator('.item-native');
-    const ionChange = await page.spyOnEvent('ionChange');
+  test.describe(title('toggle: ionChange'), () => {
+    test('clicking padded space within item should click the toggle', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-item>
+          <ion-toggle>Size</ion-toggle>
+        </ion-item>
+      `,
+        config
+      );
+      const itemNative = page.locator('.item-native');
+      const ionChange = await page.spyOnEvent('ionChange');
 
-    /**
-     * Clicks the padded space within the item.
-     *
-     * We intentionally activate the toggle control when clicking either
-     * the label or padded space. This is different than native iOS,
-     * but we do it for three reasons:
-     * 1. Clicking a label connected to a control is standard behavior for web controls.
-     * 2. iOS is inconsistent in their implementation and other controls can be activated by clicking the label.
-     * 3. MD is consistent in their implementation and activates controls by clicking the label.
-     */
-    await itemNative.click({
-      position: {
-        x: 5,
-        y: 5,
-      },
-    });
+      /**
+       * Clicks the padded space within the item.
+       *
+       * We intentionally activate the toggle control when clicking either
+       * the label or padded space. This is different than native iOS,
+       * but we do it for three reasons:
+       * 1. Clicking a label connected to a control is standard behavior for web controls.
+       * 2. iOS is inconsistent in their implementation and other controls can be activated by clicking the label.
+       * 3. MD is consistent in their implementation and activates controls by clicking the label.
+       */
+      await itemNative.click({
+        position: {
+          x: 5,
+          y: 5,
+        },
+      });
 
-    expect(ionChange).toHaveReceivedEvent();
+      expect(ionChange).toHaveReceivedEvent();
+    });
   });
 });

From 1e28d676ee6c94c142942c09dfd064e637373619 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Mon, 18 Sep 2023 16:28:46 -0400
Subject: [PATCH 12/13] fix: clicking padded space clicks select

---
 core/src/components/item/item.tsx             |  2 +-
 .../select/test/basic/select.e2e.ts           | 28 +++++++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx
index ecd7a651224..c148624a860 100644
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -361,7 +361,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
       return undefined;
     }
     const controls = this.el.querySelectorAll<HTMLElement>(
-      'ion-toggle:not([disabled]), ion-checkbox:not([disabled]), ion-radio:not([disabled])'
+      'ion-toggle:not([disabled]), ion-checkbox:not([disabled]), ion-radio:not([disabled]), ion-select:not([disabled])'
     );
     return controls[0];
   }
diff --git a/core/src/components/select/test/basic/select.e2e.ts b/core/src/components/select/test/basic/select.e2e.ts
index f288df62b09..44dd7dba25e 100644
--- a/core/src/components/select/test/basic/select.e2e.ts
+++ b/core/src/components/select/test/basic/select.e2e.ts
@@ -234,5 +234,33 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
       await select.evaluate((el: HTMLIonSelectElement) => (el.value = 'banana'));
       await expect(ionChange).not.toHaveReceivedEvent();
     });
+
+    test('clicking padded space within item should click the select', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-item>
+          <ion-select label="Fruit" interface="action-sheet">
+            <ion-select-option value="apple">Apple</ion-select-option>
+            <ion-select-option value="banana">Banana</ion-select-option>
+          </ion-select>
+        </ion-item>
+      `,
+        config
+      );
+      const itemNative = page.locator('.item-native');
+      const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+
+      // Clicks the padded space within the item
+      await itemNative.click({
+        position: {
+          x: 5,
+          y: 5,
+        },
+      });
+
+      await ionActionSheetDidPresent.next();
+
+      expect(ionActionSheetDidPresent).toHaveReceivedEvent();
+    });
   });
 });

From 4069fd9480e225f77f9960739a3eec26670a4270 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Tue, 19 Sep 2023 23:10:55 -0400
Subject: [PATCH 13/13] chore: link tech-debt task

---
 core/src/components/item/item.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx
index c148624a860..8fe7d50ec97 100644
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -356,7 +356,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
        * Pseudo selectors can't be tested in unit tests.
        * It will cause an error when running the tests.
        *
-       * We can remove this once https://github.com/ionic-team/stencil/issues/3588 is fixed.
+       * TODO: FW-5205 - Remove the build conditional when this is fixed in Stencil
        */
       return undefined;
     }