Accessibility and Templating Issues in p-confirmdialog and p-dialog (PrimeNG v19) #3369
Unanswered
justinthomas0789
asked this question in
PrimeNG
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hi Team,
After updating to PrimeNG v19, 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
Questions
Any help will be appreciated! Thank you!
Beta Was this translation helpful? Give feedback.
All reactions