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

ionic-team · Nov 25, 2020 · 0786835 · 0786835
1 parent 5275332
commit 0786835
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 14 deletions.
diff --git a/core/src/components/checkbox/checkbox.tsx b/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}

diff --git a/core/src/components/checkbox/test/basic/index.html b/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>

diff --git a/core/src/components/radio-group/radio-group.tsx b/core/src/components/radio-group/radio-group.tsx
@@ -84,7 +84,6 @@ export class RadioGroup implements ComponentInterface {
 
   private onClick = (ev: Event) => {
     ev.preventDefault();
-    ev.stopPropagation();
 
     const selectedRadio = ev.target && (ev.target as HTMLElement).closest('ion-radio');
     if (selectedRadio) {

diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx
@@ -420,9 +420,6 @@ export class Select implements ComponentInterface {
   }
 
   private onClick = (ev: UIEvent) => {
-    ev.preventDefault();
-    ev.stopPropagation();
-
     this.setFocus();
     this.open(ev);
   }

diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx
@@ -163,7 +163,6 @@ export class Toggle implements ComponentInterface {
 
   private onClick = (ev: Event) => {
     ev.preventDefault();
-    ev.stopPropagation();
 
     if (this.lastDrag + 300 < Date.now()) {
       this.checked = !this.checked;