Here is the modal that gets displayed when a user selects something to delete.
How can the focus be set on the buttons and not stay at the underlying content below the modal?
<p-toast position="center" key="modal" (onClose)="onDeleteReject()" [modal]="true" [baseZIndex]="5000">
<ng-template let-message pTemplate="message">
<div style="text-align: center">
<i class="pi pi-exclamation-triangle" style="font-size: 3em"></i>
<h3>{{message.summary}}</h3>
<p>{{message.detail}}</p>
</div>
<div class="ui-g ui-fluid" focus="true">
<div class="ui-g-6">
<button type="text" pButton (click)="onDeleteConfirm()" label="Oui" class="ui-button-success"></button>
</div>
<div class="ui-g-6">
<button type="text" pButton (click)="onDeleteReject()" label="Non" class="ui-button-secondary"></button>
</div>
</div>
</ng-template>
</p-toast>
Using autofocus seems to work but only on the first load of the modal.
<button type="button" pButton (click)="onDeleteConfirm()" label="Oui" class="ui-button-success" autofocus></button>
https://www.primefaces.org/primeng/#/toast