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

core/src/components/toggle/toggle.tsx

@@ -1,8 +1,8 @@
-import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, QueueApi, State, Watch } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, QueueApi, State, Watch } from '@stencil/core';
 
 import { CheckedInputChangeEvent, Color, Gesture, GestureDetail, Mode, StyleEvent } from '../../interface';
 import { hapticSelection } from '../../utils/haptic';
-import { renderHiddenInput } from '../../utils/helpers';
+import { findItemLabel, renderHiddenInput } from '../../utils/helpers';
 import { createColorClasses, hostContext } from '../../utils/theme';
 
 @Component({
@@ -16,7 +16,6 @@ import { createColorClasses, hostContext } from '../../utils/theme';
 export class Toggle implements ComponentInterface {
 
   private inputId = `ion-tg-${toggleIds++}`;
-  private nativeInput!: HTMLInputElement;
   private pivotX = 0;
   private gesture?: Gesture;
 
@@ -80,6 +79,7 @@ export class Toggle implements ComponentInterface {
 
   /**
    * Emitted when the styles change.
+   * @internal
    */
   @Event() ionStyle!: EventEmitter<StyleEvent>;
 
@@ -99,20 +99,32 @@ export class Toggle implements ComponentInterface {
     }
   }
 
+  @Listen('click')
+  onClick() {
+    this.checked = !this.checked;
+  }
+
+  @Listen('keyup')
+  onKeyUp() {
+    this.keyFocus = true;
+  }
+
+  @Listen('focus')
+  onFocus() {
+    this.ionFocus.emit();
+  }
+
+  @Listen('blur')
+  onBlur() {
+    this.keyFocus = false;
+    this.ionBlur.emit();
+  }
+
   componentWillLoad() {
     this.emitStyle();
   }
 
   async componentDidLoad() {
-    const parentItem = this.nativeInput.closest('ion-item');
-    if (parentItem) {
-      const itemLabel = parentItem.querySelector('ion-label');
-      if (itemLabel) {
-        itemLabel.id = this.inputId + '-lbl';
-        this.nativeInput.setAttribute('aria-labelledby', itemLabel.id);
-      }
-    }
-
     this.gesture = (await import('../../utils/gesture/gesture')).createGesture({
       el: this.el,
       queue: this.queue,
@@ -158,24 +170,6 @@ export class Toggle implements ComponentInterface {
     }
 
     this.activated = false;
-    this.nativeInput.focus();
-  }
-
-  private onChange = () => {
-    this.checked = !this.checked;
-  }
-
-  private onKeyUp = () => {
-    this.keyFocus = true;
-  }
-
-  private onFocus = () => {
-    this.ionFocus.emit();
-  }
-
-  private onBlur = () => {
-    this.keyFocus = false;
-    this.ionBlur.emit();
   }
 
   private getValue() {
@@ -183,7 +177,19 @@ export class Toggle implements ComponentInterface {
   }
 
   hostData() {
+    const labelId = this.inputId + '-lbl';
+    const label = findItemLabel(this.el);
+    if (label) {
+      label.id = labelId;
+    }
+
     return {
+      'role': 'checkbox',
+      'tabindex': '0',
+      'aria-disabled': this.disabled ? 'true' : null,
+      'aria-checked': `${this.checked}`,
+      'aria-labelledby': labelId,
+
       class: {
         ...createColorClasses(this.color),
         'in-item': hostContext('ion-item', this.el),
@@ -198,27 +204,13 @@ export class Toggle implements ComponentInterface {
 
   render() {
     const value = this.getValue();
-    renderHiddenInput(this.el, this.name, (this.checked ? value : ''), this.disabled);
+    renderHiddenInput(true, this.el, this.name, (this.checked ? value : ''), this.disabled);
 
-    return [
+    return (
       <div class="toggle-icon">
         <div class="toggle-inner"/>
-      </div>,
-      <input
-        type="checkbox"
-        onChange={this.onChange}
-        onFocus={this.onFocus}
-        onBlur={this.onBlur}
-        onKeyUp={this.onKeyUp}
-        checked={this.checked}
-        id={this.inputId}
-        name={this.name}
-        value={value}
-        disabled={this.disabled}
-        ref={r => this.nativeInput = (r as any)}
-      />,
-      <slot></slot>
-    ];
+      </div>
+    );
   }
 }