Question

因此，根据WCAG 2.0标准，目前我的任务是确保网站上的内容可通过网络访问。这项要求的主要要点之一是必须使用Tab键访问该网页。就是说，如果我想在表单中前进，可以使用Tab键移动到下一个字段，并使用Tab键移动回到上一个字段。

现在，我遇到的问题之一是让重要日期选择器在日历出现时专注于日历。据我所知，焦点并没有放在日历上，而是停留在模态形式内。那就是当我尝试在打开日期选择器的同时按Tab时，它循环显示模式形式而不是日历。相反，我希望能够在日历中循环显示。

这是我用来设置日期选择器的东西。

<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）方法也无法触发。

如果有人有任何建议，将不胜感激。

Answer 1

我发现使用以下设置可获得良好的键盘效果，并迫使用户仅通过使用日期选择器来选择日期值。

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

如何将焦点设置到引导模式中的重要日期选择器？

1 个答案:

Stackblitz