代码之家 › 专栏 › 技术社区 › Rob Monhemius

在角材质模式中选择第二个按钮

angular-material-5 angular html

0

Rob Monhemius · 技术社区 · 4 年前

tabindex='-1' autoFocus: true 在提供程序中。但是,这会导致用户体验问题,您无法使用键盘集中“否”按钮。如何在键盘上保持第二个按钮的可访问性的同时对其进行对焦。我也试过用 tabindex ,这似乎不会影响选择。我正在寻找一个优雅的解决方案(所以最好不写一些打字解决它)

dialog.component.html

<h2 mat-dialog-title>Cookie request</h2>
<mat-dialog-content>Should we use a cookie to automatically log you in next time?</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button [mat-dialog-close]='false' tabindex='-1'>No</button>
  <button mat-button [mat-dialog-close]="true"  tabindex='1'>Yes</button>
</mat-dialog-actions>

@NgModule({
  declarations: [...stuff],
  imports: [...stuff],
  providers: [
    {provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: true, disableClose: true, autoFocus: true }}
  ],
  entryComponents: [
    DialogComponent
  ],
  bootstrap: [AppComponent]
})

官方文件: https://material.angular.io/components/dialog/api

可选:如何强制焦点保持在模态内部直到它关闭?

0 回复 | 直到 4 年前

1

3

Quentin Grisel 4 年前

根据 Stackblitz of material dialog ,您可以看到他们正在使用 cdkFocusInitial 到 focus the OK button

[ 编辑: 可能不准确,但仍然有趣!]要导航到其他可聚焦元素(如果需要),tabindex似乎无法正常工作,但我认为您的答案如下: Angular A11y

[编辑2]:

<h1 mat-dialog-title>Hi {{data.name}}</h1>
<div mat-dialog-content>
  <p>What's your favorite animal?</p>
  <mat-form-field>
    <mat-label>Favorite Animal</mat-label>
    <input matInput [(ngModel)]="data.animal">
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">No Thanks</button>
  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>