Accessibility and Templating Issues in p-confirmdialog and p-dialog (PrimeNG v19)

[justinthomas0789]

Hi Team,
After updating to PrimeNG v19 in Angular 19, I noticed two key issues with the p-confirmdialog component:

1. Accessibility Issue with the Close Button

The close button in p-confirmdialog does not have an aria-label or accessible text by default. While the documentation mentions the closeAriaLabel property, setting it does not apply the aria-label to the close button.

Example:

<p-confirmdialog closeAriaLabel="{{ 'FORM.CLOSE' | translate }}"></p-confirmdialog>

Expected Behavior:

The aria-label should appear on the close button, ensuring accessibility compliance (e.g., WCAG standards).

Actual Behavior:

The aria-label is missing from the close button, resulting in accessibility flags during audits.

2. Templating Behavior Issue

The new templating structure for p-confirmdialog introduced in v19 does not work as expected. According to the documentation, templates for header, message, and other sections should render correctly. However, anything placed inside the p-confirmdialog tag appears to render inside the message section by default.

Example:

<p-confirmdialog> <ng-template #header> <p>Header Content</p> </ng-template> <ng-template #message let-message> <p>{{ message }}</p> </ng-template> </p-confirmdialog>

Expected Behavior:

The #header template should render as the header of the dialog, and the #message template should render as the message section.

Actual Behavior:

All content inside the p-confirmdialog tag is rendered inside the message section, ignoring the #header template.

Steps to Reproduce

1. Use the p-confirmdialog component with closeAriaLabel and templates as shown above.
2. Inspect the DOM for the close button's aria-label.
3. Observe the rendering behavior of templates for header and message.

Questions

1. Are these known issues in PrimeNG v19, or is there additional configuration required to use these features correctly?
2. Are fixes planned for these issues in future releases?

Any help will be appreciated! Thank you!

[github-actions]

Due to PrimeTek's demanding roadmap for PrimeNG, this issue is available for anyone to work on. Make sure to reference this issue in your pull request. ✨ Thank you for your contribution! ✨