fix(inputs): keyboard focus improvements (#16838)

fixes #16815
fixes #16872
fixes #13978
fixes #16610

core/src/components/toggle/toggle.scss

@@ -25,7 +25,7 @@
   z-index: $z-index-item-input;
 }
 
-:host(.toggle-key) input {
+:host(.ion-focused) input {
   border: 2px solid #5e9ed6;
 }
 
@@ -33,8 +33,7 @@
   pointer-events: none;
 }
 
-input {
+button {
   @include input-cover();
-
-  pointer-events: none;
 }
+

core/src/components/toggle/toggle.tsx

@@ -24,7 +24,6 @@ export class Toggle implements ComponentInterface {
   @Prop({ context: 'queue' }) queue!: QueueApi;
 
   @State() activated = false;
-  @State() keyFocus = false;
 
   /**
    * The mode determines which platform styles to use.
@@ -99,27 +98,6 @@ 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();
   }
@@ -138,6 +116,11 @@ export class Toggle implements ComponentInterface {
     this.disabledChanged();
   }
 
+  @Listen('click')
+  onClick() {
+    this.checked = !this.checked;
+  }
+
   private emitStyle() {
     this.ionStyle.emit({
       'interactive-disabled': this.disabled,
@@ -176,27 +159,34 @@ export class Toggle implements ComponentInterface {
     return this.value || '';
   }
 
+  private onFocus = () => {
+    this.ionFocus.emit();
+  }
+
+  private onBlur = () => {
+    this.ionBlur.emit();
+  }
+
   hostData() {
-    const labelId = this.inputId + '-lbl';
-    const label = findItemLabel(this.el);
+    const { inputId, disabled, checked, activated, color, el } = this;
+    const labelId = inputId + '-lbl';
+    const label = findItemLabel(el);
     if (label) {
       label.id = labelId;
     }
 
     return {
       'role': 'checkbox',
-      'tabindex': '0',
-      'aria-disabled': this.disabled ? 'true' : null,
-      'aria-checked': `${this.checked}`,
+      'aria-disabled': disabled ? 'true' : null,
+      'aria-checked': `${checked}`,
       'aria-labelledby': labelId,
 
       class: {
-        ...createColorClasses(this.color),
-        'in-item': hostContext('ion-item', this.el),
-        'toggle-activated': this.activated,
-        'toggle-checked': this.checked,
-        'toggle-disabled': this.disabled,
-        'toggle-key': this.keyFocus,
+        ...createColorClasses(color),
+        'in-item': hostContext('ion-item', el),
+        'toggle-activated': activated,
+        'toggle-checked': checked,
+        'toggle-disabled': disabled,
         'interactive': true
       }
     };
@@ -206,11 +196,18 @@ export class Toggle implements ComponentInterface {
     const value = this.getValue();
     renderHiddenInput(true, this.el, this.name, (this.checked ? value : ''), this.disabled);
 
-    return (
+    return [
       <div class="toggle-icon">
         <div class="toggle-inner"/>
-      </div>
-    );
+      </div>,
+      <button
+        type="button"
+        onFocus={this.onFocus}
+        onBlur={this.onBlur}
+        disabled={this.disabled}
+      >
+      </button>
+    ];
   }
 }