Как установить фокусировку на указатель даты материала в модале начальной загрузки? - PullRequest
Новая
       29

Как установить фокусировку на указатель даты материала в модале начальной загрузки?

0 голосов
/ 14 ноября 2018

Так что в настоящее время мне поручено убедиться, что содержимое моего веб-сайта доступно в Интернете в соответствии со стандартами WCAG 2.0.Одним из основных пунктов этого требования является то, что веб-страница должна быть доступна с помощью клавиши табуляции.То есть, если я хочу перейти вперед по форме, я могу использовать вкладку для перехода к следующему полю и сдвигать вкладку для возврата к предыдущему полю.

Теперь одна из проблем, с которыми я сталкиваюсь, заключается в том, чтобы средство выбора даты материала фокусировалось на календаре при его появлении.Из того, что я могу сказать, фокус не идет на календарь, а остается в модальной форме.То есть, когда я пытаюсь нажать клавишу табуляции, пока открыт инструмент выбора даты, он переключается через модальную форму вместо календаря.Вместо этого я хочу циклически перемещаться по календарю.

Вот то, что я использую для настройки средства выбора даты. 

<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>

Я пыталсяразличные методы, такие как применение cdkFocusInitial к 

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

, но это, похоже, ничего не делает.

Я также пытался применить (focus) = "picker.open", однако это кажетсядля автоматического открытия календаря, не устанавливая соответствующий фокус.В моем фрагменте кода выше метод trapEventFocus ($ event) также не срабатывает.

Если у кого-то есть какие-либо предложения, это будет с благодарностью.

1 Ответ

0 голосов
/ 14 ноября 2018

Я обнаружил, что использование следующей настройки дает хорошие результаты клавиатуры и вынуждает пользователя выбирать значение даты, используя только указатель даты. 

<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>

Stackblitz

...