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

core/src/components/datetime/datetime.tsx

@@ -1,7 +1,7 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
 
 import { DatetimeOptions, InputChangeEvent, Mode, PickerColumn, PickerColumnOption, PickerOptions, StyleEvent } from '../../interface';
-import { clamp, renderHiddenInput } from '../../utils/helpers';
+import { clamp, findItemLabel, renderHiddenInput } from '../../utils/helpers';
 import { hostContext } from '../../utils/theme';
 
 import { DatetimeData, LocaleData, convertDataToISO, convertFormatToKey, convertToArrayOfNumbers, convertToArrayOfStrings, dateDataSortValue, dateSortValue, dateValueRange, daysInMonth, getValueFromFormat, parseDate, parseTemplate, renderDatetime, renderTextFormat, updateDate } from './datetime-util';
@@ -16,8 +16,6 @@ import { DatetimeData, LocaleData, convertDataToISO, convertFormatToKey, convert
 })
 export class Datetime implements ComponentInterface {
   private inputId = `ion-dt-${datetimeIds++}`;
-  private labelId = `${this.inputId}-lbl`;
-  private picker?: HTMLIonPickerElement;
   private locale: LocaleData = {};
   private datetimeMin: DatetimeData = {};
   private datetimeMax: DatetimeData = {};
@@ -25,7 +23,8 @@ export class Datetime implements ComponentInterface {
 
   @Element() el!: HTMLIonDatetimeElement;
 
-  @State() text?: string | null;
+  @State() isExpanded = false;
+  @State() keyFocus = false;
 
   @Prop({ connect: 'ion-picker-controller' }) pickerCtrl!: HTMLIonPickerControllerElement;
 
@@ -207,8 +206,19 @@ export class Datetime implements ComponentInterface {
    */
   @Event() ionChange!: EventEmitter<InputChangeEvent>;
 
+  /**
+   * Emitted when the datetime has focus.
+   */
+  @Event() ionFocus!: EventEmitter<void>;
+
+  /**
+   * Emitted when the datetime loses focus.
+   */
+  @Event() ionBlur!: EventEmitter<void>;
+
   /**
    * Emitted when the styles change.
+   * @internal
    */
   @Event() ionStyle!: EventEmitter<StyleEvent>;
 
@@ -233,13 +243,17 @@ export class Datetime implements ComponentInterface {
    */
   @Method()
   async open() {
-    if (this.disabled) {
+    if (this.disabled || this.isExpanded) {
       return;
     }
 
     const pickerOptions = this.generatePickerOptions();
-    const picker = this.picker = await this.pickerCtrl.create(pickerOptions);
-    await this.validate();
+    const picker = await this.pickerCtrl.create(pickerOptions);
+    this.isExpanded = true;
+    picker.onDidDismiss().then(() => {
+      this.isExpanded = false;
+    });
+    await this.validate(picker);
     await picker.present();
   }
 
@@ -255,7 +269,6 @@ export class Datetime implements ComponentInterface {
 
   private updateDatetimeValue(value: any) {
     updateDate(this.datetimeValue, value);
-    this.updateText();
   }
 
   private generatePickerOptions(): PickerOptions {
@@ -355,11 +368,11 @@ export class Datetime implements ComponentInterface {
     return divyColumns(columns);
   }
 
-  private async validate() {
+  private async validate(picker: HTMLIonPickerElement) {
     const today = new Date();
     const minCompareVal = dateDataSortValue(this.datetimeMin);
     const maxCompareVal = dateDataSortValue(this.datetimeMax);
-    const yearCol = await this.picker!.getColumn('year');
+    const yearCol = await picker.getColumn('year');
 
     let selectedYear: number = today.getFullYear();
     if (yearCol) {
@@ -378,7 +391,7 @@ export class Datetime implements ComponentInterface {
       }
     }
 
-    const selectedMonth = await this.validateColumn(
+    const selectedMonth = await this.validateColumn(picker,
       'month', 1,
       minCompareVal, maxCompareVal,
       [selectedYear, 0, 0, 0, 0],
@@ -386,21 +399,21 @@ export class Datetime implements ComponentInterface {
     );
 
     const numDaysInMonth = daysInMonth(selectedMonth, selectedYear);
-    const selectedDay = await this.validateColumn(
+    const selectedDay = await this.validateColumn(picker,
       'day', 2,
       minCompareVal, maxCompareVal,
       [selectedYear, selectedMonth, 0, 0, 0],
       [selectedYear, selectedMonth, numDaysInMonth, 23, 59]
     );
 
-    const selectedHour = await this.validateColumn(
+    const selectedHour = await this.validateColumn(picker,
       'hour', 3,
       minCompareVal, maxCompareVal,
       [selectedYear, selectedMonth, selectedDay, 0, 0],
       [selectedYear, selectedMonth, selectedDay, 23, 59]
     );
 
-    await this.validateColumn(
+    await this.validateColumn(picker,
       'minute', 4,
       minCompareVal, maxCompareVal,
       [selectedYear, selectedMonth, selectedDay, selectedHour, 0],
@@ -444,7 +457,7 @@ export class Datetime implements ComponentInterface {
     min.second = min.second || 0;
     max.second = max.second || 59;
 
-    // Ensure min/max constraits
+    // Ensure min/max constraints
     if (min.year > max.year) {
       console.error('min.year > max.year');
       min.year = max.year - 100;
@@ -460,8 +473,8 @@ export class Datetime implements ComponentInterface {
     }
   }
 
-  private async validateColumn(name: string, index: number, min: number, max: number, lowerBounds: number[], upperBounds: number[]): Promise<number> {
-    const column = await this.picker!.getColumn(name);
+  private async validateColumn(picker: HTMLIonPickerElement, name: string, index: number, min: number, max: number, lowerBounds: number[], upperBounds: number[]): Promise<number> {
+    const column = await picker.getColumn(name);
     if (!column) {
       return 0;
     }
@@ -497,10 +510,10 @@ export class Datetime implements ComponentInterface {
     return 0;
   }
 
-  private updateText() {
+  private getText() {
     // create the text of the formatted data
     const template = this.displayFormat || this.pickerFormat || DEFAULT_FORMAT;
-    this.text = renderDatetime(template, this.datetimeValue, this.locale);
+    return renderDatetime(template, this.datetimeValue, this.locale);
   }
 
   private hasValue(): boolean {
@@ -508,11 +521,39 @@ export class Datetime implements ComponentInterface {
     return Object.keys(val).length > 0;
   }
 
+  private onClick = () => {
+    this.open();
+  }
+
+  private onKeyUp = () => {
+    this.keyFocus = true;
+  }
+
+  private onFocus = () => {
+    this.ionFocus.emit();
+  }
+
+  private onBlur = () => {
+    this.keyFocus = false;
+    this.ionBlur.emit();
+  }
+
   hostData() {
     const addPlaceholderClass =
-      (this.text == null && this.placeholder != null) ? true : false;
+      (this.getText() === undefined && this.placeholder != null) ? true : false;
+
+    const labelId = this.inputId + '-lbl';
+    const label = findItemLabel(this.el);
+    if (label) {
+      label.id = labelId;
+    }
 
     return {
+      'role': 'combobox',
+      'aria-disabled': this.disabled ? 'true' : null,
+      'aria-expanded': `${this.isExpanded}`,
+      'aria-haspopup': 'true',
+      'aria-labelledby': labelId,
       class: {
         'datetime-disabled': this.disabled,
         'datetime-placeholder': addPlaceholderClass,
@@ -524,24 +565,22 @@ export class Datetime implements ComponentInterface {
   render() {
     // If selected text has been passed in, use that first
     // otherwise use the placeholder
-    let datetimeText = this.text;
-    if (datetimeText == null) {
+    let datetimeText = this.getText();
+    if (datetimeText === undefined) {
       datetimeText = this.placeholder != null ? this.placeholder : '';
     }
-    renderHiddenInput(this.el, this.name, this.value, this.disabled);
+    renderHiddenInput(true, this.el, this.name, this.value, this.disabled);
 
     return [
       <div class="datetime-text">{datetimeText}</div>,
       <button
         type="button"
-        aria-haspopup="true"
-        aria-labelledby={this.labelId}
-        aria-disabled={this.disabled ? 'true' : null}
-        onClick={this.open.bind(this)}
-        class="datetime-cover"
+        onClick={this.onClick}
+        onKeyUp={this.onKeyUp}
+        onFocus={this.onFocus}
+        onBlur={this.onBlur}
       >
-      </button>,
-      <slot></slot>
+      </button>
     ];
   }
 }