|
Screen Reader ConfirmDialog component uses alertdialog role along with aria-labelledby referring to the header element however any attribute is passed to the root element so you may use aria-labelledby to override this default behavior. In addition aria-modal is added since focus is kept within the popup. When require method of the $confirm instance is used and a trigger is passed as a parameter, ConfirmDialog adds aria-expanded state attribute and aria-controls to the trigger so that the relation between the trigger and the dialog is defined.
const confirm = useConfirm();
const isVisible = ref(false);
const openDialog = () => {
confirm.require({
message: 'Are you sure you want to proceed?',
header: 'Confirmation',
onShow: () => {
isVisible.value = true;
},
onHide: () => {
isVisible.value = false;
}
});
};
Overlay Keyboard SupportKeyFunctiontabMoves focus to the next the focusable element within the dialog.shift + tabMoves focus to the previous the focusable element within the dialog.escapeCloses the dialog.Buttons Keyboard SupportKeyFunctionenterCloses the dialog.spaceCloses the dialog.
|