ConfirmPopup

ConfirmPopup displays a confirmation overlay displayed relatively to its target.


import { ConfirmPopupModule } from 'primeng/confirmpopup';

ConfirmDialog is defined using p-confirmDialog tag and an instance of ConfirmationService is required to display it bycalling confirm method.



<p-toast></p-toast>
<p-confirmPopup></p-confirmPopup>
<p-button (click)="confirm($event)" icon="pi pi-check" label="Confirm"></p-button>

Following is the list of structural style classes, for theming classes visit theming page.

NameElement
p-confirm-popupContainer element
p-confirm-popup-contentContent element.
p-confirm-popup-iconMessage icon.
p-confirm-popup-messageMessage text.
p-confirm-popup-footerFooter element for buttons.
Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

Screen Reader

ConfirmPopup component uses alertdialog role and since any attribute is passed to the root element you may define attributes like aria-label or aria-labelledby to describe the popup contents. In addition aria-modal is added since focus is kept within the popup.

It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding tabIndex would be necessary. ConfirmPopup adds aria-expanded state attribute and aria-controls to the trigger so that the relation between the trigger and the popup is defined.

Overlay Keyboard Support

When the popup gets opened, the first focusable element receives the focus and this can be customized by adding autofocus to an element within the popup.

KeyFunction
tabMoves focus to the next the focusable element within the popup.
shift + tabMoves focus to the previous the focusable element within the popup.
escapeCloses the popup and moves focus to the trigger.

Buttons Keyboard Support

KeyFunction
enterTriggers the action, closes the popup and moves focus to the trigger.
spaceTriggers the action, closes the popup and moves focus to the trigger.