search

primefaces / primeng

The Most Complete Angular UI Component Library
https://primeng.org
Other
9.83k stars 4.5k forks source link

Dialog: Close Buttons must have discernible text #14977

Open HellinSunWTW opened 4 months ago

HellinSunWTW commented 4 months ago

Describe the bug

The Axe Dev Tools for Accessibility is reporting that the 'Buttons must have discernible text': image Can we have appropriate aria label like "Close the dialog" added please?

Environment

Windows 10

Reproducer

No response

Angular version

17.2.3

PrimeNG version

17.9.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.18.0

Browser(s)

No response

Steps to reproduce the behavior

  1. Install the Axe Dev Tools for Accessibility plug-in.
  2. Visit the PrimeNG dialog page (https://primeng.org/dialog) on Chrome/Edge browser.
  3. Scan the page with Axe

Expected behavior

No response

TaneliTuomola commented 3 months ago

There is actually a undocumented property "closeAriaLabel" that can be used to set aria-label to the close button. <p-dialog header="Header" closeAriaLabel="Close"> Documents should be updated.

Draganlazarev90 commented 3 months ago

There is actually a undocumented property "closeAriaLabel" that can be used to set aria-label to the close button. <p-dialog header="Header" closeAriaLabel="Close"> Documents should be updated.

this doesn't work with dynamic dialog. When you add the closeAriaLabel in the config it still doesn't apply it to the close button

TaneliTuomola commented 3 months ago

There is actually a undocumented property "closeAriaLabel" that can be used to set aria-label to the close button. <p-dialog header="Header" closeAriaLabel="Close"> Documents should be updated.

this doesn't work with dynamic dialog. When you add the closeAriaLabel in the config it still doesn't apply it to the close button

https://github.com/primefaces/primeng/issues/15144