fix(a11y): only preventDefault for the onClick event (#22573)

core/src/components/checkbox/checkbox.tsx

@@ -114,7 +114,9 @@ export class Checkbox implements ComponentInterface {
     }
   }
 
-  private onClick = () => {
+  private onClick = (ev: any) => {
+    ev.preventDefault();
+
     this.setFocus();
     this.checked = !this.checked;
     this.indeterminate = false;
@@ -168,14 +170,6 @@ export class Checkbox implements ComponentInterface {
           {labelText}
         </label>
         <input
-          onClick={(ev: Event) => {
-            {/**
-              * This is needed otherwise any click
-              * events set on `ion-item` are fired twice
-              */}
-            ev.preventDefault();
-            ev.stopPropagation()
-          }}
           type="checkbox"
           aria-checked={`${checked}`}
           disabled={disabled}

core/src/components/checkbox/test/basic/index.html

@@ -26,6 +26,11 @@
     </ion-header>
 
     <ion-content id="content">
+      <ion-item onClick="clickItem()">
+        <ion-label>Clickable Item</ion-label>
+        <ion-checkbox></ion-checkbox>
+      </ion-item>
+
       <ion-item>
         <ion-label>Default</ion-label>
         <ion-checkbox checked></ion-checkbox>
@@ -126,6 +131,10 @@
         console.log('Listen click: fired');
       });
     }
+
+    const clickItem = () => {
+      console.log('Item click: fired');
+    }
   </script>
 
 </body>