fix(inputs): fix aria with shadow-dom (#16329)

core/src/components/checkbox/checkbox.tsx

@@ -1,7 +1,7 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
 
 import { CheckedInputChangeEvent, Color, Mode, StyleEvent } from '../../interface';
-import { renderHiddenInput } from '../../utils/helpers';
+import { findItemLabel, renderHiddenInput } from '../../utils/helpers';
 import { createColorClasses, hostContext } from '../../utils/theme';
 
 @Component({
@@ -15,7 +15,6 @@ import { createColorClasses, hostContext } from '../../utils/theme';
 export class Checkbox implements ComponentInterface {
 
   private inputId = `ion-cb-${checkboxIds++}`;
-  private labelId = `${this.inputId}-lbl`;
 
   @Element() el!: HTMLElement;
 
@@ -74,6 +73,7 @@ export class Checkbox implements ComponentInterface {
 
   /**
    * Emitted when the styles change.
+   * @internal
    */
   @Event() ionStyle!: EventEmitter<StyleEvent>;
 
@@ -98,7 +98,7 @@ export class Checkbox implements ComponentInterface {
     });
   }
 
-  private onChange = () => {
+  private onClick = () => {
     this.checked = !this.checked;
   }
 
@@ -116,7 +116,16 @@ export class Checkbox implements ComponentInterface {
   }
 
   hostData() {
+    const labelId = this.inputId + '-lbl';
+    const label = findItemLabel(this.el);
+    if (label) {
+      label.id = labelId;
+    }
     return {
+      'role': 'checkbox',
+      'aria-disabled': this.disabled ? 'true' : null,
+      'aria-checked': `${this.checked}`,
+      'aria-labelledby': labelId,
       class: {
         ...createColorClasses(this.color),
         'in-item': hostContext('ion-item', this.el),
@@ -129,7 +138,7 @@ export class Checkbox implements ComponentInterface {
   }
 
   render() {
-    renderHiddenInput(this.el, this.name, this.value, this.disabled);
+    renderHiddenInput(true, this.el, this.name, (this.checked ? this.value : ''), this.disabled);
 
     return [
       <svg class="checkbox-icon" viewBox="0 0 24 24">
@@ -138,19 +147,14 @@ export class Checkbox implements ComponentInterface {
           : <path d="M5.9,12.5l3.8,3.8l8.8-8.8"/>
         }
       </svg>,
-      <input
-        type="checkbox"
-        id={this.inputId}
-        aria-labelledby={this.labelId}
-        onChange={this.onChange}
+      <button
+        type="button"
+        onClick={this.onClick}
+        onKeyUp={this.onKeyUp}
         onFocus={this.onFocus}
         onBlur={this.onBlur}
-        onKeyUp={this.onKeyUp}
-        checked={this.checked}
-        name={this.name}
-        value={this.value}
-        disabled={this.disabled}
-      />
+      >
+      </button>
     ];
   }
 }