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

angular/src/directives/proxies.ts

@@ -210,14 +210,16 @@ export declare interface Datetime extends StencilComponents<'IonDatetime'> {}
 export class Datetime {
   ionCancel: EventEmitter<CustomEvent>;
   ionChange: EventEmitter<CustomEvent>;
+  ionFocus: EventEmitter<CustomEvent>;
+  ionBlur: EventEmitter<CustomEvent>;
   ionStyle: EventEmitter<CustomEvent>;
 
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     const el = r.nativeElement;
     proxyMethods(this, el, ['open']);
     proxyInputs(this, el, ['mode', 'name', 'disabled', 'min', 'max', 'displayFormat', 'pickerFormat', 'cancelText', 'doneText', 'yearValues', 'monthValues', 'dayValues', 'hourValues', 'minuteValues', 'monthNames', 'monthShortNames', 'dayNames', 'dayShortNames', 'pickerOptions', 'placeholder', 'value']);
-    proxyOutputs(this, el, ['ionCancel', 'ionChange', 'ionStyle']);
+    proxyOutputs(this, el, ['ionCancel', 'ionChange', 'ionFocus', 'ionBlur', 'ionStyle']);
   }
 }
 
@@ -341,22 +343,22 @@ export class InfiniteScrollContent {
 }
 
 export declare interface Input extends StencilComponents<'IonInput'> {}
-@Component({ selector: 'ion-input', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'debounce', 'disabled', 'inputmode', 'max', 'maxlength', 'min', 'minlength', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'results', 'spellcheck', 'step', 'size', 'type', 'value'] })
+@Component({ selector: 'ion-input', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'debounce', 'disabled', 'inputmode', 'max', 'maxlength', 'min', 'minlength', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'spellcheck', 'step', 'size', 'type', 'value'] })
 export class Input {
   ionInput: EventEmitter<CustomEvent>;
   ionChange: EventEmitter<CustomEvent>;
-  ionStyle: EventEmitter<CustomEvent>;
   ionBlur: EventEmitter<CustomEvent>;
   ionFocus: EventEmitter<CustomEvent>;
   ionInputDidLoad: EventEmitter<CustomEvent>;
   ionInputDidUnload: EventEmitter<CustomEvent>;
+  ionStyle: EventEmitter<CustomEvent>;
 
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     const el = r.nativeElement;
     proxyMethods(this, el, ['setFocus']);
-    proxyInputs(this, el, ['color', 'mode', 'accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'debounce', 'disabled', 'inputmode', 'max', 'maxlength', 'min', 'minlength', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'results', 'spellcheck', 'step', 'size', 'type', 'value']);
-    proxyOutputs(this, el, ['ionInput', 'ionChange', 'ionStyle', 'ionBlur', 'ionFocus', 'ionInputDidLoad', 'ionInputDidUnload']);
+    proxyInputs(this, el, ['color', 'mode', 'accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'debounce', 'disabled', 'inputmode', 'max', 'maxlength', 'min', 'minlength', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'spellcheck', 'step', 'size', 'type', 'value']);
+    proxyOutputs(this, el, ['ionInput', 'ionChange', 'ionBlur', 'ionFocus', 'ionInputDidLoad', 'ionInputDidUnload', 'ionStyle']);
   }
 }
 

core/src/components.d.ts

@@ -1288,6 +1288,10 @@ export namespace Components {
     */
     'name'?: string;
     /**
+    * Emitted when the datetime loses focus.
+    */
+    'onIonBlur'?: (event: CustomEvent<void>) => void;
+    /**
     * Emitted when the datetime selection was cancelled.
     */
     'onIonCancel'?: (event: CustomEvent<void>) => void;
@@ -1296,6 +1300,10 @@ export namespace Components {
     */
     'onIonChange'?: (event: CustomEvent<InputChangeEvent>) => void;
     /**
+    * Emitted when the datetime has focus.
+    */
+    'onIonFocus'?: (event: CustomEvent<void>) => void;
+    /**
     * Emitted when the styles change.
     */
     'onIonStyle'?: (event: CustomEvent<StyleEvent>) => void;
@@ -1696,10 +1704,6 @@ export namespace Components {
     */
     'required': boolean;
     /**
-    * This is a nonstandard attribute supported by Safari that only applies when the type is `"search"`. Its value should be a nonnegative decimal integer.
-    */
-    'results'?: number;
-    /**
     * Sets focus on the specified `ion-input`. Use this method instead of the global `input.focus()`.
     */
     'setFocus': () => void;
@@ -1842,10 +1846,6 @@ export namespace Components {
     */
     'required'?: boolean;
     /**
-    * This is a nonstandard attribute supported by Safari that only applies when the type is `"search"`. Its value should be a nonnegative decimal integer.
-    */
-    'results'?: number;
-    /**
     * The initial size of the control. This value is in pixels unless the value of the type attribute is `"text"` or `"password"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored.
     */
     'size'?: number;
@@ -4052,7 +4052,7 @@ export namespace Components {
     /**
     * Opens the select overlay, it could be an alert, action-sheet or popover, based in `ion-select` settings.
     */
-    'open': (ev?: UIEvent | undefined) => Promise<OverlaySelect>;
+    'open': (ev?: UIEvent | undefined) => Promise<HTMLIonActionSheetElement | HTMLIonAlertElement | HTMLIonPopoverElement | undefined>;
     /**
     * The text to display when the select is empty.
     */

core/src/components/alert/alert.tsx

@@ -323,7 +323,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
           <button
             type="button"
             onClick={() => this.cbClick(i)}
-            aria-checked={i.checked ? 'true' : null}
+            aria-checked={`${i.checked}`}
             id={i.id}
             disabled={i.disabled}
             tabIndex={0}
@@ -356,7 +356,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
           <button
             type="button"
             onClick={() => this.rbClick(i)}
-            aria-checked={i.checked ? 'true' : null}
+            aria-checked={`${i.checked}`}
             disabled={i.disabled}
             id={i.id}
             tabIndex={0}

core/src/components/button/button.tsx

@@ -143,6 +143,7 @@ export class Button implements ComponentInterface {
 
     return {
       'ion-activatable': true,
+      'aria-disabled': this.disabled ? 'true' : null,
       class: {
         ...createColorClasses(color),
         [buttonType]: true,

core/src/components/checkbox/checkbox.scss

@@ -35,7 +35,7 @@
   --checkmark-color: #{current-color(contrast)};
 }
 
-input {
+button {
   @include input-cover();
 }
 

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>
     ];
   }
 }

core/src/components/checkbox/readme.md

@@ -27,7 +27,6 @@ Checkboxes allow the selection of multiple options from a set of options. They a
 | `ionBlur`   | Emitted when the toggle loses focus.           | void                    |
 | `ionChange` | Emitted when the checked property has changed. | CheckedInputChangeEvent |
 | `ionFocus`  | Emitted when the toggle has focus.             | void                    |
-| `ionStyle`  | Emitted when the styles change.                | StyleEvent              |
 
 
 ## CSS Custom Properties

core/src/components/datetime/datetime.scss

@@ -40,9 +40,10 @@
 
 :host(.datetime-disabled) {
   opacity: .3;
+  pointer-events: none;
 }
 
-.datetime-cover {
+button {
   @include input-cover();
 }