How to set focus to material date picker inside a bootstrap modal?

So currently I'm tasked with making sure the content on my website is web accessible according to WCAG 2.0 standards. One of the main points of this requirement is that the web page must be accessible using the tab key. That is if I want to move forward through the form, I can use tab to move to the next field and shift tab to move back to the the previous field.

Now one of the issues I'm having is getting the material date picker to focus on the calendar when it appears. From what I could tell, the focus doesn't go to the the calendar instead it stays within the modal form. That is when I try to press tab on while the date picker is open, it cycles through the modal form instead of the calendar. What I want instead to be able to cycle through the calendar.

Here is what I'm using to setup the date picker.

<div class="col-md-6">
    <mat-form-field>
        <input matInput [matDatepicker]="picker" [min]="fromMinDate" [max]="curDate" readonly="readonly" (click)="openMinTaxCalendar(picker); trapEventFocus($event);"  #minEffectiveYear (ngModelChange)="setToDate($event)" placeholder="YYYY/MM/DD" [(ngModel)]="effectiveDateFrom">
        <mat-datepicker-toggle matSuffix [for]="picker1" (closed)="closedMinTaxCalendar($event)"></mat-datepicker-toggle>
        <mat-datepicker #picker ></mat-datepicker>
    </mat-form-field>
</div>

I have tried various methods such as applying cdkFocusInitial to the

<input matInput ....> </input>

but this doesn't seem to be doing anything.

I also tried applying (focus)="picker.open" However this seems to automatically open the calendar, while not setting the appropriate focus. In my code snippet above, the trapEventFocus($event) method also fails to fire.

If anyone has any suggestions it would be greatly appreciated.

Solution

I have found that using the following setup yields good keyboard results and forces the user to select a date value by only using the datepicker.

<mat-form-field
  (click)="picker?.open()"
  style="cursor: pointer"
>
  <input
    matInput
    [ngModel]="dateField.value | date: 'yyyy/MM/dd'"
    [min]="fromMinDate"
    [max]="curDate"
    placeholder="YYYY/MM/DD"
    name="dateFieldView"
    style="cursor: pointer"
    (focus)="picker?.open()"
    readonly
  />
  <input
    matInput
    [matDatepicker]="picker"
    [ngModel]="effectiveDateFrom"
    name="dateField"
    #dateField
    required
    hidden
  />
  <mat-datepicker-toggle
    matSuffix
    [for]="picker"
  ></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

How to set focus to material date picker inside a bootstrap modal?

Stackblitz