Ion-modal + ion-datetime not opening when talkback is turned on in android

Ionic Framework
1

The below code perfectly opens the ion-modal with the date picker within it on click of the date field, when accessed in android app.
However the same does not work when talkback/voiceover is turned on. When talkback is on in android, on clicking on the date field, a keypad is opened instead of the modal with the date picker in it.

The above issue is only observed in android. It works fine in IOS, irrespective of the voice over is turned on or off.

Code:

<div class="displayDatesection">             
                    <input class="formInputTextDate" placeholder="MM/DD/YYYY" aria-label="Enter End Date" displayFormat="MM/DDYYYY"
                      formControlName="endDate" type="text" id="open-end-date-modal"/>
                      <span class="icon-sty" style="margin-top:4px">
                        <i class="fa-solid fa-calendar-days" aria-hidden="true"></i>
                      </span>

                      <ion-modal trigger="open-end-date-modal" [cssClass] ="'bottom-end'">              
                        <ng-template>
                          <ion-datetime presentation="date" #datetime (ionChange)="endDateChange(datetime.value)" size="cover" preferWheel="true" type="ios"
                            [showDefaultButtons]="true" [value]="dateValue"
                            class="date-cal-width">
                          </ion-datetime>
                        </ng-template>
                      </ion-modal>
                      </div>
1 Like