Выберите вторую кнопку в модальном материале angular - PullRequest
Новая
       21

Выберите вторую кнопку в модальном материале angular

0 голосов
/ 26 апреля 2020

У меня есть простой модал из angular материала. Я хочу сфокусировать кнопку «Да», когда она открывается / загружается. Я добился этого, установив tabindex='-1' на кнопке no и autoFocus: true в провайдере. Однако это вызывает проблему с UX, когда вы не можете сфокусировать кнопку «no» на клавиатуре. Как мне сфокусировать вторую кнопку, оставив ее доступной с клавиатуры. Я также попытался использовать 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>

выдержка из app.module.ts 

@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

Необязательно: как заставить фокус оставаться внутри моего модального до закрыто?

1 Ответ

3 голосов
/ 27 апреля 2020

В соответствии с Stackblitz материала , вы можете видеть, что они используют от cdkFocusInitial до focus the OK button.

[ Редактировать: возможно не точно, но все же интересно!] Чтобы перейти к другому фокусируемому элементу (при необходимости), tabindex не работает должным образом, но я думаю, что ваш ответ здесь: Angular A11y

[Редактировать 2]: Так как некоторые люди не могут правильно обращаться к стеку, вот пример диалога html код: 

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